| | |
| | | |
| | | |
| | | |
| | | <!-- å¼å
¥ layui.js ç <script> æ ç¾æå¥½æ¾ç½®å¨ html æ«å°¾ --> |
| | | <script src="../../../layuiadmin/layui/zgqlayui.js"></script> |
| | | <script> |
| | | layui.config({ |
| | | base: '../../../layuiadmin/' //éæèµæºæå¨è·¯å¾ |
| | | }).extend({ |
| | | index: 'lib/index', //主å
¥å£æ¨¡å |
| | | }).use(['tree', 'index', 'form', 'table', 'element', 'laypage', 'laydate'],function(){ |
| | | var $ = layui.$ |
| | | , layer = layui.layer |
| | | ,form = layui.form |
| | | ,laypage = layui.laypage |
| | | ,element = layui.element |
| | | , tree = layui.tree |
| | | ,laydate = layui.laydate |
| | | ,util = layui.util; |
| | | <!-- å¼å
¥ layui.js ç <script> æ ç¾æå¥½æ¾ç½®å¨ html æ«å°¾ --> |
| | | <script src="../../../layuiadmin/layui/zgqlayui.js"></script> |
| | | <script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script> |
| | | <script> |
| | | layui.config({ |
| | | base: '../../../layuiadmin/' //éæèµæºæå¨è·¯å¾ |
| | | }).extend({ |
| | | index: 'lib/index', //主å
¥å£æ¨¡å |
| | | }).use(['tree', 'index', 'form', 'table', 'element', 'laypage', 'laydate'], function () { |
| | | var $ = layui.$ |
| | | , layer = layui.layer |
| | | , form = layui.form |
| | | , laypage = layui.laypage |
| | | , element = layui.element |
| | | , tree = layui.tree |
| | | , laydate = layui.laydate |
| | | , util = layui.util; |
| | | |
| | | var layout = [ |
| | | { |
| | | title: 'èæ¬å¯¹è±¡åç§°', |
| | | treeNodes: true, |
| | | headerClass: 'value_col', |
| | | colClass: 'value_col', |
| | | style: 'width:60%' |
| | | }, |
| | | { |
| | | title: 'æä½', |
| | | headerClass: 'value_col', |
| | | colClass: 'value_col', |
| | | style: 'width:9%', |
| | | render: function (row) { |
| | | var str = ''; |
| | | if (row.parentId != null && row.children.length <= 0) {//æç¶å
ç´ æ²¡æåå
ç´ ï¼ |
| | | str = '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick=del("' + row.id + '","' + row.parentId + '","' + row.children.length + '")><i class="layui-icon"></i></a>' |
| | | } else { |
| | | '' |
| | | var sWhere = ""; |
| | | |
| | | $.ajax({ |
| | | url: GetWEBURL() + '/Gy_Department/LoadTree', |
| | | type: "GET", |
| | | data: { "sWhere": sWhere }, |
| | | success: function (result) { |
| | | var data = result.data; |
| | | //çææ°æ®å¯¹è±¡éå |
| | | var treeData = LoadTree(data); |
| | | console.log(treeData); |
| | | tree.render({ |
| | | elem: '#test12', |
| | | data: treeData, |
| | | id: 'treeId', |
| | | showCheckbox: false, //æ¯å¦æ¾ç¤ºå¤éæ¡ |
| | | onlyIconControl: false |
| | | }); |
| | | } |
| | | return '<a class="layui-btn layui-btn-normal layui-btn-xs" onclick=add("' + row.id + '","' + row.level + '")><i class="layui-icon"></i></a>' + |
| | | '<a class="layui-btn layui-btn-warm layui-btn-xs" onclick=change("' + row.id + '","' + row.title + '")><i class="layui-icon"></i></a>' + //忏²æ |
| | | str; |
| | | } |
| | | } |
| | | ]; |
| | | }); |
| | | |
| | | |
| | | var groupList; |
| | | |
| | | data1 = [{ |
| | | title: 'æ±è¥¿' |
| | | , id: 1 |
| | | , children: [{ |
| | | title: 'åæ' |
| | | , id: 1000 |
| | | , children: [{ |
| | | title: 'éå±±æ¹åº' |
| | | , id: 10001 |
| | | }, { |
| | | title: '髿°åº' |
| | | , id: 10002 |
| | | }] |
| | | }, { |
| | | title: '乿±' |
| | | , id: 1001 |
| | | }, { |
| | | title: 'èµ£å·' |
| | | , id: 1002 |
| | | }] |
| | | }, { |
| | | title: '广西' |
| | | , id: 2 |
| | | , children: [{ |
| | | title: 'åå®' |
| | | , id: 2000 |
| | | }, { |
| | | title: 'æ¡æ' |
| | | , id: 2001 |
| | | }] |
| | | }, { |
| | | title: 'é西' |
| | | , id: 3 |
| | | , children: [{ |
| | | title: '西å®' |
| | | , id: 3000 |
| | | }, { |
| | | title: 'å»¶å®' |
| | | , id: 3001 |
| | | }] |
| | | }] |
| | | var dateTree; |
| | | var sWhere = ""; |
| | | $.ajax({ |
| | | //url: "http://61.130.49.162:9090/WMSAPI///Web/GetMAXNum", |
| | | //url: GetWEBURL() + '/Gy_Department/LoadTree', |
| | | url: "http://localhost:12761/Gy_Department/LoadTree", |
| | | type: "GET", |
| | | data: { "sWhere": sWhere }, |
| | | success: function (result) { |
| | | dateTree = result.data; |
| | | //åºæ¬æ¼ç¤º |
| | | tree.render({ |
| | | elem: '#test12' |
| | | , data: dateTree |
| | | , showCheckbox: true //æ¯å¦æ¾ç¤ºå¤éæ¡ |
| | | , id: 'demoId1' |
| | | , isJump: true //æ¯å¦å
许ç¹å»èç¹æ¶å¼¹åºæ°çªå£è·³è½¬ |
| | | , click: function (obj) { |
| | | var data = obj.data; //è·åå½åç¹å»çèç¹æ°æ® |
| | | layer.msg('ç¶æï¼' + obj.state + '<br>èç¹æ°æ®ï¼' + JSON.stringify(data)); |
| | | } |
| | | }); |
| | | }, error: function () { |
| | | layer.close(index); |
| | | layer.alert("æ¥å£è¯·æ±å¤±è´¥!", { icon: 5 }); |
| | | } |
| | | |
| | | |
| | | |
| | | //æé®äºä»¶ |
| | | util.event('lay-demo', { |
| | | getChecked: function (othis) { |
| | | var checkedData = tree.getChecked('treeId'); //è·åéä¸èç¹çæ°æ® |
| | | |
| | | layer.alert(JSON.stringify(checkedData), { shade: 0 }); |
| | | console.log(checkedData); |
| | | } |
| | | , setChecked: function () { |
| | | tree.setChecked('treeId', [12, 16]); //å¾éæå®èç¹ |
| | | } |
| | | , reload: function () { |
| | | //éè½½å®ä¾ |
| | | tree.reload('treeId', { |
| | | |
| | | }); |
| | | |
| | | } |
| | | }); |
| | | |
| | | //触åäºä»¶ |
| | | util.event('test-active', { |
| | | 'test-form': function () { |
| | | layer.open({ |
| | | type: 1 |
| | | , resize: false |
| | | , shadeClose: true |
| | | , content: ['<ul class="layui-form" style="margin: 10px;">' |
| | | , '<li class="layui-form-item">' |
| | | , '<label class="layui-form-label">è¾å
¥æ¡</label>' |
| | | , '<div class="layui-input-block">' |
| | | , '<input class="layui-input" name="field1">' |
| | | , '</div>' |
| | | , '</li>' |
| | | , '<li class="layui-form-item">' |
| | | , '<label class="layui-form-label">éæ©æ¡</label>' |
| | | , '<div class="layui-input-block">' |
| | | , '<select name="field2">' |
| | | , '<option value="A">A</option>' |
| | | , '<option value="B">B</option>' |
| | | , '<select>' |
| | | , '</div>' |
| | | , '</li>' |
| | | , '<li class="layui-form-item" style="text-align:center;">' |
| | | , '<button type="submit" lay-submit lay-filter="*" class="layui-btn">æäº¤</button>' |
| | | , '</li>' |
| | | , '</ul>'].join('') |
| | | , success: function (layero) { |
| | | layero.find('.layui-layer-content').css('overflow', 'visible'); |
| | | |
| | | form.render().on('submit(*)', function (data) { |
| | | layer.msg(JSON.stringify(data.field)); |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | //æé®äºä»¶ |
| | | util.event('lay-demo', { |
| | | getChecked: function (othis) { |
| | | var checkedData = tree.getChecked('demoId1'); //è·åéä¸èç¹çæ°æ® |
| | | |
| | | layer.alert(JSON.stringify(checkedData), { shade: 0 }); |
| | | console.log(checkedData); |
| | | } |
| | | , setChecked: function () { |
| | | tree.setChecked('demoId1', [12, 16]); //å¾éæå®èç¹ |
| | | } |
| | | , reload: function () { |
| | | //éè½½å®ä¾ |
| | | tree.reload('demoId1', { |
| | | |
| | | }); |
| | | |
| | | } |
| | | }); |
| | | |
| | | //groupList = data1; |
| | | //layui.treeGird({ |
| | | // elem: '#test12', |
| | | // spreadable: true, |
| | | // nodes: groupList, |
| | | // layout: layout |
| | | //}) |
| | | |
| | | |
| | | |
| | | |
| | | //欢è¿ä¿¡æ¯ |
| | | layer.msg('Hello World'); |
| | | |
| | | //è¾åºçæ¬å· |
| | | lay('#version').html(layui.v); |
| | | |
| | | //æ¥æ |
| | | laydate.render({ |
| | | elem: '#test2' |
| | | ,value: new Date() |
| | | ,isInitValue: true |
| | | }); |
| | | |
| | | //触åäºä»¶ |
| | | util.event('test-active', { |
| | | 'test-form': function(){ |
| | | layer.open({ |
| | | type: 1 |
| | | ,resize: false |
| | | ,shadeClose: true |
| | | ,content: ['<ul class="layui-form" style="margin: 10px;">' |
| | | ,'<li class="layui-form-item">' |
| | | ,'<label class="layui-form-label">è¾å
¥æ¡</label>' |
| | | ,'<div class="layui-input-block">' |
| | | ,'<input class="layui-input" name="field1">' |
| | | ,'</div>' |
| | | ,'</li>' |
| | | ,'<li class="layui-form-item">' |
| | | ,'<label class="layui-form-label">éæ©æ¡</label>' |
| | | ,'<div class="layui-input-block">' |
| | | ,'<select name="field2">' |
| | | ,'<option value="A">A</option>' |
| | | ,'<option value="B">B</option>' |
| | | ,'<select>' |
| | | ,'</div>' |
| | | ,'</li>' |
| | | ,'<li class="layui-form-item" style="text-align:center;">' |
| | | ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">æäº¤</button>' |
| | | ,'</li>' |
| | | ,'</ul>'].join('') |
| | | ,success: function(layero){ |
| | | layero.find('.layui-layer-content').css('overflow', 'visible'); |
| | | |
| | | form.render().on('submit(*)', function(data){ |
| | | layer.msg(JSON.stringify(data.field)); |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | function tree(data) { |
| | | let map = {}; |
| | | let val = []; |
| | | //çææ°æ®å¯¹è±¡éå |
| | | data.forEach(it => { |
| | | map[it.department_id] = it; //department_id为æ¯ä¸ªèç¹çid |
| | | }) |
| | | //çæç»æé |
| | | data.forEach(it => { |
| | | const parent = map[it.pid_department_id]; //pid_department_id为ç¶èç¹çid |
| | | if (parent) { |
| | | if (!Array.isArray(parent.children)) parent.children = []; |
| | | parent.children.push(it); |
| | | } else { |
| | | val.push(it) |
| | | } |
| | | }) |
| | | return val; |
| | | } |
| | | </script> |
| | | </script> |
| | | </body> |
| | | </html> |