zTree基础

zTree基础,第1张

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. }
  25.  
  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. }
  37.  
  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. }
  49.  
  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. }

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/587181.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存