Jquery-Ztree,封装ztree类库

来源:http://itssh.cn/post/11.html

Jquery-Ztree

Jquery-Ztree,封装ztree类库,提供异步/同步方法,具体配置请参考ztree,依赖jquery,封装jquery-ztree类库。

github地址:https://github.com/sm0210/Jquery-Ztree

@author:SM
@desc:Ztree 组件(异步 or 同步加载)
@e-mail:[email protected]
@version 1.0

实例化方法

//ztree对象
var ztree;
//请求参数信息
var configs={
 //async : false, // 不使用异步树,默认你需要一次加载所有的树,如果async:fasle不需要配置callback
 service: 'data/parentTree.json', //url
 params : {id : '1' , name:'zhangsan' },//请求参数
}
//ztree settings
var settings ={
    check:{
        enable:false //单选
    },
    view:{
        showLine:false  
    }
    ,callback :{
        //点击展开之前,重新复制查询条件
        beforeExpand : function(treeId,treeNode){
            //alert(treeNode.id);
            //改变请求参数
            configs={
                 service: 'data/subTree.json', //url
                 params : {id : treeNode.id , name : treeNode.name }//请求参数
            }               
            //改变请求参数
            ztree.setting.setParams(configs);//重新复制
        }   
    }
}
//
$(function(){
//实例化Ztree
ztree=$('#treeDemo').initZtree(configs,settings);   
//console.log(ztree);   
});

function showVal(){
    //获取提供的JS方法 --单选
    //console.log(ztree.setting.getValue().name);

    //单选
    var obj=ztree.getSelectedNodes();
    if(obj.length)
        alert(obj[0].id +" == "+obj[0].name);
    //console.log(obj.length);
    
    
    //多选
    /*var objAll=ztree.getChangeCheckedNodes();
    console.log(objAll.length);
    
    for(var i=0;i

html代码



    效果

    Jquery-Ztree,封装ztree类库_第1张图片
    jquery-ztree.png

    如果您觉得此文有帮助,可以打赏点钱给我支付宝[email protected] ,或扫描二维码

    来源:http://itssh.cn/post/11.html

    你可能感兴趣的:(Jquery-Ztree,封装ztree类库)