实现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);
            }
        })

    });


    function liClick(id, guid) {
        //alert("角色id= " + guid);

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

            $.ajax({
                url: '/role/queryRoleUser.do?roleId='+guid,
                success: function(res) {
                    var result = JSON.parse(res);
                    for (var i = 0;i < result.data.length;i++) {
                        if (result.data[i].userId != null){
                            zTree = $.fn.zTree.getZTreeObj("treeDemo");
                            zTree.checkNode(zTree.getNodeByParam("checkId", result.data[i].userId), true);//关键点
                        }
                    }
                }
            })
    }

</script>

以上是正确的实现方式。

                success: function(res) {
                    var result = JSON.parse(res);
                    for (var i = 0;i < result.data.length;i++) {
                        if (result.data[i].userId != null){
                            zTree = $.fn.zTree.getZTreeObj("treeDemo");
                            zTree.checkNode(zTree.getNodeByParam("id", result.data[i].id), true);//此处的参数"id"和后面参数相等则勾选。

上面这段代码是犯错的代码，因为

zTree.getNodeByParam("id", result.data[i].id), true)

参数"id"的问题。

导致

根据角色列表中某一id只能勾选上最外层的总公司，目标是要勾赵六，因为总公司id = 赵六id ,所以会自动找到匹配的根节点。

解决方案：

在对象中添加一个属性

在后台把它的id 值赋值给 checkId

这步操作相当于换个标识，值都是一样的。然后就可以用下面的代码去区分：总公司和赵六了。

zTree.checkNode(zTree.getNodeByParam("checkId", result.data[i].userId), true);//关键点

下面是数据库的部分表设计

接口去查的数据

通过上面的操作就可以实现，在父节点和子节点id相同时，只勾选赵六的复选框，而不是勾选总公司的复选框。

实现ztree子节点复选框的自动勾选

猜你喜欢