zTree基础

zTree使用

zTree 是一个依靠 jQuery 实现的多功能 “树插件”， 而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发。

第一步先导入css及js文件

1. <link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css">
2. <script type="text/javascript" src="zTree/js/jquery.ztree.all.min.js"></script>

第二步在html页面创建ztree Div

1. <div>
2. <ul id="regionZTree" class="ztree"></ul>
3. </div>

第三步初始化ztree

1. var setting = {
2. view: {
3. dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
4. showLine: true,//是否显示节点之间的连线
5. fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
6. selectedMulti: true //设置是否允许同时选中多个节点
7. },
8. check:{
9. //chkboxType: { "Y": "ps", "N": "ps" },
10. chkboxType: { "Y": "", "N": "" },
11. chkStyle: "checkbox",//复选框类型
12. enable: true //每个节点上是否显示 CheckBox
13. },
14. edit:{
15. enable: true,
16. editNameSelectAll: true,
17. showRemoveBtn : true,
18. showRenameBtn : true,
19. removeTitle : "remove",
20. renameTitle : "rename"
21. },
22. data: {
23. simpleData: {//简单数据模式
24. enable:true,
25. idKey: "id",
26. pIdKey: "IPARENTID",
27. rootPId: null
28. }
29. },
30. callback: {
31. beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
32. }
33. };
34. zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree);

下面是ztree操作的效果图

下面是ztree增删改以及选中的代码

1. /**
2. * 添加节点
3. * @param obj
4. */
5. function addZTreeNode(obj) {
6. var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
7. var parentZNode = treeObj.getSelectedNodes(); //获取父节点
8. var newNode = obj;
9. newNode.nodeFlg = 1; // 可以自定义节点标识
10. newNode = treeObj.addNodes(parentZNode[0], newNode,true);
11. }
12. /**
13. * 修改子节点
14. * @param obj
15. */
16. function editZTreeNode(obj) {
17. var zTree = $.fn.zTree.getZTreeObj("regionZTree");
18. var nodes = zTree.getSelectedNodes();
19. for(var i = 0;i<nodes.length;i++)
20. {
21. nodes[i].name = obj;
22. zTree.updateNode(nodes[i]);
23. }
24. }
26. /**
27. * 删除子节点 --选中节点
28. * @param obj
29. */
30. function removeZTreeNodeBySelect() {
31. var zTree = $.fn.zTree.getZTreeObj("regionZTree");
32. var nodes = zTree.getSelectedNodes(); //获取选中节点
33. for (var i=0;i<nodes.length; i++) {
34. zTree.removeNode(nodes[i]);
35. }
36. }
38. /**
39. * 删除子节点 --勾选节点
40. * @param obj
41. */
42. function removeZTreeNodeByChecked() {
43. var zTree = $.fn.zTree.getZTreeObj("regionZTree");
44. var nodes = zTree.getCheckedNodes(true); //获取勾选节点
45. for (var i=0;i<nodes.length; i++) {
46. zTree.removeNode(nodes[i]);
47. }
48. }
50. /**
51. * 根据节点id 批量删除子节点
52. * @param obj
53. */
54. function removeZTreeNodebPi(obj) {
55. var idnodes = obj.split(",");
56. var zTree = $.fn.zTree.getZTreeObj("regionZTree");
57. var nodes = zTree.getSelectedNodes();
58. for (var i=0;i<nodes.length; i++) {
59. var nodes = zTree.getNodeByParam("id", nodes[i]);
60. zTree.removeNode(nodes);
61. }
62. }
63. /**
64. * 选择节点
65. * @param obj
66. */
67. function selectzTreeNode(obj) {
68. var zTree = $.fn.zTree.getZTreeObj("regionZTree");
69. var node = zTree.getNodeByParam("id",obj);
70. if(node!=null) {
71. zTree.selectNode(node, true);//指定选中ID的节点
72. }
73. }