zTree树形展示，可新增修改删除节点

男娘i 2022-06-05 10:26 329阅读 0赞

效果图：

Center

一、下载zTree插件 地址：http://www.ztree.me

二、html代码

[html] view plain copy

  1. <**link href=”../Scripts/zTree/css/zTreeStyle/zTreeStyle.css” rel=”stylesheet” />**
  2. <**script src=”../Scripts/zTree/js/jquery-1.4.4.min.js”></script**>
  3. <**script src=”../Scripts/zTree/js/jquery.ztree.core-3.5.js”></script**>
  4. <**script src=”../Scripts/zTree/js/jquery.ztree.excheck-3.5.js”></script**>
  5. <**script src=”../Scripts/zTree/js/jquery.ztree.exedit-3.5.js”></script**>
  6. <**script type=”text/javascript”>**
  7. var setting = {
  8. async: {
  9. enable: true,
  10. url: “../AjaxPage/GetAjax.aspx?z=sdfww234edfsd”,
  11. autoParam: [“ID”],
  12. contentType: “application/json”,
  13. type: “get”,
  14. dataFilter: filter
  15. },
  16. view: {
  17. expandSpeed: “”,
  18. addHoverDom: addHoverDom,
  19. removeHoverDom: removeHoverDom,
  20. selectedMulti: false
  21. },
  22. check: {
  23. enable: true
  24. },
  25. edit: {
  26. enable: true
  27. },
  28. data: {
  29. simpleData: {
  30. enable: true
  31. }
  32. },
  33. callback: {
  34. beforeRemove: beforeRemove,
  35. beforeRename: beforeRename,
  36. }
  37. };
  38. function filter(treeId, parentNode, childNodes) {
  39. if (!childNodes) return null;
  40. for (var i = 0, l = childNodes.length; i < l; i++) {
  41. childNodes[i].name = childNodes[i].name.replace(/\.n/g, ‘.’);
  42. }
  43. return childNodes;
  44. }
  45. function beforeRemove(treeId, treeNode) {
  46. var zTree = $.fn.zTree.getZTreeObj(“treeDemo”);
  47. zTree.selectNode(treeNode);
  48. alert(treeNode.Action);//哈哈 出来了
  49. return confirm(“确认删除 节点 — “ + treeNode.name + “ 吗？”);
  50. }
  51. function beforeRename(treeId, treeNode, newName) {
  52. if (newName.length == 0) {
  53. alert(“节点名称不能为空!”);
  54. return false;
  55. }
  56. return true;
  57. }
  59. var newCount = 1;
  60. function addHoverDom(treeId, treeNode) {
  61. var sObj = $(“#“ + treeNode.tId + “_span”);
  62. if (treeNode.editNameFlag || $(“#addBtn_“ + treeNode.tId).length > 0) return;
  63. var addStr = “<span class=’button add’ id=’addBtn_“ + treeNode.tId
    • “‘ title=’add node’ onfocus=’this.blur();’ >**</span>**”;
  65. sObj.after(addStr);
  66. var btn = $(“#addBtn_“ + treeNode.tId);
  67. if (btn) btn.bind(“click”, function () {
  68. var zTree = $.fn.zTree.getZTreeObj(“treeDemo”);
  69. zTree.addNodes(treeNode, { id: (treeNode.id + newCount), parentid: treeNode.id, name: “new node” + (newCount++) });
  70. return false;
  71. });
  72. };
  73. function removeHoverDom(treeId, treeNode) {
  74. $(“#addBtn_“ + treeNode.tId).unbind().remove();
  75. };
  76. $(document).ready(function () {
  77. $.fn.zTree.init($(“#treeDemo”), setting);
  78. });
  79. </**script**>
  80. <**div class=”row”>**
  81. <**div class=”col-lg-12 col-sm-12 col-xs-12 col-xxs-12”>**
  82. <**div class=”panel panel-default”>**
  83. <**div class=”panel-heading”>**
  84. <**h2**>权限菜单管理</**h2**>
  85. <**div class=”panel-actions”>**
  86. <**a href=”MenuManagement.aspx#“ class=”btn-minimize”><i class=”fa fa-chevron-up”></i></a>**
  87. <**a href=”MenuManagement.aspx#“ class=”btn-close”><i class=”fa fa-times”></i></a>**
  88. </**div**>
  89. </**div**>
  90. <**div class=”panel-body”>**
  91. <**div class=”row”>**
  92. <**div class=”col-md-12”>**
  93. <**ul id=”treeDemo” class=”ztree”></ul**>
  94. </**div**>
  95. </**div**>
  96. </**div**>
  97. </**div**>
  98. </**div**>
  99. </**div**>

三、zTreeStyle.css修改添加节点按钮的图片样式

[css] view plain copy

  1. .ztree li span.button.add {
  2. margin-left: 2px;
  3. margin-right: -1px;
  4. background-position: -144px 0;
  5. vertical-align: top;
  6. }

四、后台代码：

[csharp] view plain copy

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (Request.QueryString[“z”] == “sdfww234edfsd”)
  4. {
  5. StringBuilder sb = new StringBuilder();
  6. sb.Append(“[“);
  7. sb.Append(“{\“id\“:\“1\“,\“name\“:\“销售单管理\“,\“pId\“:\“0\“,\“Action\“:\“list\“},”);
  8. sb.Append(“{\“id\“:\“2\“,\“name\“:\“销售单列表\“,\“pId\“:\“1\“,\“Action\“:\“list\“},”);
  9. sb.Append(“]“);
  10. Response.Write(sb.ToString()); }
  11. }

发表评论

表情：
评论列表 （有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ztree+json，渲染树形菜单

    前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树

    清疚清疚/ 0 赞/ 405 阅读

    相关 ztree+json，渲染树形菜单

    前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树

    迷南。迷南。/ 0 赞/ 356 阅读