ztree 使用心得

最近项目需要用ztree ,初步研究感觉这个插件写的实在是太好了。现总结遇到的问题

封装一颗树

/**
 * 按类型分组树
 * Id  按类型分组ID
 * treeId  树ID
 * treeDivId  divid
 *
 * **/
function carTypeGroup(id,treeId,treeDivId){
    var o=new Object();
    o.showMenu = function () {
        //输入框的ID
        var cityOffset = $("#" + id).position();
        $("#" + treeDivId).css({left: cityOffset.left + "px"}).slideDown("fast");
        $("body").bind("mousedown", o.onAreaBodyDown);

    };

    o.onAreaBodyDown = function (event) {
        if (!( event.target.id == treeDivId || $(event.target).parents("#" + treeDivId).length > 0)) {
            o.areaHideMenu();
        }
    };

    o.areaHideMenu = function () {
        $("#" + treeDivId).fadeOut("fast");
        $("body").unbind("mousedown", o.onAreaBodyDown);
        //var treeObj = $.fn.zTree.getZTreeObj(treeId);
        //treeObj.expandAll(false);

    };
    //点击勾选checkbox 执行函数
    o.treeChecked = function (event, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var checkCount = treeObj.getCheckedNodes(true);
        var namestr = "";
        var idstr = "";
        //获取到所有的被选中的
        for (var i = 0; i < checkCount.length; i++) {
            namestr += checkCount[i].name + ",";
            idstr += checkCount[i].id + ",";
        }
        //后续操作根据自身要求写。
        $("#groupByTollgate").val(idstr.substring(0, idstr.length - 1));
    }
    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: {"Y": "s", "N": "ps"}
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: o.treeChecked
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"ss", open:true},
        { id:11, pId:1, name:"111"},
        { id:12, pId:1, name:"112"},
        { id:13, pId:1, name:"113"},
        { id:2, pId:0, name:"gfg", open:true},
        { id:21, pId:2, name:"111"},
        { id:22, pId:2, name:"112"},
        { id:23, pId:2, name:"113"},
        { id:3, pId:0, name:"nhk", open:true},
        { id:31, pId:3, name:"111"},
        { id:32, pId:3, name:"112"},
        { id:33, pId:3, name:"113"}

    ];

    $.fn.zTree.init($("#" + treeId), setting, zNodes);

    return o;
}

其中遇到一个需求是，每次勾选的checkbox 再次点击的时候，让以前选过的默认是选中状态，也就是数据回显

/* *
 *  tree 回显选中值
 */
function initCarSelect(codeId, treeId) {
    var org = $("#" + codeId).val();
    var zTree = $.fn.zTree.getZTreeObj(treeId);
    var arr = org.split(",");
    for (var i = 0; i < arr.length; i++) {
        var node = zTree.getNodeByParam("id", arr[i], null);
        if(node!==null){
            zTree.checkNode(node, true, true);
        }
    }
}