lazyTreeSelect.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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 treeNodes = [] //缓存树的节点
  35. var leafMapper = {
  36. id: lib.$$utils.getQueryString('idKeyOfLeaf') || 'id',
  37. pId: lib.$$utils.getQueryString('pIdKeyOfLeaf') || 'pId',
  38. name: lib.$$utils.getQueryString('nameKeyOfLeaf') || 'name',
  39. }
  40. var tree, setting = {
  41. view: {
  42. selectedMulti: lib.$$utils.getQueryString('multiple') === 'T',
  43. dblClickExpand: false,
  44. fontCss: function (treeId, treeNode) {
  45. return (!!treeNode.highlight) ? {
  46. color: '#A60000',
  47. 'font-weight': 'bold',
  48. } : {
  49. color: '#333',
  50. 'font-weight': 'normal',
  51. }
  52. },
  53. },
  54. data: {
  55. simpleData: {
  56. enable: true,
  57. },
  58. },
  59. callback: {
  60. onExpand: function (event, treeId, treeNode) {
  61. var load = layer.load(3, {
  62. shade: [0.1, '#fff'],
  63. //0.1透明度的白色背景
  64. })
  65. var url = lib.$$utils.getQueryString('expendURL')
  66. // hack
  67. url = url.startsWith(commonConfig.proxyPath) ? url.substring(commonConfig.proxyPath.length) : url
  68. if (url.indexOf('?') !== -1) {
  69. url += '&'
  70. } else {
  71. url += '?'
  72. }
  73. lib.$$utils.axiosRequest(url, '获取节点', 'GET', {
  74. [lib.$$utils.getQueryString('parentKeyOfLeaf')]: treeNode.id,
  75. }).then(function (result) {
  76. var zNodes = listToNodes(
  77. !!result.list ? result.list
  78. : (!!result.data ? result.data : result), false, leafMapper)
  79. treeNodes.addNodes(zNodes)
  80. addNodesToTree(tree, zNodes)
  81. layer.close(load)
  82. })
  83. },
  84. },
  85. }
  86. $(function () {
  87. //初始化树
  88. var url = lib.$$utils.getQueryString('url')
  89. // hack
  90. url = url.startsWith(commonConfig.proxyPath) ? url.substring(commonConfig.proxyPath.length) : url
  91. var searchUrl = lib.$$utils.getQueryString('searchUrl')
  92. // hack
  93. searchUrl = searchUrl.startsWith(commonConfig.proxyPath) ? searchUrl.substring(commonConfig.proxyPath.length) : searchUrl
  94. lib.$$utils.axiosRequest(url, '获取信息')
  95. .then(function (result) {
  96. var mapper = {
  97. id: lib.$$utils.getQueryString('idKeyOfParent') || 'id',
  98. pId: lib.$$utils.getQueryString('pIdKeyOfParent') || 'pId',
  99. name: lib.$$utils.getQueryString('nameKeyOfParent') || 'name',
  100. }
  101. treeNodes = listToNodes(!!result.list ? result.list
  102. : (!!result.data ? result.data : result), true, mapper)
  103. tree = $.fn.zTree.init($('#tree'), setting, treeNodes)
  104. })
  105. $('#searchBtn').click(
  106. function () {
  107. var keyWord = $('#searchName').val()
  108. if ($.isEmptyObject(keyWord)) {
  109. return
  110. }
  111. if (searchUrl.indexOf('?') !== -1) {
  112. searchUrl += '&'
  113. } else {
  114. searchUrl += '?'
  115. }
  116. lib.$$utils.axiosRequest(searchUrl + '&keyWord=' + keyWord, '查询信息')
  117. .then(function (result) {
  118. var zNodes = listToNodes(
  119. !!result.list ? result.list
  120. : (!!result.data ? result.data : result),
  121. false, leafMapper)
  122. treeNodes.addNodes(zNodes)
  123. tree = $.fn.zTree.init($('#tree'), setting, treeNodes)
  124. })
  125. var nodes = tree.getNodesByParamFuzzy('name', keyWord)
  126. showHighlight(nodes, tree)
  127. })
  128. //设置回车搜索
  129. $('#searchName').keypress(function (e) {
  130. detectEnter(e)
  131. })
  132. })
  133. function detectEnter (event) {
  134. var e = event || window.event
  135. var o = e.target || e.srcElement
  136. var keyCode = e.keyCode || e.which // 按键的keyCode
  137. if (keyCode === 13) {
  138. e.keyCode = 9
  139. e.returnValue = false
  140. $('#searchBtn').click()
  141. }
  142. }
  143. function showHighlight (nodes, tree) {
  144. if (nodes !== null && nodes.length > 0) {
  145. for (var i = 0; i < nodes.length; i++) {
  146. var node = nodes[i]
  147. node.highlight = true
  148. tree.updateNode(node)
  149. tree.expandNode(node.getParentNode(), true)
  150. if (node.isParent) {
  151. tree.expandNode(node, true)
  152. }
  153. }
  154. }
  155. }
  156. function listToNodes (list, isParent, mapper) {
  157. mapper = mapper || {}
  158. var idMapper = mapper.id || 'id'
  159. var pIdMapper = mapper.pId || 'pId'
  160. var nameMapper = mapper.name || 'name'
  161. return list.map(function (item) {
  162. var node
  163. node = {
  164. id: item[idMapper],
  165. pId: item[pIdMapper],
  166. name: item[nameMapper],
  167. isParent: isParent || item.isParent,
  168. }
  169. return node
  170. })
  171. }
  172. //给树增加节点
  173. function addNodesToTree (tree, zNodes) {
  174. for (var i = 0; i < zNodes.length; i++) {
  175. var parentNode = tree.getNodeByParam('id', zNodes[i].pId)
  176. var node = tree.getNodeByParam('id', zNodes[i].id)
  177. if (node === undefined || node === null)
  178. tree.addNodes(parentNode, [zNodes[i]])
  179. }
  180. }
  181. //treeNodes增加节点
  182. Array.prototype.addNodes = function (nodes) {
  183. for (var i = 0; i < nodes.length; i++) {
  184. var flag = false
  185. for (var j = 0; j < this.length; j++) {
  186. if (this[j].id === nodes[i].id) {
  187. flag = true
  188. break
  189. }
  190. }
  191. if (!flag)
  192. this.push(nodes[i])
  193. }
  194. }
  195. </script>
  196. </head>
  197. <body class="pace-done gray-bg">
  198. <div class="container-fluid">
  199. <div class="row">
  200. <div class="col-xs-12">
  201. <div class="input-group">
  202. <input id="searchName" name="单位树" type="text"
  203. class="form-control input-sm"/>
  204. <div class="input-group-btn">
  205. <button type="button" id="searchBtn"
  206. class="btn btn-primary input-sm">
  207. <i class="fa fa-search"></i>
  208. </button>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="row">
  214. <div class="col-xs-12">
  215. <div id="tree" class="ztree" style="padding: 10px 5px;"></div>
  216. </div>
  217. </div>
  218. </div>
  219. </body>
  220. </html>