189 lines
4.8 KiB
HTML
189 lines
4.8 KiB
HTML
<link rel="stylesheet" href="./src/css/ztree/metro/ztree.css">
|
|
<ul id="ztree" class="ztree">
|
|
</ul>
|
|
<script>
|
|
layui.config({
|
|
base: 'src/js/'
|
|
}).use(['ztree', 'layer'], function() {
|
|
var $ = layui.jquery,
|
|
layer = layui.layer;
|
|
|
|
var zNodes = [{
|
|
id: 1,
|
|
pId: 0,
|
|
name: "父节点1",
|
|
open: true
|
|
}, {
|
|
id: 11,
|
|
pId: 1,
|
|
name: "父节点11"
|
|
}, {
|
|
id: 111,
|
|
pId: 11,
|
|
name: "叶子节点111"
|
|
}, {
|
|
id: 112,
|
|
pId: 11,
|
|
name: "叶子节点112"
|
|
}, {
|
|
id: 113,
|
|
pId: 11,
|
|
name: "叶子节点113"
|
|
}, {
|
|
id: 114,
|
|
pId: 11,
|
|
name: "叶子节点114"
|
|
}, {
|
|
id: 12,
|
|
pId: 1,
|
|
name: "父节点12"
|
|
}, {
|
|
id: 121,
|
|
pId: 12,
|
|
name: "叶子节点121"
|
|
}, {
|
|
id: 122,
|
|
pId: 12,
|
|
name: "叶子节点122"
|
|
}, {
|
|
id: 123,
|
|
pId: 12,
|
|
name: "叶子节点123"
|
|
}, {
|
|
id: 124,
|
|
pId: 12,
|
|
name: "叶子节点124"
|
|
}, {
|
|
id: 13,
|
|
pId: 1,
|
|
name: "父节点13",
|
|
isParent: true
|
|
}, {
|
|
id: 2,
|
|
pId: 0,
|
|
name: "父节点2"
|
|
}, {
|
|
id: 21,
|
|
pId: 2,
|
|
name: "父节点21",
|
|
open: true
|
|
}, {
|
|
id: 211,
|
|
pId: 21,
|
|
name: "叶子节点211"
|
|
}, {
|
|
id: 212,
|
|
pId: 21,
|
|
name: "叶子节点212"
|
|
}, {
|
|
id: 213,
|
|
pId: 21,
|
|
name: "叶子节点213"
|
|
}, {
|
|
id: 214,
|
|
pId: 21,
|
|
name: "叶子节点214"
|
|
}, {
|
|
id: 22,
|
|
pId: 2,
|
|
name: "父节点22"
|
|
}, {
|
|
id: 221,
|
|
pId: 22,
|
|
name: "叶子节点221"
|
|
}, {
|
|
id: 222,
|
|
pId: 22,
|
|
name: "叶子节点222"
|
|
}, {
|
|
id: 223,
|
|
pId: 22,
|
|
name: "叶子节点223"
|
|
}, {
|
|
id: 224,
|
|
pId: 22,
|
|
name: "叶子节点224"
|
|
}, {
|
|
id: 23,
|
|
pId: 2,
|
|
name: "父节点23"
|
|
}, {
|
|
id: 231,
|
|
pId: 23,
|
|
name: "叶子节点231"
|
|
}, {
|
|
id: 232,
|
|
pId: 23,
|
|
name: "叶子节点232"
|
|
}, {
|
|
id: 233,
|
|
pId: 23,
|
|
name: "叶子节点233"
|
|
}, {
|
|
id: 234,
|
|
pId: 23,
|
|
name: "叶子节点234"
|
|
}, {
|
|
id: 3,
|
|
pId: 0,
|
|
name: "父节点3",
|
|
isParent: true
|
|
}];
|
|
|
|
var setting = {
|
|
view: {
|
|
addHoverDom: addHoverDom,
|
|
removeHoverDom: removeHoverDom,
|
|
selectedMulti: false
|
|
},
|
|
check: {
|
|
enable: true
|
|
},
|
|
data: {
|
|
simpleData: {
|
|
enable: true
|
|
}
|
|
},
|
|
edit: {
|
|
enable: true
|
|
},
|
|
callback: {
|
|
onClick: function(e, treeId, treeNode) {
|
|
console.log(treeNode);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
$(document).ready(function() {
|
|
$.fn.zTree.init($("#ztree"), setting, zNodes);
|
|
});
|
|
|
|
var newCount = 1;
|
|
|
|
function addHoverDom(treeId, treeNode) {
|
|
var sObj = $("#" + treeNode.tId + "_span");
|
|
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
|
|
return;
|
|
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId +
|
|
"' title='add node' onfocus='this.blur();'></span>";
|
|
sObj.after(addStr);
|
|
var btn = $("#addBtn_" + treeNode.tId);
|
|
if (btn) {
|
|
btn.bind("click", function() {
|
|
var zTree = $.fn.zTree.getZTreeObj("ztree");
|
|
zTree.addNodes(treeNode, {
|
|
id: (100 + newCount),
|
|
pId: treeNode.id,
|
|
name: "new node" + (newCount++)
|
|
});
|
|
return false;
|
|
});
|
|
}
|
|
};
|
|
|
|
function removeHoverDom(treeId, treeNode) {
|
|
$("#addBtn_" + treeNode.tId).unbind().remove();
|
|
};
|
|
});
|
|
</script> |