ztree: dynamically add / remove DOM element when the checkbox is selected / not selected

First the code.

        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";
        
        was setting = {
            check: {
                enable: true,
                chkboxType: { "Y": "", "N": "" }
            },
            callback: {
                onCheck: onCheck
            }
        };

        was zNodes = [
            the above mentioned id {: 1, name: "hover event display control", Open: to true ,
                children:[
                       ID {: . 11, name: "button 1" },
                       ID {: 12 is, name: "button 2" },
                       ID {: 13 is, name: "drop-down box" },
                       ID {: 141 is, name: "Text1" },
                       ID {: 142, name: "Text 2" },
                       the above mentioned id {: 15, name: "Hyperlink" }

                ]},
            the above mentioned id {: 2, name: "Always display controls", Open: to true ,
                children:[
                       ID {: 21 is, name: "button 1" },
                       ID {: 22 is, name: "button 2" },
                       ID {: 23 is, name: "drop-down box" },
                       ID {: 24, name: "Text" },
                       the above mentioned id {: 25, name: "Hyperlink" }
                ]}
         ];

        

        function onCheck (E, treeId, the treeNode) {
             var flagBoolean
             // from a click is not clicking. 1 flagBoolean 
            // from click is not clicking to 2 flagBoolean 
            // not 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)

            in the Var node in = nodes, [have 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);
        });

Talk about how this is achieved.

The first is the pit zTree.getChangeCheckedNodes () method.

API 说:

Acquiring an input frame check node set state is changed (the original data checkedOld comparative). [setting.check.enable valid = true]

Perform this method zTree object.

But the API also said:

If the need to obtain all of the checked state to be changed after each operation node data, checking after each operation, checking the status is changed through all of the node data, let it checkedOld = checked.

Therefore, the need to manually set it checkedOld in the method.

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

In this way, the trigger method, will be only the change check the status of nodes Node object into the collection .

 

Then, we need to record it states: it is from not selected to selected , or from selected to not selected ?

            var flagBoolean
             // never to click 1 Click flagBoolean 
            // from click to click no 2 flagBoolean 
            // not 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
            }

 

Finally, add the other DEMO and destruction in custom code DOM stick around on the line.

            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();
            }

the above.