先上代码。
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();
}
以上。