码迷,mamicode.com
首页 > 其他好文 > 详细

zTtree异步加载,回显总结

时间:2017-11-11 13:16:18      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:数组   lin   好用   click   string   checkbox   min   for   源代码   

  此处zTree v3用来显示区域信息,由于数据量有点大,一次性加载的话,请求的数据量比较大。考虑采用异步加载的方式,即只在打开下一层的时候去请求这一层的数据。

  zTree API:http://www.treejs.cn/v3/api.php

  API文档相当详细,DEMO也很齐全,查看demo的代码可以选择右击,查看框架源代码。

  由于数据结构已定,个人觉得还是有很多显得累赘的地方。

  还有个问题,回显半选处理,一直想不到好的办法。

  首先是前端zTree参数设置:

  

var zTreeObj;
var setting ={
        check: {    //勾选  
            enable: true,
            chkStyle: "checkbox" ,
            chkboxType: { "Y": "ps", "N": "ps" },
            nocheckInherit: true//新加入子节点时,继承父节点的状态
        }, 
        view: {expandSpeed:"",
            showLine: true,//是否显示节点之间的连线
            selectedMulti: false,//设置是否允许同时选中多个节点
            //dblClickExpand: dblClickExpand//双击节点时,是否自动展开父节点
        },
        async:{
            enable:true,
            url:"../administrativeAction/getTreeJson",
            autoParam:["id=adminiId"],
            dataFilter:filter
        },
        callback:{
            //beforeExpand:zTreeBeforeExpand,
            onCheck: zTreeOnCheck,
            onAsyncSuccess: zTreeOnAsyncSuccess
        },
        data:{
            keep: {
                leaf:false,//如果设置为 true,则所有 isParent = false 的节点,都无法添加子节点。
                parent: true//如果设置为 true,则所有 isParent = true 的节点,即使该节点的子节点被全部删除或移走,依旧保持父节点状态。
            },
            simpleData: {
                enable: true//不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
            }
        }

};

var zNodes="";
$(function(){
    zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,zNodes);
})

function filter(treeId,parentNode,responseData){
    return responseData;
}

var newNode;

//ztree的勾选
function zTreeOnCheck(event, treeId, treeNode){
    var devId="";//ztree中用到的变量,当单独选择设备的时候,把设备的id赋值到这来
    var addressCode="";//选择一个区域的时候,把区域的编码赋值到这来
    //获取勾选状态集合
    var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
    nodes=treeObj.getCheckedNodes(true);

    for(var i=0;i<nodes.length;i++){
        var checkStatus = nodes[i].getCheckStatus();//1获取节点状态
        if(!checkStatus.half && checkStatus.checked){//2如果获取的节点的状态是选勾选并且不是半勾选
            var parentNode = nodes[i].getParentNode();//3获取父节点 ,返回 节点的父节点 JSON 数据对象。
            if(parentNode != null){                     //4如果节点的父节点不为null
                var parentCheckStatus = parentNode.getCheckStatus();//5获取父节点的状态
                if(parentCheckStatus.half){//6如果获取的父节点的状态是半勾选
                    addressCode=addressCode+nodes[i].code+";";
                }
            }else{//这来是选取所有节点
                addressCode=addressCode+nodes[i].code+";";
            }
        }
    }

    $("#devId").val(devId);
    $("#addressCode").val(addressCode);
}


//ztree初始化勾选
function zTreeOnAsyncSuccess(event, treeId, newNode,msg) {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var data = eval(msg);
    var nodeLevel = data[0].codeLevel;
    
    var v_addressCode=$.trim($("#addressCode").val());
    if(v_addressCode != ""){
        var addressArray=v_addressCode.split(";");
        for ( var i in addressArray) {
            if(addressArray[i] == ""){
                return;
            }
            //拆解code,找到最底层code的path
            var subCodes = codeReg(addressArray[i]);
            var len = subCodes.length;
            if(len > 1){
                                //对应的层级勾选对应的区域代码
                var node = treeObj.getNodeByParam("code",subCodes[nodeLevel-1],null);
                treeObj.checkNode(node,true,true);
            }else{
                                //勾选省级另外处理
                var node = treeObj.getNodeByParam("code",subCodes[0],null);
                treeObj.checkNode(node,true,true);
            }
            
        }
    }
    
    
}

//由于之前大佬代码的实现,要回显区域可能是最底层区域,
//这时就只有一个最底层区域的编码,为了拿到该区域的parent路径
//可以选择提供的API-getPath,来获取parent的
//还是解析吧。
function codeReg(code){
    var codeList=[];
    if(code.length == 6){
        codeList.push(code);
        return codeList;
    }
    codeList.push(code.substring(0,2)+"0000");
    codeList.push(code.substring(0,4)+"00000000")
    codeList.push(code.substring(0,6)+"000000")
    codeList.push(code.substring(0,9)+"000")
    codeList.push(code);
    return codeList;
}                                                   

  异步请求的后台地址,在setting中的async-url中设置。

  这里如果带参请求,可以在autoParam中获取,对应着改变,后台框架采用SSH,根据属性驱动,这里让treeNode节点的id=adminiId,adminiId为后台属性。

  回显,主要在zTreeOnAsyncSuccess这个函数中实现,对区域代码,分成两个部分处理:

    区域的相关数据都是从网上爬取得,所以省级的区域编码只有6位,特殊处理一下。

    1.省级被勾选上,这是最简单的情况,只要在每次异步请求的时候无脑的checkNode省级,就可以了,子级树展开显示的时候会自动继承parent的勾选状态。

    2.其他的采用数据库字段中的一个level来和树的level结合,最后和分解出来的区域编码subCodes数组结合,依次每次展开到一个层级之后,就在subCodes中根据level为下标,来勾选此层级中所有的应该勾选的node。

  到此,一直没有处理半勾选的情况。现在是可以实现回显勾选,但是如果存在半勾选的话,checkBox的样式就会有问题,考虑过有treeNode的的halfCheck属性去解决,最后惨败。

  感觉halfCheck属性和checked属性结合是可以解决这个问题的,应该会比较麻烦吧,还没想到什么好办法可以解决这个半勾选的问题。

    zTree的几个回调函数还是牛逼,好用,基本上能满足所有的动作。

    这个异步加载也可以放在beforeExpand这个回调中去实现的。

    beforeExpand和onAsyncSuccess的优先级

    filter中可以对后台相应的数据,进行预处理。

    后面有时间在来,要仔细的研究一下。记之。

  

zTtree异步加载,回显总结

标签:数组   lin   好用   click   string   checkbox   min   for   源代码   

原文地址:http://www.cnblogs.com/GoneLW/p/7818614.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!