multiTreeSelect.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <html>
  2. <head>
  3. <title>数据选择</title>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  5. <meta charset="utf-8"/>
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  8. <link rel="stylesheet" href="/common-assets/plugins/outdated/bootstrap/css/bootstrap.min.css"/>
  9. <link rel="stylesheet" href="/common-assets/css/outdated/style.css"/>
  10. <link rel="stylesheet"
  11. href="/common-assets/plugins/outdated/metisMenu/2.7/metisMenu.min.css"/>
  12. <link rel="stylesheet"
  13. href="/common-assets/plugins/outdated/bootstrap-toastr/2.0.1/toastr.min.css"/>
  14. <link rel="stylesheet" href="/common-assets/plugins/outdated/icheck/custom.css"/>
  15. <script src="/common-assets/js/project.config.js"></script>
  16. <script src="/common-assets/js/direwolf-library.js"></script>
  17. <script src="/common-assets/js/outdated/common.js"></script>
  18. <script src="/common-assets/js/outdated/bootstrap.min.js"></script>
  19. <script src="/common-assets/js/outdated/jquery.form-3.51.0.min.js"></script>
  20. <script src="/common-assets/plugins/outdated/pace/pace.min.js"></script>
  21. <script src="/common-assets/plugins/outdated/slimscroll/jquery.slimscroll.min.js"></script>
  22. <script src="/common-assets/plugins/outdated/bootstrap-toastr/2.0.1/toastr.min.js"></script>
  23. <script src="/common-assets/plugins/outdated/jquery-validation/jquery.validate-1.11.1.min.js"></script>
  24. <script src="/common-assets/plugins/outdated/jquery-validation/localization/messages_zh.js"></script>
  25. <script src="/common-assets/plugins/outdated/icheck/icheck.min.js"></script>
  26. <script src="/common-assets/plugins/outdated/metisMenu/2.7/metisMenu.js"></script>
  27. <script src="/common-assets/js/promise-polyfill.min.js"></script>
  28. <link href="/common-assets/plugins/jquery-ztree/3.5/css/metroStyle/metroStyle.css"
  29. rel="stylesheet"/>
  30. <script src="/common-assets/plugins/jquery-ztree/3.5/js/jquery.ztree.all.min.js"
  31. type="text/javascript"></script>
  32. <script type="text/javascript">
  33. var lib = window.getDirewolfLibrary()
  34. var idKey = lib.$$utils.getQueryString('idKey') || 'id',
  35. pIdKey = lib.$$utils.getQueryString('pIdKey') || 'pId',
  36. name = lib.$$utils.getQueryString('nameKey') || 'name',
  37. checkedIds = lib.$$utils.getQueryString('checkedIds') || sessionStorage.getItem('checkedResList') || '',
  38. url = lib.$$utils.getQueryString('url')
  39. var chkboxType = lib.$$utils.getQueryString('chkboxType')
  40. if (chkboxType === '' || chkboxType == null) {
  41. chkboxType = { 'Y': 'ps', 'N': 'ps' }
  42. } else {
  43. chkboxType = eval('(' + chkboxType + ')')
  44. }
  45. var openNodes = ['0']
  46. var arr_checkedIds = []
  47. var zTreeNodes = []
  48. var tree, setting = {
  49. view: {
  50. selectedMulti: false,
  51. dblClickExpand: false,
  52. fontCss: function (treeId, treeNode) {
  53. return (!!treeNode.highlight) ? {
  54. color: '#A60000',
  55. 'font-weight': 'bold',
  56. } : {
  57. color: '#333',
  58. 'font-weight': 'normal',
  59. }
  60. },
  61. },
  62. check: {
  63. enable: true,
  64. chkStyle: 'checkbox',
  65. nocheck: false,
  66. chkboxType: chkboxType,
  67. },
  68. data: {
  69. simpleData: {
  70. enable: true,
  71. idKey: idKey,
  72. },
  73. },
  74. callback: {
  75. beforeClick: function (id, node) {
  76. tree.checkNode(node, !node.checked, true, true)
  77. return false
  78. },
  79. onCheck: function (event, treeId, treeNode) {
  80. var checkedNodes = tree.getCheckedNodes(true)
  81. var checkedNodeIds = []
  82. for (var i = 0; i < checkedNodes.length; i++) {
  83. /* if(checkedNodes[i].id != "0" && checkedNodes[i].id != "1") //如果不是虚拟出来的两个根节点 */
  84. checkedNodeIds.push(checkedNodes[i].id)
  85. }
  86. arr_checkedIds = checkedNodeIds
  87. },
  88. },
  89. }
  90. $(function () {
  91. //初始化树
  92. if (checkedIds) {
  93. arr_checkedIds = checkedIds.split(',')
  94. }
  95. arr_checkedIds.remove('')
  96. lib.$$utils.axiosRequest(url.startsWith(commonConfig.proxyPath) ? url.substring(commonConfig.proxyPath.length) : url, '获取信息')
  97. .then(function (result) {
  98. var dataList = !!result.list ? result.list : (!!result.data ? result.data : result)
  99. zTreeNodes = dataList.map(function (item) {
  100. return {
  101. id: item[idKey],
  102. pId: item[pIdKey],
  103. name: item[name],
  104. isParent: item.isParent,
  105. open: openNodes.contains(item[idKey]),
  106. }
  107. })
  108. tree = $.fn.zTree.init($('#tree'), setting, zTreeNodes)
  109. for (var i = 0; i < arr_checkedIds.length; i++) {
  110. var node = tree.getNodeByParam('id', arr_checkedIds[i], null)
  111. if (node != null) {
  112. tree.checkNode(node, true, false, false)
  113. if (node.getParentNode() && !node.getParentNode().open) {
  114. tree.expandNode(node.getParentNode(), true)
  115. }
  116. }
  117. }
  118. })
  119. var lastSearchNodes = []
  120. $('#searchBtn').click(function () {
  121. var keyWord = $('#searchName').val()
  122. if ($.isEmptyObject(keyWord)) {
  123. return
  124. }
  125. tree = $.fn.zTree.init($('#tree'), setting, zTreeNodes)
  126. for (var i = 0; i < arr_checkedIds.length; i++) {
  127. var node = tree.getNodeByParam('id', arr_checkedIds[i], null)
  128. if (node != null && (!node.children || node.children.length == 0)) {
  129. tree.checkNode(node, true, true, false)
  130. }
  131. }
  132. var nodes = tree.getNodesByParamFuzzy('name', keyWord)
  133. if (lastSearchNodes !== null && lastSearchNodes.length > 0) {
  134. for (var i = 0; i < lastSearchNodes.length; i++) {
  135. var node = lastSearchNodes[i]
  136. node.highlight = false
  137. tree.updateNode(node)
  138. }
  139. }
  140. lastSearchNodes = nodes
  141. if (nodes !== null && nodes.length > 0) {
  142. for (var i = 0; i < nodes.length; i++) {
  143. var node = nodes[i]
  144. node.highlight = true
  145. tree.updateNode(node)
  146. tree.expandNode(node.getParentNode(), true)
  147. if (node.isParent) {
  148. tree.expandNode(node, true)
  149. }
  150. }
  151. }
  152. })
  153. $('#showSelected').click(function () {
  154. tree = $.fn.zTree.init($('#tree'), setting, zTreeNodes)
  155. for (var i = 0; i < arr_checkedIds.length; i++) {
  156. var node = tree.getNodeByParam('id', arr_checkedIds[i], null)
  157. /* if(node != null && (!node.children || node.children.length == 0)) */ //本来是这样的,由于工作流选用户的功能,该成下面这样,如果之前的代码出问题了,再这里修改
  158. if (node != null) {
  159. tree.checkNode(node, true, true, false)
  160. }
  161. }
  162. var nodes = tree.getCheckedNodes(true)
  163. if (lastSearchNodes !== null && lastSearchNodes.length > 0) {
  164. for (var i = 0; i < lastSearchNodes.length; i++) {
  165. var node = lastSearchNodes[i]
  166. node.highlight = false
  167. tree.updateNode(node)
  168. }
  169. }
  170. lastSearchNodes = nodes
  171. if (nodes !== null && nodes.length > 0) {
  172. for (var i = 0; i < nodes.length; i++) {
  173. var node = nodes[i]
  174. node.highlight = true
  175. tree.updateNode(node)
  176. tree.expandNode(node.getParentNode(), true)
  177. if (node.isParent) {
  178. tree.expandNode(node, true)
  179. }
  180. }
  181. }
  182. })
  183. //设置回车搜索
  184. $('#searchName').keypress(function (e) {
  185. detectEnter(e)
  186. })
  187. //初始化时显示已勾选的item
  188. $('#showSelected').click()
  189. })
  190. function detectEnter (event) {
  191. var e = event || window.event
  192. var o = e.target || e.srcElement
  193. var keyCode = e.keyCode || e.which // 按键的keyCode
  194. if (keyCode == 13) {
  195. e.keyCode = 9
  196. e.returnValue = false
  197. $('#searchBtn').click()
  198. }
  199. }
  200. </script>
  201. </head>
  202. <body class="pace-done gray-bg">
  203. <div class="container-fluid">
  204. <div class="row">
  205. <div class="col-xs-10">
  206. <div class="input-group">
  207. <input id="searchName" name="单位树" type="text"
  208. class="form-control input-sm"/>
  209. <div class="input-group-btn">
  210. <button type="button" id="searchBtn"
  211. class="btn btn-primary input-sm">
  212. <i class="fa fa-search"></i>
  213. </button>
  214. </div>
  215. </div>
  216. </div>
  217. <div class="col-xs-2">
  218. <button type="button" id="showSelected" class="btn btn-primary input-sm pull-right col-md-2">
  219. <i class="fa fa-check-square-o"></i>
  220. </button>
  221. </div>
  222. </div>
  223. <div class="row">
  224. <div class="col-xs-10">
  225. <div id="tree" class="ztree" style="padding: 10px 5px;"></div>
  226. </div>
  227. </div>
  228. </div>
  229. </body>
  230. </html>