eleTree.js 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291
  1. /**
  2. * @Name: 基于layui的tree重写
  3. * @Author: 李祥
  4. * @License:MIT
  5. * 最近修改时间: 2019/03/20
  6. */
  7. layui.define(["jquery","laytpl"], function (exports) {
  8. var $ = layui.jquery;
  9. var laytpl = layui.laytpl;
  10. var hint = layui.hint();
  11. var MOD_NAME="eleTree";
  12. //外部接口
  13. var eleTree={
  14. //事件监听
  15. on: function(events, callback){
  16. return layui.onevent.call(this, MOD_NAME, events, callback);
  17. },
  18. render: function(options) {
  19. var inst = new Class(options);
  20. return thisTree.call(inst);
  21. }
  22. }
  23. var thisTree=function() {
  24. var _self=this;
  25. var options = _self.config;
  26. // 暴漏外面的方法
  27. return {
  28. // 接收两个参数,1. 节点 key 2. 节点数据的数组
  29. updateKeyChildren: function(key,data) {
  30. if(options.data.length===0) return;
  31. return _self.updateKeyChildren.call(_self,key,data);
  32. },
  33. updateKeySelf: function(key,data) {
  34. if(options.data.length===0) return;
  35. return _self.updateKeySelf.call(_self,key,data);
  36. },
  37. remove: function(key) {
  38. if(options.data.length===0) return;
  39. return _self.remove.call(_self,key);
  40. },
  41. append: function(key,data) {
  42. if(options.data.length===0) return;
  43. return _self.append.call(_self,key,data);
  44. },
  45. insertBefore: function(key,data) {
  46. if(options.data.length===0) return;
  47. return _self.insertBefore.call(_self,key,data);
  48. },
  49. insertAfter: function(key,data) {
  50. if(options.data.length===0) return;
  51. return _self.insertAfter.call(_self,key,data);
  52. },
  53. // 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false
  54. getChecked: function(leafOnly, includeHalfChecked) {
  55. if(options.data.length===0) return;
  56. return _self.getChecked.call(_self,leafOnly, includeHalfChecked);
  57. },
  58. // 接收勾选节点数据的数组
  59. setChecked: function(data,isReset) {
  60. if(options.data.length===0) return;
  61. return _self.setChecked.call(_self,data,isReset);
  62. },
  63. // 取消选中
  64. unCheckNodes: function() {
  65. if(options.data.length===0) return;
  66. return _self.unCheckNodes.call(_self);
  67. },
  68. unCheckArrNodes: function(data) {
  69. if(options.data.length===0) return;
  70. return _self.unCheckArrNodes.call(_self,data);
  71. },
  72. expandAll: function() {
  73. options.elem.children(".eleTree-node").children(".eleTree-node-group").empty();
  74. _self.expandAll.call(_self,options.data,[],1,true);
  75. _self.unCheckNodes(true);
  76. _self.defaultChecked();
  77. _self.checkboxInit();
  78. },
  79. unExpandAll: function() {
  80. return _self.unExpandAll.call(_self);
  81. },
  82. reload: function(options) {
  83. return _self.reload.call(_self,options);
  84. },
  85. search: function(value) {
  86. return _self.search.call(_self,value);
  87. }
  88. }
  89. }
  90. // 模板渲染
  91. var TPL_ELEM=function(options,floor,parentStatus) {
  92. return [
  93. '{{# for(var i=0;i<d.length;i++){ }}',
  94. '<div class="eleTree-node" data-'+options.request.key+'="{{d[i]["'+options.request.key+'"]}}" eletree-floor="'+floor+'" style="display: none;">',
  95. '<div class="eleTree-node-content" style="padding-left: '+(options.indent*floor)+'px;">',
  96. '<span class="eleTree-node-content-icon">',
  97. '<i class="layui-icon layui-icon-triangle-r ',
  98. function() {
  99. if(options.lazy){
  100. var str=[
  101. '{{# if(!d[i]["'+options.request.isLeaf+'"]){ }}',
  102. 'lazy-icon" ></i>',
  103. '{{# }else{ }}',
  104. 'leaf-icon" style="color: transparent;" ></i>',
  105. '{{# } }}'
  106. ].join("");
  107. return str;
  108. }
  109. return ['{{# if(!d[i]["'+options.request.children+'"] || d[i]["'+options.request.children+'"].length===0){ }}',
  110. 'leaf-icon" style="color: transparent;"',
  111. '{{# } }}',
  112. '"></i>'
  113. ].join("");
  114. }(),
  115. '</span>',
  116. function() {
  117. if(options.showCheckbox){
  118. var status="";
  119. if(parentStatus==="1"){
  120. status='"1" checked';
  121. }else if(parentStatus==="2"){
  122. status='"2"';
  123. }else{
  124. status='"0"';
  125. }
  126. return [
  127. '{{# if(d[i]["'+options.request.checked+'"]) { }}',
  128. '<input type="checkbox" name="eleTree-node" lay-ignore eleTree-status="1" checked data-checked class="layui-hide eleTree-hideen ',
  129. '{{# }else{ }}',
  130. '<input type="checkbox" name="eleTree-node" lay-ignore eleTree-status='+status+' class="layui-hide eleTree-hideen ',
  131. '{{# } }}',
  132. '{{# if(d[i]["'+options.request.disabled+'"]) { }}',
  133. 'eleTree-disabled',
  134. '{{# } }}',
  135. '" />'
  136. ].join("");
  137. }
  138. return ''
  139. }(),
  140. '<span class="eleTree-node-content-label">{{d[i]["'+options.request.name+'"]}}</span>',
  141. '</div>',
  142. '<div class="eleTree-node-group">',
  143. '</div>',
  144. '</div>',
  145. '{{# } }}'
  146. ].join("");
  147. }
  148. var TPL_NoText=function() {
  149. return '<h3 class="eleTree-noText" style="text-align: center;height: 30px;line-height: 30px;color: #888;">{{d.emptText}}</h3>';
  150. }
  151. var Class=function(options) {
  152. options.response=$.extend({}, this.config.response, options.response);
  153. options.request=$.extend({}, this.config.request, options.request);
  154. this.config = $.extend({}, this.config, options);
  155. this.prevClickEle=null;
  156. this.nameIndex=1;
  157. this.render();
  158. };
  159. Class.prototype={
  160. constructor: Class,
  161. config: {
  162. elem: "",
  163. data: [],
  164. emptText: "暂无数据", // 内容为空的时候展示的文本
  165. renderAfterExpand: true, // 是否在第一次展开某个树节点后才渲染其子节点
  166. highlightCurrent: false, // 是否高亮当前选中节点,默认值是 false。
  167. defaultExpandAll: false, // 是否默认展开所有节点
  168. expandOnClickNode: true, // 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
  169. checkOnClickNode: false, // 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。
  170. defaultExpandedKeys: [], // 默认展开的节点的 key 的数组
  171. autoExpandParent: true, // 展开子节点的时候是否自动展开父节点
  172. showCheckbox: false, // 节点是否可被选择
  173. checkStrictly: false, // 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false
  174. defaultCheckedKeys: [], // 默认勾选的节点的 key 的数组
  175. accordion: false, // 是否每次只打开一个同级树节点展开(手风琴效果)
  176. indent: 16, // 相邻级节点间的水平缩进,单位为像素
  177. lazy: false, // 是否懒加载子节点,需与 load 方法结合使用
  178. load: function() {}, // 加载子树数据的方法,仅当 lazy 属性为true 时生效
  179. draggable: false, // 是否开启拖拽节点功能
  180. contextmenuList: [], // 启用右键菜单,支持的操作有:"copy","add","edit","remove"
  181. searchNodeMethod: null, // 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏
  182. method: "get",
  183. url: "",
  184. contentType: "",
  185. headers: {},
  186. done: null,
  187. response: {
  188. statusName: "code",
  189. statusCode: 0,
  190. dataName: "data"
  191. },
  192. request: {
  193. name: "label",
  194. key: "id",
  195. children: "children",
  196. disabled: "disabled",
  197. checked: "checked",
  198. isLeaf: "isLeaf"
  199. }
  200. },
  201. render: function() {
  202. if(this.config.indent>30){
  203. this.config.indent=30;
  204. }else if(this.config.indent<10){
  205. this.config.indent=10;
  206. }
  207. var options=this.config;
  208. options.where=options.where || {};
  209. if(!options.elem) return hint.error("缺少elem参数");
  210. options.elem=typeof options.elem === "string" ? $(options.elem) : options.elem;
  211. this.filter=options.elem.attr("lay-filter");
  212. // load加载框
  213. options.elem.append('<div class="eleTree-loadData"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></div>')
  214. // 判断加载方式
  215. if(options.data.length===0){
  216. this.ajaxGetData();
  217. }else{
  218. this.renderData();
  219. }
  220. },
  221. renderData: function() {
  222. var options=this.config;
  223. // 渲染第一层
  224. laytpl(TPL_ELEM(options,0)).render(options.data, function(string){
  225. options.elem.html(string).children().show();
  226. });
  227. // 懒加载 > 展开所有 > 初始展开项 > 初始渲染所有子节点 > 初始选中项 > 每次点击只渲染当前层(默认)
  228. // 判断所有dom是否全部加载
  229. if(!options.lazy){
  230. if(!options.renderAfterExpand || options.defaultExpandAll || options.defaultExpandedKeys.length>0 || options.defaultCheckedKeys.length>0){
  231. this.expandAll(options.data,[],1);
  232. }
  233. }
  234. this.eleTreeEvent();
  235. this.checkboxRender();
  236. this.checkboxEvent();
  237. this.defaultChecked();
  238. this.nodeEvent();
  239. this.rightClickMenu();
  240. if(!options.checkStrictly){
  241. this.checkboxInit();
  242. }
  243. },
  244. ajaxGetData: function() {
  245. var options=this.config;
  246. var _self=this;
  247. if(!options.url) {
  248. laytpl(TPL_NoText()).render(options, function(string){
  249. options.elem.html(string);
  250. });
  251. return;
  252. }
  253. var data = $.extend({}, options.where);
  254. if(options.contentType && options.contentType.indexOf("application/json") == 0){ //提交 json 格式
  255. data = JSON.stringify(data);
  256. }
  257. $.ajax({
  258. type: options.method || 'get'
  259. ,url: options.url
  260. ,contentType: options.contentType
  261. ,data: data
  262. ,dataType: 'json'
  263. ,headers: options.headers || {}
  264. ,success: function(res){
  265. if(res[options.response.statusName] != options.response.statusCode || !res[options.response.dataName]){
  266. hint.error("请检查数据格式是否符合规范");
  267. typeof options.done === 'function' && options.done(res);
  268. return;
  269. }
  270. options.data=res[options.response.dataName];
  271. _self.renderData();
  272. typeof options.done === 'function' && options.done(res);
  273. }
  274. });
  275. },
  276. reload: function(options) {
  277. var _self=this;
  278. if(this.config.data && this.config.data.constructor === Array) this.config.data=[];
  279. this.config = $.extend({}, this.config, options);
  280. $(this.config.elem).off(); // 取消事件绑定,防止多次绑定事件
  281. // reload记录选中的数据
  282. // this.getChecked().forEach(function(val) {
  283. // if($.inArray(val.key,this.config.defaultCheckedKeys)===-1){
  284. // this.config.defaultCheckedKeys.push(val.key);
  285. // }
  286. // },this);
  287. return eleTree.render(this.config)
  288. },
  289. // 下拉
  290. eleTreeEvent: function() {
  291. var _self=this;
  292. var options=this.config;
  293. // 下拉
  294. var expandOnClickNode=options.expandOnClickNode?".eleTree-node-content":".eleTree-node-content>.eleTree-node-content-icon";
  295. options.elem.on("click",expandOnClickNode,function(e) {
  296. e.stopPropagation();
  297. var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
  298. var eleNode=eleTreeNodeContent.parent(".eleTree-node");
  299. var sibNode=eleTreeNodeContent.siblings(".eleTree-node-group");
  300. var el=eleTreeNodeContent.children(".eleTree-node-content-icon").children(".layui-icon");
  301. // 添加active背景
  302. if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
  303. if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
  304. _self.prevClickEle=eleTreeNodeContent;
  305. if(el.hasClass("icon-rotate")){
  306. // 合并
  307. sibNode.children(".eleTree-node:not(.eleTree-search-hide)").hide("fast");
  308. el.removeClass("icon-rotate");
  309. return;
  310. }
  311. if(sibNode.children(".eleTree-node").length===0){
  312. var floor=Number(eleNode.attr("eletree-floor"))+1;
  313. var data=_self.reInitData(eleNode);
  314. var d=data.currentData;
  315. // 是否懒加载
  316. if(options.lazy && el.hasClass("lazy-icon")){
  317. el.removeClass("layui-icon-triangle-r").addClass("layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop");
  318. options.load(d,function(getData) {
  319. d[options.request.children]=getData;
  320. var eletreeStatus=eleTreeNodeContent.children("input.eleTree-hideen").attr("eletree-status");
  321. if(d[options.request.children] && d[options.request.children].length>0){
  322. laytpl(TPL_ELEM(options,floor,eletreeStatus)).render(d[options.request.children], function(string){
  323. sibNode.append(string).children().show("fast");
  324. });
  325. }else{
  326. el.css("color","transparent").addClass("leaf-icon");
  327. }
  328. el.removeClass("lazy-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop").addClass("layui-icon-triangle-r icon-rotate");
  329. _self.checkboxRender();
  330. // 懒加载子元素选择祖父(待写)
  331. })
  332. }else{
  333. var eletreeStatus=eleTreeNodeContent.children("input.eleTree-hideen").attr("eletree-status");
  334. d[options.request.children] && d[options.request.children].length>0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render(d[options.request.children], function(string){
  335. sibNode.append(string);
  336. });
  337. // 选择祖父
  338. var eleNode1=sibNode.children(".eleTree-node").eq(0);
  339. if(eleNode1.length===0){
  340. _self.checkboxRender();
  341. return;
  342. }
  343. var siblingNode1=eleNode1.siblings(".eleTree-node");
  344. var item1=eleNode1.children(".eleTree-node-content").children(".eleTree-hideen").get(0);
  345. _self.selectParents(item1,eleNode1,siblingNode1);
  346. _self.checkboxRender();
  347. }
  348. }
  349. // 显示隐藏没有搜索类的
  350. sibNode.children(".eleTree-node:not(.eleTree-search-hide)").show("fast");
  351. el.addClass("icon-rotate");
  352. // 手风琴效果
  353. if(options.accordion){
  354. var node=eleTreeNodeContent.parent(".eleTree-node").siblings(".eleTree-node");
  355. node.children(".eleTree-node-group").children(".eleTree-node:not(.eleTree-search-hide)").hide("fast");
  356. node.children(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").removeClass("icon-rotate");
  357. }
  358. })
  359. },
  360. // checkbox选中
  361. checkboxEvent: function() {
  362. var options=this.config;
  363. var _self=this;
  364. var checkOnClickNode=options.checkOnClickNode?".eleTree-node-content":".eleTree-checkbox";
  365. // input添加属性eleTree-status:即input的三种状态,"0":未选中,"1":选中,"2":子孙部分选中
  366. options.elem.on("click",checkOnClickNode,function(e,type) {
  367. e.stopPropagation();
  368. var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
  369. var checkbox=eleTreeNodeContent.children(".eleTree-checkbox");
  370. if(checkbox.hasClass("eleTree-checkbox-disabled")) return;
  371. // 获取点击所在数据
  372. var node=eleTreeNodeContent.parent(".eleTree-node");
  373. // var d=_self.reInitData(node).currentData;
  374. // 实际的input
  375. var inp=checkbox.siblings(".eleTree-hideen").get(0);
  376. var childNode=eleTreeNodeContent.siblings(".eleTree-node-group").find("input[name='eleTree-node']");
  377. // 添加active背景
  378. if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
  379. if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
  380. _self.prevClickEle=eleTreeNodeContent;
  381. if(!inp){
  382. return;
  383. }
  384. if(inp.checked){
  385. // 反选自身
  386. $(inp).prop("checked",false).attr("eleTree-status","0");
  387. // 点击祖父层选中子孙层
  388. if(!options.checkStrictly){
  389. childNode.prop("checked",false);
  390. childNode.attr("eleTree-status","0");
  391. }
  392. }else{
  393. // 反选自身
  394. $(inp).prop("checked",true).attr("eleTree-status","1");
  395. // 点击祖父层选中子孙层
  396. if(!options.checkStrictly){
  397. childNode.prop("checked",true).attr("eleTree-status","1");
  398. }
  399. }
  400. var eleNode=eleTreeNodeContent.parent(".eleTree-node");
  401. // 点击子孙层选中祖父层(递归)
  402. if(!options.checkStrictly){
  403. var siblingNode=eleNode.siblings(".eleTree-node");
  404. // 点击子孙层选中祖父层(递归)
  405. _self.selectParents(inp,eleNode,siblingNode);
  406. }
  407. _self.checkboxRender();
  408. if(type==="default") return;
  409. layui.event.call(inp, MOD_NAME, 'nodeChecked('+ _self.filter +')', {
  410. node: eleNode,
  411. data: _self.reInitData(eleNode),
  412. isChecked: inp.checked
  413. });
  414. })
  415. },
  416. // 对后台数据有 checked:true 的默认选中项渲染父子层
  417. checkboxInit: function() {
  418. var options=this.config;
  419. var _self=this;
  420. options.elem.find("input[data-checked]").each(function(index,item) {
  421. var checkboxEl=$(item).siblings(".eleTree-checkbox");
  422. var childNode=checkboxEl.parent(".eleTree-node-content").siblings(".eleTree-node-group").find("input[name='eleTree-node']");
  423. // 选择当前
  424. $(item).prop("checked","checked").attr("eleTree-status","1");
  425. checkboxEl.addClass("eleTree-checkbox-checked");
  426. checkboxEl.children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
  427. // 选择子孙
  428. childNode.prop("checked","checked").attr("eleTree-status","1");
  429. childNode.siblings(".eleTree-checkbox").addClass("eleTree-checkbox-checked");
  430. childNode.siblings(".eleTree-checkbox").children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
  431. // 选择祖父
  432. var eleNode=checkboxEl.parent(".eleTree-node-content").parent(".eleTree-node");
  433. var siblingNode=eleNode.siblings(".eleTree-node");
  434. _self.selectParents(item,eleNode,siblingNode);
  435. })
  436. _self.checkboxRender();
  437. },
  438. // 通过子元素选中祖父元素
  439. selectParents: function(inp,eleNode,siblingNode) {
  440. // inp: 实际input(dom元素)
  441. // eleNode: input父层类(.eleTree-node)
  442. // siblingNode: 父层同级兄弟
  443. while (Number(eleNode.attr("eletree-floor"))!==0) {
  444. // 同级input状态存入数组
  445. var arr=[];
  446. arr.push($(inp).attr("eleTree-status"));
  447. siblingNode.each(function(index,item) {
  448. var siblingIsChecked=$(item).children(".eleTree-node-content").children("input[name='eleTree-node']").attr("eleTree-status");
  449. arr.push(siblingIsChecked);
  450. })
  451. // 父元素的实际input
  452. var parentInput=eleNode.parent(".eleTree-node-group").siblings(".eleTree-node-content").children("input[name='eleTree-node']");
  453. // 父元素的checkbox替代
  454. var parentCheckbox=parentInput.siblings(".eleTree-checkbox");
  455. // 子都选中则选中父
  456. if(arr.every(function(val) {
  457. return val==="1";
  458. })){
  459. parentInput.prop("checked",true).attr("eleTree-status","1");
  460. }
  461. // 子有一个未选中则checkbox第三种状态
  462. if(arr.some(function(val) {
  463. return val==="0" || val==="2";
  464. })){
  465. parentInput.attr("eleTree-status","2");
  466. }
  467. // 子全部未选中则取消父选中(并且取消第三种状态)
  468. if(arr.every(function(val) {
  469. return val==="0";
  470. })){
  471. parentInput.prop("checked",false);
  472. parentInput.attr("eleTree-status","0");
  473. }
  474. var parentNode=eleNode.parents("[eletree-floor='"+(Number(eleNode.attr("eletree-floor"))-1)+"']");
  475. var parentCheckbox=parentNode.children(".eleTree-node-content").children("input[name='eleTree-node']").get(0);
  476. var parentSiblingNode=parentNode.siblings(".eleTree-node");
  477. eleNode=parentNode;
  478. inp=parentCheckbox;
  479. siblingNode=parentSiblingNode;
  480. }
  481. },
  482. // 初始展开所有
  483. expandAll: function(data,arr,floor,isMethodsExpandAll) {
  484. var options=this.config;
  485. var _self=this;
  486. data.forEach(function(val,index) {
  487. arr.push(index);
  488. if(val[options.request.children] && val[options.request.children].length>0){
  489. var el=options.elem.children(".eleTree-node").eq(arr[0]).children(".eleTree-node-group");
  490. for(var i=1;i<arr.length;i++){
  491. el=el.children(".eleTree-node").eq(arr[i]).children(".eleTree-node-group");
  492. }
  493. laytpl(TPL_ELEM(options,floor)).render(val[options.request.children], function(string){
  494. el.append(string);
  495. // 判断是否展开所有
  496. if(options.defaultExpandAll || isMethodsExpandAll){
  497. el.siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
  498. el.children().show();
  499. }else if(options.defaultExpandedKeys.length>0) {
  500. // 继续展开祖父层
  501. var f=function(eleP) {
  502. if(options.autoExpandParent){
  503. eleP.parents(".eleTree-node").each(function(i,item) {
  504. if($(item).attr("data-"+options.request.key)){
  505. $(item).children(".eleTree-node-group").siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
  506. $(item).children(".eleTree-node-group").children().show();
  507. }
  508. })
  509. }
  510. }
  511. // 展开指定id项
  512. var id=el.parent(".eleTree-node").attr("data-"+options.request.key);
  513. id=isNaN(id) ? id : Number(id);
  514. if($.inArray(id,options.defaultExpandedKeys)!==-1){
  515. // 直接展开子节点
  516. el.siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").addClass("icon-rotate");
  517. el.children().show();
  518. // 展开子项是否继续展开祖父项
  519. f(el.parent(".eleTree-node[data-"+options.request.key+"]"));
  520. }else{
  521. // 如当前节点的子节点有展开项,则展开当前子节点的祖父层
  522. el.children(".eleTree-node").each(function(index, item) {
  523. var id=$(item).attr("data-"+options.request.key);
  524. id=isNaN(id) ? id : Number(id);
  525. if($.inArray(id,options.defaultExpandedKeys)!==-1){
  526. f($(item));
  527. return false;
  528. }
  529. })
  530. }
  531. }
  532. });
  533. floor++;
  534. _self.expandAll(val[options.request.children],arr,floor,isMethodsExpandAll);
  535. floor--;
  536. }
  537. // 重置数组索引
  538. arr.pop();
  539. })
  540. },
  541. // 初始默认选中
  542. defaultChecked: function() {
  543. var options=this.config;
  544. if(options.defaultCheckedKeys.length===0){
  545. return false;
  546. }
  547. // 判断是否父子无关
  548. if(options.checkStrictly){
  549. options.defaultCheckedKeys.forEach(function(val,index) {
  550. var nodeContent=options.elem.find("[data-"+options.request.key+"='"+val+"']").children(".eleTree-node-content");
  551. // 如果当前没选中则选中
  552. if(nodeContent.children(".eleTree-hideen").prop("checked")===false){
  553. nodeContent.children(".eleTree-checkbox").trigger("click",["default"]);
  554. }
  555. })
  556. return false;
  557. }
  558. // 父元素优先
  559. var arr=$.extend([],options.defaultCheckedKeys);
  560. options.defaultCheckedKeys.forEach(function(val,index) {
  561. options.elem.find("[data-"+options.request.key+"='"+val+"']").find("[data-"+options.request.key+"]").each(function(i,item) {
  562. var id=$(item).attr("data-"+options.request.key);
  563. id=isNaN(id) ? id : Number(id);
  564. var isInArrayIndex=$.inArray(id,arr);
  565. if(isInArrayIndex!==-1){
  566. arr.splice(isInArrayIndex,1);
  567. }
  568. })
  569. })
  570. arr.forEach(function(val,index) {
  571. var nodeContent=options.elem.find("[data-"+options.request.key+"='"+val+"']").children(".eleTree-node-content");
  572. // 如果当前没选中则选中
  573. if(nodeContent.children(".eleTree-hideen").prop("checked")===false){
  574. nodeContent.children(".eleTree-checkbox").trigger("click",["default"]);
  575. }
  576. })
  577. },
  578. // 自定义checkbox解析
  579. checkboxRender: function() {
  580. var options=this.config;
  581. options.elem.find(".eleTree-checkbox").remove();
  582. options.elem.find("input.eleTree-hideen[type=checkbox]").each(function(index,item){
  583. if($(item).hasClass("eleTree-disabled")){
  584. $(item).after('<div class="eleTree-checkbox eleTree-checkbox-disabled"><i class="layui-icon"></i></div>');
  585. }else{
  586. $(item).after('<div class="eleTree-checkbox"><i class="layui-icon"></i></div>');
  587. }
  588. var checkbox=$(item).siblings(".eleTree-checkbox");
  589. if($(item).attr("eletree-status")==="1"){
  590. checkbox.addClass("eleTree-checkbox-checked");
  591. checkbox.children("i").addClass("layui-icon-ok").removeClass("eleTree-checkbox-line");
  592. }else if($(item).attr("eletree-status")==="0"){
  593. checkbox.removeClass("eleTree-checkbox-checked");
  594. checkbox.children("i").removeClass("layui-icon-ok eleTree-checkbox-line");
  595. }else if($(item).attr("eletree-status")==="2"){
  596. checkbox.addClass("eleTree-checkbox-checked");
  597. checkbox.children("i").removeClass("layui-icon-ok").addClass("eleTree-checkbox-line");
  598. }
  599. })
  600. },
  601. // 通过dom节点找对应数据
  602. reInitData: function(node) {
  603. var options=this.config;
  604. var i=node.index();
  605. var floor=Number(node.attr("eletree-floor"));
  606. var arr=[]; // 节点对应的index
  607. while (floor>=0) {
  608. arr.push(i);
  609. floor=floor-1;
  610. node=node.parents("[eletree-floor='"+floor+"']");
  611. i=node.index();
  612. }
  613. arr=arr.reverse();
  614. var oData=this.config.data;
  615. // 当前节点的父节点数据
  616. var parentData=oData[arr[0]];
  617. // 当前节点的data数据
  618. var d = oData[arr[0]];
  619. for(var i = 1; i<arr.length; i++){
  620. d = d[options.request.children]?d[options.request.children][arr[i]]:d;
  621. }
  622. for(var i = 1; i<arr.length-1; i++){
  623. parentData = parentData[options.request.children]?parentData[options.request.children][arr[i]]:parentData;
  624. }
  625. return {
  626. currentData: d,
  627. parentData: {
  628. data: parentData,
  629. childIndex: arr[arr.length-1]
  630. },
  631. index: arr
  632. }
  633. },
  634. // 通过key查找数据
  635. keySearchToOpera: function(key,callback) {
  636. var options=this.config;
  637. var _self=this;
  638. // 查找数据
  639. var fn=function(data) {
  640. var obj={
  641. i: 0,
  642. len: data.length
  643. }
  644. for(;obj.i<obj.len;obj.i++){
  645. if(data[obj.i][options.request.key]!==key){
  646. if(data[obj.i][options.request.children] && data[obj.i][options.request.children].length>0){
  647. fn(data[obj.i][options.request.children]);
  648. }
  649. }else{
  650. callback(data,obj);
  651. }
  652. }
  653. }
  654. fn(options.data);
  655. },
  656. updateKeyChildren: function(key,data) {
  657. var options=this.config;
  658. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']");
  659. var floor=Number(node.attr("eletree-floor"))+1;
  660. var _self=this;
  661. this.keySearchToOpera(key,function(d,obj) {
  662. // 数据更新
  663. d[obj.i][options.request.children]=data;
  664. // dom更新
  665. node.length!==0 && laytpl(TPL_ELEM(options,floor)).render(data, function(string){
  666. $(node).children(".eleTree-node-group").empty().append(string);
  667. options.defaultExpandAll && $(node).children(".eleTree-node-group").children().show();
  668. });
  669. _self.unCheckNodes(true);
  670. _self.defaultChecked();
  671. _self.checkboxInit();
  672. });
  673. },
  674. updateKeySelf: function(key,data) {
  675. var options=this.config;
  676. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']").children(".eleTree-node-content");
  677. var floor=Number(node.attr("eletree-floor"))+1;
  678. data[options.request.name] && node.children(".eleTree-node-content-label").text(data[options.request.name]);
  679. data[options.request.disabled] && node.children(".eleTree-hideen").addClass("eleTree-disabled")
  680. .siblings(".eleTree-checkbox").addClass("eleTree-checkbox-disabled");
  681. // 数据更新
  682. var getData=this.keySearchToOpera(key,function(d,obj) {
  683. data[options.request.key]=d[obj.i][options.request.key];
  684. data[options.request.children]=d[obj.i][options.request.children];
  685. d[obj.i]=$.extend({},d[obj.i],data);
  686. console.log(options.data);
  687. });
  688. },
  689. remove: function(key) {
  690. var options=this.config;
  691. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']");
  692. var pElem=node.parent(".eleTree-node-group");
  693. // 数据删除
  694. this.keySearchToOpera(key,function(data,obj) {
  695. data.splice(obj.i,1);
  696. obj.i--;
  697. obj.len--;
  698. node.length!==0 && options.elem.find("[data-"+options.request.key+"='"+key+"']").remove();
  699. if(pElem.children(".eleTree-node").length===0){
  700. pElem.siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon").css("color", "transparent");
  701. }
  702. });
  703. this.unCheckNodes(true);
  704. this.defaultChecked();
  705. this.checkboxInit();
  706. },
  707. append: function(key,data) {
  708. var options=this.config;
  709. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']");
  710. var floor=Number(node.attr("eletree-floor"))+1;
  711. // 数据更新
  712. this.keySearchToOpera(key,function(d,obj) {
  713. if(d[obj.i][options.request.children]){
  714. d[obj.i][options.request.children].push(data);
  715. }else{
  716. d[obj.i][options.request.children]=[data];
  717. }
  718. var arr=d[obj.i][options.request.children];
  719. // 添加之后长度为1,则原来没有三角,添加三角
  720. if(arr.length===1){
  721. node.children(".eleTree-node-content").find(".eleTree-node-content-icon .layui-icon").removeAttr("style").addClass("icon-rotate");
  722. }
  723. var len=arr.length;
  724. var eletreeStatus=node.children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
  725. eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
  726. node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([arr[len-1]], function(string){
  727. node.children(".eleTree-node-group").append(string).children().show();
  728. });
  729. });
  730. this.checkboxRender();
  731. },
  732. insertBefore: function(key,data) {
  733. var options=this.config;
  734. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']");
  735. var floor=Number(node.attr("eletree-floor"));
  736. // 数据更新
  737. this.keySearchToOpera(key,function(d,obj) {
  738. d.splice(obj.i,0,data);
  739. obj.i++;
  740. obj.len++;
  741. var eletreeStatus=node.parent(".eleTree-node-group").length===0 ? "0" : node.parent(".eleTree-node-group").parent(".eleTree-node")
  742. .children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
  743. eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
  744. node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([data], function(string){
  745. node.before(string).prev(".eleTree-node").show();
  746. });
  747. });
  748. this.checkboxRender();
  749. },
  750. insertAfter: function(key,data) {
  751. var options=this.config;
  752. var node=options.elem.find("[data-"+options.request.key+"='"+key+"']");
  753. var floor=Number(node.attr("eletree-floor"));
  754. // 数据更新
  755. this.keySearchToOpera(key,function(d,obj) {
  756. d.splice(obj.i+1,0,data);
  757. obj.i++;
  758. obj.len++;
  759. var eletreeStatus=node.parent(".eleTree-node-group").length===0 ? "0" : node.parent(".eleTree-node-group").parent(".eleTree-node")
  760. .children(".eleTree-node-content").children("input.eleTree-hideen").attr("eletree-status");
  761. eletreeStatus=eletreeStatus==="2" ? "0" : eletreeStatus;
  762. node.length!==0 && laytpl(TPL_ELEM(options,floor,eletreeStatus)).render([data], function(string){
  763. $(node).after(string).next(".eleTree-node").show();
  764. });
  765. });
  766. this.checkboxRender();
  767. // if(!options.lazy){
  768. // if(!options.renderAfterExpand || options.defaultExpandAll || options.defaultExpandedKeys.length>0){
  769. // this.expandAll(options.data,[],1);
  770. // }
  771. // }
  772. },
  773. getChecked: function(leafOnly, includeHalfChecked) {
  774. var options=this.config
  775. ,el
  776. ,arr=[];
  777. leafOnly=leafOnly || false;
  778. includeHalfChecked=includeHalfChecked || false;
  779. if(leafOnly){
  780. el=options.elem.find(".layui-icon.leaf-icon").parent(".eleTree-node-content-icon")
  781. .siblings("input.eleTree-hideen[eletree-status='1']");
  782. }else if(includeHalfChecked){
  783. el=options.elem.find("input.eleTree-hideen[eletree-status='1'],input.eleTree-hideen[eletree-status='2']");
  784. }else{
  785. el=options.elem.find("input.eleTree-hideen[eletree-status='1']");
  786. }
  787. el.each(function(index,item) {
  788. var obj={};
  789. var id=$(item).parent(".eleTree-node-content").parent(".eleTree-node").attr("data-"+options.request.key);
  790. id=isNaN(id) ? id : Number(id);
  791. var label=$(item).siblings(".eleTree-node-content-label").text();
  792. obj[options.request.key]=id;
  793. obj[options.request.name]=label;
  794. obj.elem=item;
  795. obj.othis=$(item).siblings(".eleTree-checkbox").get(0)
  796. arr.push(obj);
  797. })
  798. return arr;
  799. },
  800. setChecked: function(arr,isReset) {
  801. var options=this.config;
  802. isReset=isReset || false;
  803. if(isReset){
  804. this.unCheckNodes();
  805. options.defaultCheckedKeys=$.extend([],arr);
  806. }else{
  807. this.unCheckNodes(true);
  808. arr.forEach(function(val) {
  809. if($.inArray(val,options.defaultCheckedKeys)===-1){
  810. options.defaultCheckedKeys.push(val);
  811. }
  812. })
  813. }
  814. this.defaultChecked();
  815. this.checkboxInit();
  816. },
  817. unCheckNodes: function(_internal) {
  818. _internal=_internal || false; // _internal: 是否内部调用
  819. var options=this.config;
  820. options.elem.find("input.eleTree-hideen[eletree-status='1'],input.eleTree-hideen[eletree-status='2']").each(function(index,item) {
  821. $(item).attr("eletree-status","0").prop("checked",false);
  822. // 如果外部的取消选中,则所有的记录全部取消
  823. if(!_internal){
  824. $(item).removeAttr("data-checked");
  825. }
  826. });
  827. this.checkboxRender();
  828. },
  829. unCheckArrNodes: function(arr) {
  830. var options=this.config;
  831. arr.forEach(function(val,index) {
  832. var inp=options.elem.find(".eleTree-node[data-"+options.request.key+"='"+val+"']").children(".eleTree-node-content").children(".eleTree-hideen[eletree-status='1'],.eleTree-hideen[eletree-status='2']")
  833. if(inp.length>0){
  834. inp.prop("checked",true).removeAttr("data-checked").siblings(".eleTree-checkbox").trigger("click");
  835. }
  836. })
  837. },
  838. unExpandAll: function() {
  839. var options=this.config;
  840. options.elem.find(".layui-icon.icon-rotate").removeClass("icon-rotate")
  841. .parent(".eleTree-node-content-icon").parent(".eleTree-node-content")
  842. .siblings(".eleTree-node-group").children(".eleTree-node").hide();
  843. },
  844. // 节点事件
  845. nodeEvent: function() {
  846. var _self=this;
  847. var options=this.config;
  848. // 节点被点击的回调事件
  849. options.elem.on("click",".eleTree-node-content",function(e) {
  850. var eleNode=$(this).parent(".eleTree-node");
  851. $("#tree-menu").hide().remove();
  852. layui.event.call(eleNode, MOD_NAME, 'nodeClick('+ _self.filter +')', {
  853. node: eleNode,
  854. data: _self.reInitData(eleNode),
  855. event: e
  856. });
  857. })
  858. // 节点右键的回调事件
  859. options.elem.on("contextmenu",".eleTree-node-content",function(e) {
  860. var eleNode=$(this).parent(".eleTree-node");
  861. layui.event.call(eleNode, MOD_NAME, 'nodeContextmenu('+ _self.filter +')', {
  862. node: eleNode,
  863. data: _self.reInitData(eleNode),
  864. event: e
  865. });
  866. })
  867. // 节点被拖拽的回调事件
  868. options.draggable && options.elem.on("mousedown",".eleTree-node-content",function(e) {
  869. var time=0;
  870. var eleNode=$(this).parent(".eleTree-node");
  871. var eleFloor=Number(eleNode.attr("eletree-floor"));
  872. var groupNode=eleNode.parent(".eleTree-node-group");
  873. e.stopPropagation();
  874. options.elem.css("user-select","none");
  875. var cloneNode=eleNode.clone(true);
  876. var temNode=eleNode.clone(true);
  877. var x=e.clientX-options.elem.offset().left;
  878. var y=e.clientY-options.elem.offset().top;
  879. options.elem.append(cloneNode);
  880. cloneNode.css({
  881. "display": "none",
  882. "opacity": 0.7,
  883. "position": "absolute",
  884. "background-color": "#f5f5f5",
  885. "width": "100%"
  886. })
  887. var currentData=_self.reInitData(eleNode);
  888. var isStop=false;
  889. $(document).on("mousemove",function(e) {
  890. // t为了区别click事件
  891. time++;
  892. if(time>2){
  893. var xx=e.clientX-options.elem.offset().left+10;
  894. var yy=e.clientY-options.elem.offset().top+$(document).scrollTop()-5; // 加上浏览器滚动高度
  895. cloneNode.css({
  896. display: "block",
  897. left: xx+"px",
  898. top: yy+"px"
  899. })
  900. }
  901. }).on("mouseup",function(e) {
  902. $(document).off("mousemove").off("mouseup");
  903. var target=$(e.target).parents(".eleTree-node").eq(0);
  904. cloneNode.remove();
  905. options.elem.css("user-select","auto");
  906. // 当前点击的是否时最外层
  907. var isCurrentOuterMost=eleNode.parent().get(0).isEqualNode(options.elem.get(0))
  908. // 目标是否时最外层
  909. var isTargetOuterMost=$(e.target).get(0).isEqualNode(options.elem.get(0))
  910. if(isTargetOuterMost){
  911. target=options.elem;
  912. }
  913. // 判断是否超出边界
  914. if(target.parents(options.elem).length===0 && !isTargetOuterMost){
  915. return;
  916. }
  917. // 判断初始与结束是否是同一个节点
  918. if(target.get(0).isEqualNode(eleNode.get(0))){
  919. return;
  920. }
  921. // 判断是否是父节点放到子节点
  922. var tFloor=target.attr("eletree-floor");
  923. var isInChild=false;
  924. eleNode.find("[eletree-floor='"+tFloor+"']").each(function() {
  925. if(this.isEqualNode(target.get(0))){
  926. isInChild=true;
  927. }
  928. })
  929. if(isInChild){
  930. return;
  931. }
  932. var targetData=_self.reInitData(target);
  933. layui.event.call(target, MOD_NAME, 'nodeDrag('+ _self.filter +')', {
  934. current: {
  935. node: eleNode,
  936. data: currentData
  937. },
  938. target: {
  939. node: target,
  940. data: targetData
  941. },
  942. stop: function() {
  943. isStop=true;
  944. }
  945. });
  946. // 拖拽是否取消
  947. if(isStop){
  948. return false;
  949. }
  950. // 数据更改
  951. var currList=currentData.parentData.data[options.request.children]
  952. var currIndex=currentData.parentData.childIndex
  953. var currData=currentData.currentData;
  954. var tarData=targetData.currentData;
  955. // 当前是否是最外层
  956. isCurrentOuterMost ? options.data.splice(currIndex,1) : currList.splice(currIndex,1)
  957. // 目标是否是最外层
  958. isTargetOuterMost ? options.data.push(currData) : (function() {
  959. !tarData[options.request.children] ? tarData[options.request.children]=[] : "";
  960. tarData[options.request.children].push(currData);
  961. })()
  962. // dom互换
  963. eleNode.remove();
  964. // 最外层判断
  965. if(isTargetOuterMost){
  966. target.append(temNode);
  967. var floor=0;
  968. }else{
  969. target.children(".eleTree-node-group").append(temNode);
  970. var floor=Number(target.attr("eletree-floor"))+1;
  971. }
  972. // 加floor和padding
  973. temNode.attr("eletree-floor",String(floor));
  974. temNode.children(".eleTree-node-content").css("padding-left",floor*options.indent+"px");
  975. // 通过floor差值计算子元素的floor
  976. var countFloor=eleFloor-floor;
  977. temNode.find(".eleTree-node").each(function(index,item) {
  978. var f=Number($(item).attr("eletree-floor"))-countFloor;
  979. $(item).attr("eletree-floor",String(f));
  980. $(item).children(".eleTree-node-content").css("padding-left",f*options.indent+"px");
  981. })
  982. // 原dom去三角
  983. var leaf=groupNode.children(".eleTree-node").length===0;
  984. leaf && groupNode.siblings(".eleTree-node-content")
  985. .children(".eleTree-node-content-icon").children(".layui-icon")
  986. .removeClass("icon-rotate").css("color","transparent");
  987. // 当前的增加三角
  988. var cLeaf=target.children(".eleTree-node-group").children(".eleTree-node").length===0;
  989. !cLeaf && target.children(".eleTree-node-content")
  990. .children(".eleTree-node-content-icon").children(".layui-icon")
  991. .addClass("icon-rotate").removeAttr("style");
  992. _self.unCheckNodes(true);
  993. _self.defaultChecked();
  994. _self.checkboxInit();
  995. })
  996. })
  997. },
  998. rightClickMenu: function() {
  999. var _self=this;
  1000. var options=this.config;
  1001. if(options.contextmenuList.length<=0){
  1002. return;
  1003. }
  1004. $(document).on("click",function() {
  1005. $("#tree-menu").hide().remove();
  1006. });
  1007. var menuStr=['<ul id="tree-menu">'
  1008. ,$.inArray("copy",options.contextmenuList)!==-1?'<li class="copy"><a href="javascript:;">复制</a></li>':''
  1009. ,($.inArray("add",options.contextmenuList)!==-1 || $.inArray("add.async",options.contextmenuList)!==-1)?'<li class="add"><a href="javascript:;">新增</a></li>'+
  1010. '<li class="insertBefore"><a href="javascript:;">插入节点前</a></li>'+
  1011. '<li class="insertAfter"><a href="javascript:;">插入节点后</a></li>'+
  1012. '<li class="append"><a href="javascript:;">插入子节点</a></li>' : ""
  1013. ,($.inArray("edit",options.contextmenuList)!==-1 || $.inArray("edit.async",options.contextmenuList)!==-1)?'<li class="edit"><a href="javascript:;">修改</a></li>':''
  1014. ,($.inArray("remove",options.contextmenuList)!==-1 || $.inArray("remove.async",options.contextmenuList)!==-1)?'<li class="remove"><a href="javascript:;">删除</a></li>':''
  1015. ,'</ul>'].join("");
  1016. this.treeMenu=$(menuStr);
  1017. options.elem.off("contextmenu").on("contextmenu",".eleTree-node-content",function(e) {
  1018. var that=this;
  1019. e.stopPropagation();
  1020. e.preventDefault();
  1021. // 添加active背景
  1022. if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
  1023. $(this).addClass("eleTree-node-content-active");
  1024. var eleNode=$(this).parent(".eleTree-node");
  1025. var nodeData=_self.reInitData(eleNode);
  1026. // 菜单位置
  1027. $(document.body).after(_self.treeMenu);
  1028. $("#tree-menu li.insertBefore,#tree-menu li.insertAfter,#tree-menu li.append").hide();
  1029. $("#tree-menu li.copy,#tree-menu li.add,#tree-menu li.edit,#tree-menu li.remove").show();
  1030. $("#tree-menu").css({
  1031. left: e.pageX,
  1032. top: e.pageY
  1033. }).show();
  1034. // 复制
  1035. $("#tree-menu li.copy").off().on("click",function() {
  1036. var el = $(that).children(".eleTree-node-content-label").get(0);
  1037. var selection = window.getSelection();
  1038. var range = document.createRange();
  1039. range.selectNodeContents(el);
  1040. selection.removeAllRanges();
  1041. selection.addRange(range);
  1042. document.execCommand('Copy', 'false', null);
  1043. selection.removeAllRanges();
  1044. });
  1045. // 新增
  1046. $("#tree-menu li.add").off().on("click",function(e) {
  1047. e.stopPropagation();
  1048. $(this).hide().siblings("li.copy,li.edit,li.remove").hide();
  1049. $(this).siblings(".append,li.insertAfter,li.insertBefore").show();
  1050. })
  1051. // 添加的默认数据
  1052. var obj={};
  1053. obj[options.request.key]=Date.now();
  1054. obj[options.request.name]="未命名"+_self.nameIndex;
  1055. var arr=["Append","InsertBefore","InsertAfter"];
  1056. arr.forEach(function(val) {
  1057. var s=val[0].toLocaleLowerCase()+val.slice(1,val.length);
  1058. $("#tree-menu li."+s).off().on("click",function(e) {
  1059. var node=$(that).parent(".eleTree-node");
  1060. var key=node.attr("data-"+options.request.key);
  1061. key=isNaN(key) ? key : Number(key);
  1062. var isStop=false;
  1063. var s=val[0].toLocaleLowerCase()+val.slice(1,val.length);
  1064. layui.event.call(node, MOD_NAME, 'node'+val+'('+ _self.filter +')', {
  1065. node: node,
  1066. data: nodeData.currentData,
  1067. newData: obj,
  1068. // 重新设置数据
  1069. setData: function(o) {
  1070. obj[options.request.key]=Date.now();
  1071. obj[options.request.name]="未命名"+_self.nameIndex;
  1072. var newObj=$.extend({},obj,o);
  1073. this.newData=newObj
  1074. _self[s](key,newObj);
  1075. _self.nameIndex++;
  1076. isStop=true;
  1077. },
  1078. // 停止添加
  1079. stop: function() {
  1080. isStop=true;
  1081. }
  1082. });
  1083. // 不是异步添加
  1084. if($.inArray("add.async",options.contextmenuList)===-1){
  1085. if(isStop) return;
  1086. _self[s](key,obj)
  1087. _self.nameIndex++;
  1088. }
  1089. })
  1090. })
  1091. // 编辑
  1092. $("#tree-menu li.edit").off().on("click",function(e) {
  1093. e.stopPropagation();
  1094. $("#tree-menu").hide().remove();
  1095. var node=$(that).parent(".eleTree-node");
  1096. var key=node.attr("data-"+options.request.key);
  1097. key=isNaN(key) ? key : Number(key);
  1098. var label=$(that).children(".eleTree-node-content-label").hide();
  1099. var text=label.text();
  1100. var inp="<input type='text' value='"+text+"' class='eleTree-node-content-input' />";
  1101. label.after(inp);
  1102. label.siblings(".eleTree-node-content-input").focus().select().off().on("blur",function() {
  1103. var val=$(this).val();
  1104. var isStop=false;
  1105. var inpThis=this;
  1106. layui.event.call(node, MOD_NAME, 'nodeEdit('+ _self.filter +')', {
  1107. node: node,
  1108. value: val,
  1109. data: nodeData.currentData,
  1110. // 停止添加
  1111. stop: function() {
  1112. isStop=true;
  1113. $(inpThis).siblings(".eleTree-node-content-label").show();
  1114. $(inpThis).remove();
  1115. },
  1116. async: function() {
  1117. if(isStop) return;
  1118. // 修改数据
  1119. _self.reInitData(eleNode).currentData[options.request.name]=val;
  1120. // 修改dom
  1121. $(inpThis).siblings(".eleTree-node-content-label").text(val).show();
  1122. $(inpThis).remove();
  1123. }
  1124. });
  1125. // 不是异步
  1126. if($.inArray("edit.async",options.contextmenuList)===-1){
  1127. if(isStop) return;
  1128. // 修改数据
  1129. _self.reInitData(eleNode).currentData[options.request.name]=val;
  1130. // 修改dom
  1131. $(this).siblings(".eleTree-node-content-label").text(val).show();
  1132. $(this).remove();
  1133. }
  1134. }).on("mousedown",function(e) {
  1135. // 防止input拖拽
  1136. e.stopPropagation();
  1137. })
  1138. })
  1139. // 删除
  1140. $("#tree-menu li.remove").off().on("click",function(e) {
  1141. var node=$(that).parent(".eleTree-node");
  1142. var key=node.attr("data-"+options.request.key);
  1143. key=isNaN(key) ? key : Number(key);
  1144. var isStop=false;
  1145. layui.event.call(node, MOD_NAME, 'nodeRemove('+ _self.filter +')', {
  1146. node: node,
  1147. data: nodeData.currentData,
  1148. // 停止添加
  1149. stop: function() {
  1150. isStop=true;
  1151. return this;
  1152. },
  1153. async: function() {
  1154. if(isStop) return;
  1155. _self.remove(key);
  1156. return this;
  1157. }
  1158. });
  1159. // 不是异步
  1160. if($.inArray("remove.async",options.contextmenuList)===-1){
  1161. if(isStop) return;
  1162. _self.remove(key);
  1163. }
  1164. })
  1165. _self.prevClickEle=$(this);
  1166. })
  1167. },
  1168. search: function(value) {
  1169. var options=this.config;
  1170. if(!options.searchNodeMethod || typeof options.searchNodeMethod !== "function"){
  1171. return;
  1172. }
  1173. var data=options.data;
  1174. // 数据递归
  1175. var traverse=function(data) {
  1176. data.forEach(function(val,index) {
  1177. // 所有查找到的节点增加属性
  1178. val.visible=options.searchNodeMethod(value,val);
  1179. if(val[options.request.children] && val[options.request.children].length>0){
  1180. traverse(val[options.request.children]);
  1181. }
  1182. //如果当前节点属性为隐藏,判断其子节点是否有显示的,如果有,则当前节点改为显示
  1183. if(!val.visible){
  1184. var childSomeShow = false;
  1185. if(val[options.request.children] && val[options.request.children].length>0){
  1186. childSomeShow=val[options.request.children].some(function(v,i) {
  1187. return v.visible;
  1188. })
  1189. }
  1190. val.visible = childSomeShow;
  1191. }
  1192. // 通过节点的属性,显示隐藏各个节点,并添加删除搜索类
  1193. var el=options.elem.find("[data-"+options.request.key+"='"+val[options.request.key]+"']");
  1194. if(val.visible){
  1195. el.removeClass("eleTree-search-hide");
  1196. // 判断父节点是否展开,如果父节点没有展开,则子节点也不要显示
  1197. var parentEl=el.parent(".eleTree-node-group").parent(".eleTree-node");
  1198. var isParentOpen=parentEl.children(".eleTree-node-content").children(".eleTree-node-content-icon").children(".layui-icon.layui-icon-triangle-r").hasClass("icon-rotate")
  1199. if((parentEl.length>0 && isParentOpen) || parentEl.length===0){
  1200. el.show();
  1201. }
  1202. }else{
  1203. el.hide().addClass("eleTree-search-hide");
  1204. }
  1205. // 删除子层属性
  1206. if(val[options.request.children] && val[options.request.children].length>0){
  1207. val[options.request.children].forEach(function(v,i) {
  1208. delete v.visible;
  1209. })
  1210. }
  1211. })
  1212. }
  1213. traverse(data);
  1214. // 删除最外层属性
  1215. var arr=[];
  1216. data.forEach(function(val) {
  1217. arr.push(val.visible);
  1218. delete val.visible;
  1219. })
  1220. // 如果第一层的所有的都隐藏,则显示文本
  1221. if(arr.every(function(v) {
  1222. return v===false;
  1223. })){
  1224. laytpl(TPL_NoText()).render(options, function(string){
  1225. options.elem.append(string);
  1226. });
  1227. }else{
  1228. options.elem.children(".eleTree-noText").remove();
  1229. }
  1230. }
  1231. }
  1232. exports(MOD_NAME,eleTree);
  1233. })