department_list.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorate="~{admin/common/common}">
  5. <head>
  6. <title>组织管理列表</title>
  7. </head>
  8. <body layout:fragment="content">
  9. <nav class="breadcrumb">
  10. <i class="Hui-iconfont">&#xe67f;</i>
  11. 首页 <span class="c-gray en">&gt;</span>
  12. 系统管理 <span class="c-gray en">&gt;</span>
  13. 组织管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
  14. href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
  15. </nav>
  16. <div class="page-container">
  17. <div class="row cl" style="margin-top: 20px;">
  18. <div class="form-label col-xs-6 col-sm-6" style="padding-right: 0;"><input id="dep_search" class="input-text" type="text"/></div>
  19. <div class="form-label col-xs-4 col-sm-2"><button id="dep_btn" class="btn btn-primary radius">搜索</button></div>
  20. </div>
  21. </div>
  22. <form id="myForm" th:action="@{/admin/role}" th:method="get">
  23. <div class="page-container">
  24. <table class="table">
  25. <tr>
  26. <td width="300" class="va-t">
  27. <ul id="tree" class="ztree"></ul>
  28. </td>
  29. <td class="va-t">
  30. <iframe id="detailIframe" Name="detailIframe" frameborder=0 scrolling="auto" width="100%"
  31. height="390px">
  32. 444
  33. </iframe>
  34. </td>
  35. </tr>
  36. </table>
  37. </div>
  38. </form>
  39. <script type="text/javascript" th:inline="javascript">
  40. var obj = "";
  41. var ztreeTid = "";
  42. var setting = {
  43. view: {
  44. addHoverDom: addHoverDom, // 用于当鼠标移动到节点上时,显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用
  45. edit: addHoverDom, // 用于当鼠标移动到节点上时,显示用户自定义控件。务必与 setting.view.removeHoverDom 同时使用
  46. removeHoverDom: removeHoverDom, // 用于当鼠标移出节点时,隐藏用户自定义控件。务必与 addHoverDom 同时使用
  47. dblClickExpand: false,
  48. selectedMulti: false
  49. },
  50. edit: {
  51. enable: true,
  52. editNameSelectAll: true,// 节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。
  53. removeTitle: "删除", // 删除按钮的 Title 辅助信息
  54. renameTitle: "编辑" // 编辑名称按钮的 Title 辅助信息。
  55. },
  56. data: {
  57. simpleData: {
  58. enable: true,
  59. idKey: "id",
  60. pIdKey: "parent_id",
  61. rootPId: ""
  62. }
  63. },
  64. callback: {
  65. beforeRemove: beforeRemove,//点击删除时触发,用来提示用户是否确定删除
  66. beforeEditName: beforeEditName,//编辑结束时触发,用来验证输入的数据是否符合要求
  67. onClick: clickNode,//点击节点触发的事件
  68. beforeDrag: zTreeBeforeDrag
  69. }
  70. };
  71. function zTreeBeforeDrag(treeId,treeNodes) {
  72. return false;
  73. }
  74. $(document).ready(function () {
  75. var zNodes = [[${treeNodeList}]];
  76. $.fn.zTree.init($("#tree"), setting, eval('(' + zNodes + ')'));
  77. // 搜索
  78. $("#dep_btn").on("click",function (id) {
  79. $("li a").removeClass("curSelectedNode");
  80. var searchValue = $("#dep_search").val();
  81. $("#tree ul li").each(function () {
  82. for(var i = 0; i<eval('(' + zNodes + ')').length; i++){
  83. if(searchValue === eval('(' + zNodes + ')')[i].name){
  84. id = eval('(' + zNodes + ')')[i].id;
  85. }
  86. }
  87. if(searchValue === $(this).children("a").attr("title")){
  88. $(this).children("a").addClass("curSelectedNode");
  89. $("#detailIframe").attr("src", pagePath + "/admin/department/detail/" + id);
  90. }
  91. });
  92. $("#dep_search").val('');
  93. });
  94. });
  95. function beforeRemove(treeId, treeNode) {
  96. if (treeNode.isParent) {
  97. errorMessage('请先删除子节点!');
  98. return false;
  99. }
  100. var isDelete = confirm("你确定要删除吗?");
  101. if (isDelete == true) {
  102. $.ajax({
  103. type: "delete",
  104. dataType: "json",
  105. url: pagePath + "/admin/department/delete/" + treeNode.id,
  106. success: function (result) {
  107. if (result.success) {
  108. var sObj = $("#" + treeNode.tId + "");
  109. sObj.remove();
  110. smileMessage( "操作成功");
  111. $("#detailIframe").attr("src","");
  112. location.replace(location.href);
  113. // location.reload();
  114. } else {
  115. errorMessage( result.message);
  116. }
  117. },
  118. error: function () {
  119. errorMessage('系统错误!');
  120. }
  121. });
  122. }
  123. return false
  124. }
  125. function beforeEditName(treeId, treeNode) {
  126. layer_show("编辑节点", pagePath + "/admin/department/edit/" + treeNode.id, "800", "500");
  127. return false;
  128. }
  129. function clickNode(e, treeId, treeNode) {
  130. if (treeNode.id != '0') {
  131. $("#detailIframe").attr("src", pagePath + "/admin/department/detail/" + treeNode.id);
  132. };
  133. }
  134. // 搜索后点击事件
  135. $(document).on("click",".ztree li",function(e){
  136. var _this=$(this);
  137. e.stopPropagation();
  138. $("li a").removeClass("curSelectedNode");
  139. _this.children("a").addClass("curSelectedNode");
  140. });
  141. function addHoverDom(treeId, treeNode) {
  142. var sObj = $("#" + treeNode.tId + "_span");
  143. if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
  144. var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
  145. + "' title='添加' onfocus='this.blur();'></span>";
  146. sObj.after(addStr);
  147. if(treeNode.id == 0){
  148. $("#tree_1_a span").each(function () {
  149. if($(this).attr("title")=="删除" || $(this).attr("title")=="编辑"){
  150. $(this).hide();
  151. }
  152. })
  153. };
  154. obj = treeNode;
  155. ztreeTid = treeNode.tId;
  156. var btn = $("#addBtn_" + treeNode.tId);
  157. if (btn) btn.bind("click", function () {
  158. layer_show("新增节点", pagePath + "/admin/department/add?departmentId=" + treeNode.id, "800", "500");
  159. });
  160. };
  161. // 用于当鼠标移出节点时,隐藏用户自定义控件
  162. function removeHoverDom(treeId, treeNode) {
  163. $("#addBtn_" + treeNode.tId).unbind().remove();
  164. };
  165. //增加节点
  166. function addNode(id, parentId, name) {
  167. var zTree = $.fn.zTree.getZTreeObj("tree");
  168. zTree.addNodes(obj, {id: id, pId: parentId, name: name}); //页面上添加节点
  169. var node = zTree.getNodeByParam("id", id, null); //根据新的id找到新添加的节点
  170. zTree.selectNode(node); //让新添加的节点处于选中状态
  171. }
  172. //更新节点
  173. function updateNode( name) {
  174. $("#"+ztreeTid+"_span").html(name);
  175. }
  176. </script>
  177. </body>
  178. </html>