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

概述先上代码。 var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_span", IDMark_Input = "_input", IDMark_Check = "_check", IDMark_Edit = "

先上代码。

        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:"始终显示控件",children:[                       {ID:21,{ID:22,{ID:23,{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();            }

以上。

@H_403_379@ 总结

以上是内存溢出为你收集整理的ztree : checkbox 选中/不选中时动态添加/删除DOM元素全部内容，希望文章能够帮你解决ztree : checkbox 选中/不选中时动态添加/删除DOM元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。