ztree : checkbox 选中/不选中时动态添加/删除DOM元素

先上代码。

        var IDMark_Switch = "_switch",
        IDMark_Icon = "_ico",
        IDMark_Span = "_span",
        IDMark_Input = "_input",
        IDMark_Check = "_check",
        IDMark_Edit = "_edit",
        IDMark_Remove = "_remove",
        IDMark_Ul = "_ul",
        IDMark_A = "_a";
        
        var setting = {
            check: {
                enable: true,
                chkboxType: { "Y": "", "N": "" }
            },
            callback: {
                onCheck: onCheck
            }
        };

        var zNodes =[
            {id:1, name:"hover事件显示控件", open:true,
                children:[
                       {id:11, name:"按钮1"},
                       {id:12, name:"按钮2"},
                       {id:13, name:"下拉框"},
                       {id:141, name:"文本1"},
                       {id:142, name:"文本2"},
                       {id:15, name:"超链接"}

                ]},
            {id:2, name:"始终显示控件", open:true,
                children:[
                       {id:21, name:"按钮1"},
                       {id:22, name:"按钮2"},
                       {id:23, name:"下拉框"},
                       {id:24, name:"文本"},
                       {id:25, name:"超链接"}
                ]}
         ];

        

        function onCheck(e, treeId, treeNode) {
            var flagBoolean
            // 从没有点击 到 点击 flagBoolean 1
            // 从点击 到 没有点击 flagBoolean 2
            // 都不是 flagBoolean 0

            // console.log(e)
            // console.log(treeId)
            // console.log(treeNode)

            // ?
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            // var node = zTree.getNodeByParam("id",fileSucessdData[0].rid);
            // zTree.selectNode(node);

            var nodes = zTree.getChangeCheckedNodes();

            // console.log(nodes[0])

            for (var n in nodes) {
                if (nodes[n].checked && !nodes[n].checkedOld) {
                    flagBoolean = 1
                } else if (!nodes[n].checked && nodes[n].checkedOld) {
                    flagBoolean = 2
                } else {
                    flagBoolean = 0
                }
                nodes[n].checkedOld = nodes[n].checked
            }

            // console.log(nodes)

            var node = nodes[0]

            

            var aObj = $("#" + node.tId + IDMark_A);

            console.log(aObj)

            if (flagBoolean === 1) {
                if ($("#diyBtn_"+treeNode.id).length>0) return;
                var editStr = "<input id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"'  />";
                aObj.after(editStr);
                var btn = $("#diyBtn_"+treeNode.id);
            } else if (flagBoolean === 2) {
                if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
                $("#diyBtn_"+treeNode.id).unbind().remove();
                $("#diyBtn_space_" +treeNode.id).unbind().remove();
            }
            

            // aObj.click();

            // $("#"+node.tId+"_span").click();
            // end
        }
        
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

讲一下这个是怎么实现的。

首先是 zTree.getChangeCheckedNodes() 方法的坑。

API说：

获取输入框勾选状态被改变的节点集合（与原始数据 checkedOld 对比）。[setting.check.enable = true 时有效]

请通过 zTree 对象执行此方法。

但是API还说：

如果需要获取每次操作后全部被改变勾选状态的节点数据，请在每次勾选操作后，遍历所有被改变勾选状态的节点数据，让其 checkedOld = checked 就可以了。

所以，需要在方法中手动设置一下checkedOld。

            for (var n in nodes) {
                nodes[n].checkedOld = nodes[n].checked
            }

这样，触发方法时，才会是 只有改变check状态的节点对象进入 nodes 集合。

 

然后，我们需要记录一下状态：它是从没选中到选中了，还是从选中了到没选中？

            var flagBoolean
            // 从没有点击 到 点击 flagBoolean 1
            // 从点击 到 没有点击 flagBoolean 2
            // 都不是 flagBoolean 0

            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

            var nodes = zTree.getChangeCheckedNodes();

            for (var n in nodes) {
                if (nodes[n].checked && !nodes[n].checkedOld) {
                    flagBoolean = 1
                } else if (!nodes[n].checked && nodes[n].checkedOld) {
                    flagBoolean = 2
                } else {
                    flagBoolean = 0
                }
                nodes[n].checkedOld = nodes[n].checked
            }

 

最后，把别的DEMO里添加和销毁自定义DOM的 代码粘过来就行了。

            if (flagBoolean === 1) {
                if ($("#diyBtn_"+treeNode.id).length>0) return;
                var editStr = "<input id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"'  />";
                aObj.after(editStr);
                var btn = $("#diyBtn_"+treeNode.id);
            } else if (flagBoolean === 2) {
                if (treeNode.parentTId && treeNode.getParentNode().id!=1) return;
                $("#diyBtn_"+treeNode.id).unbind().remove();
                $("#diyBtn_space_" +treeNode.id).unbind().remove();
            }

以上。