码迷,mamicode.com
首页 > 其他好文 > 详细

zTree基础

时间:2019-01-04 23:12:05      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:blog   func   init   选择   代码   浏览器   script   cal   ber   

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. }

zTree基础

标签:blog   func   init   选择   代码   浏览器   script   cal   ber   

原文地址:https://www.cnblogs.com/mengmengi/p/10222901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!