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

时间:2021-10-15 19:41:29

先上代码。

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

以上。