根据数据库返回的id，实现ztree树形结构复选框自动勾选

<script>
    
    var rGuid = '', rName = '';
    $(function() {

        $.ajax({
            url:"/role/queryRoles.do",
            data:{},
            success:function (data) {
                var res = JSON.parse(data);
                var html = '';
                $.each(res.data, function(i, v) {
                    i == 0 ? (rGuid = v.id, rName = v.roleName) : "";
                    html += '<li ' + (i == 0 ? 'class="liHover"' : "") + ' onclick="liClick(this,\'' + v.id + '\')">' + v.roleName + "</li>";
                });
                $("#roles").html(html);

                //GetTree(res.data[0].GUID);
            }
        })
    });

    
    function liClick(id,guid){

        //alert(guid);
        //console.log("id= "+guid);
        rName = $(id).text();
        //alert("name= "+rName);

        $.ajax({
            url: 'role/queryRolePerm.do?roleId='+guid,
            success: function(res) {
                var result = JSON.parse(res);
                for (var i = 0;i < result.data.length;i++){
                    //console.log(result.data[i].permissionId);
                    zTree = $.fn.zTree.getZTreeObj("treeDemo"); //
                    zTree.checkNode( zTree.getNodeByParam( "id",result.data[i].permissionId), true ); //根据id在ztree的复选框中实现自动勾选

                }
            }
        })
    }

</script>


<script type="text/javascript">

    $(document).ready(function () {

        $.ajax({
            url: '/permission/selectPermission.do',
            success: function (res) {
                var result = JSON.parse(res);
                zNodes = result.data;

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

            }
        });

        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes = [];

        var code;

        function setCheck() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                py = $("#py").attr("checked") ? "p" : "",
                sy = $("#sy").attr("checked") ? "s" : "",
                pn = $("#pn").attr("checked") ? "p" : "",
                sn = $("#sn").attr("checked") ? "s" : "",
                type = {"Y": py + sy, "N": pn + sn};
            console.log(type);
            zTree.setting.check.chkboxType = type;
            showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };');
        }

        function showCode(str) {
            if (!code) code = $("#code");
            code.empty();
            code.append("<li>" + str + "</li>");
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            setCheck();
            $("#py").bind("change", setCheck);
            $("#sy").bind("change", setCheck);
            $("#pn").bind("change", setCheck);
            $("#sn").bind("change", setCheck);

        });

    });
</script>

<div class="xyj_clear"></div>
<fieldset class="xyjAufield">
    <legend>角色列表</legend>
    <ul id="roles">
        <li class="liHover" onclick="liClick(this,'{A871CA1C-88B6-4F1F-A546-681A535F01D6}')">催收结算</li>
        <li onclick="liClick(this,'{A871CA1C-88B6-4D3B-A546-681A535F01D1}')">电催专员</li>
    </ul>
</fieldset>

<fieldset class="xyjAufield xyjMargin-Left">
    <legend>权限列表</legend>
    <!--<form id="form1" runat="server">
        <div>
            <!–<input type="text" id="inp" name='inp'  style=" width:300px"/>–>
            <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
        </div>
    </form>-->
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
            <div id="empTree" class="tree tree-lines"></div>
        </div>
    </div>
</fieldset>

本来想的是把查出来的id,去和树形结构中要显示的id进行比较，相等着勾选复选框，但是在实际操作中，发现其实ztree已经帮这实现了这一步，核心代码就两行：

zTree = $.fn.zTree.getZTreeObj("treeDemo"); //
  zTree.checkNode( zTree.getNodeByParam( "id",result.data[i].permissionId), true );

挺简单哈~

// zTree = $.fn.zTree.getZTreeObj("treeDemo");
// var j = 0, l = result.data.length;
// for( ; j < l; j ++ ) {
//     zTree.checkNode( zTree.getNodeByParam( "id",result.data[j].permissionId), true );
// }

上面的代码还可以用循环 j 的方式去实现哦！

补充一点：

// zTree = $.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的div
// var node = zTree.getNodeByParam("id",101 );
// zTree.cancelSelectedNode();//先取消所有的选中状态
// zTree.selectNode(node,true);//将指定ID的节点选中
// zTree.checkNode(node,true);//将指定ID的复选框选中
// zTree.expandNode(node, true, false);//将指定ID节点展开

挺好用，有空在看看。