138 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
			
		
		
	
	
			138 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
| layui.use(['laytpl', 'treeTable', 'jquery', 'iconPickerFa', 'form', 'miniTab', 'xmSelect'], function () {
 | ||
|     let $ = layui.jquery,
 | ||
|         form = layui.form,
 | ||
|         treeTable = layui.treeTable,
 | ||
|         iconPickerFa = layui.iconPickerFa,
 | ||
|         layer = layui.layer,
 | ||
|         miniTab = layui.miniTab,
 | ||
|         xmSelect = layui.xmSelect;
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|     /**** index begin ***/
 | ||
|     //index页面
 | ||
|     if ($('.location-index-page').length > 0) {
 | ||
|         miniTab.listen();
 | ||
| 
 | ||
|         // 渲染表格
 | ||
|         let listUrl = $('#menu-table').data('url');
 | ||
|         let insTb = treeTable.render({
 | ||
|             elem: '#menu-table',
 | ||
|             toolbar: '#toolbar-tpl',
 | ||
|             defaultToolbar: [],
 | ||
|             method: 'POST',
 | ||
|             url: listUrl,
 | ||
|             page: false,
 | ||
|             tree: {
 | ||
|                 iconIndex: 1,           // 折叠图标显示在第几列
 | ||
|                 isPidData: true,        // 是否是id、pid形式数据
 | ||
|                 idName: 'code',  // id字段名称
 | ||
|                 pidName: 'pcode',    // pid字段名称
 | ||
|                 Spid: '86'     // pid字段名称
 | ||
|             },
 | ||
|             cols: [[
 | ||
|                 {type: 'checkbox'},
 | ||
|                 {field: 'name', title: '名称', minWidth: 150, singleLine: true},
 | ||
|                 {field: 'name', title: '状态'},
 | ||
|                 {field: 'sort', title: '排序',edit:"text"},
 | ||
|                 {templet: '#row-status',field: 'status', minWidth: 180,align: 'center', title: '状态'},
 | ||
|             ]],
 | ||
|             done: function () {
 | ||
|             }
 | ||
|         });
 | ||
|         let modifyUrl = $('#row-modify').data('url');
 | ||
| 
 | ||
|         //监听状态改变
 | ||
|         form.on('switch(changeStatus)', function(obj){
 | ||
|             let val = obj.elem.checked ? 1 : 0;
 | ||
|             $.post(modifyUrl, {id: this.value, field: this.name, value: val}, function (res) {
 | ||
|                 layer.msg(res.msg)
 | ||
|                 if (res.code === 0) {
 | ||
|                     setTimeout(function () {
 | ||
|                         //insTb.reload();
 | ||
|                     }, 1000)
 | ||
|                 }
 | ||
|             })
 | ||
|         });
 | ||
|         let sort = $('#table-container-sort').data('url');
 | ||
|         treeTable.on('edit(menu-table)', function (obj) {
 | ||
|             let id = obj.data.id;
 | ||
|             if (obj.field == 'sort') {
 | ||
|                 $.ajax(sort, {
 | ||
|                     data: {
 | ||
|                         "sort": obj.value,
 | ||
|                         "id": id
 | ||
|                     }
 | ||
|                     ,dataType : 'json'
 | ||
|                     ,type: 'POST'
 | ||
|                 })
 | ||
|                     .done(function () {
 | ||
|                         insTb.reload();
 | ||
|                     })
 | ||
|             }
 | ||
|         });
 | ||
| 
 | ||
|         //监听工具条 注意区别toolbar和tool  toolbar是表头上的工具条 tool是行中的工具条
 | ||
|         treeTable.on('toolbar(menu-table)', function (obj) {
 | ||
|             let layEvent = obj.event;
 | ||
| 
 | ||
|             //全部展开
 | ||
|             if (layEvent === 'expand') {
 | ||
|                 insTb.expandAll();
 | ||
|                 return false;
 | ||
|             }
 | ||
| 
 | ||
|             //全部折叠
 | ||
|             if (layEvent === 'fold') {
 | ||
|                 insTb.foldAll();
 | ||
|                 return false;
 | ||
|             }
 | ||
| 
 | ||
|             //删除
 | ||
|             if (layEvent === 'del') {
 | ||
|                 let selected = insTb.checkStatus(false);
 | ||
|                 let ids = [];
 | ||
|                 let url = $(obj.elem.context).data('href')
 | ||
|                 $.each(selected, function (index, val) {
 | ||
|                     ids.push(val.id);
 | ||
|                 })
 | ||
| 
 | ||
|                 del(url, ids);
 | ||
|                 return false;
 | ||
|             }
 | ||
| 
 | ||
| 
 | ||
|         });
 | ||
| 
 | ||
|         //刷新
 | ||
|         $('body').on('click', '[data-table-refresh]', function () {
 | ||
|             insTb.refresh();
 | ||
|         });
 | ||
| 
 | ||
| 
 | ||
|     }
 | ||
|     /*** index end ***/
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
|     iconPickerFa.render({
 | ||
|         // 选择器,推荐使用input
 | ||
|         elem: '.iconPicker',
 | ||
|         // fa 图标接口
 | ||
|         url: "/static/layuimini/lib/font-awesome-4.7.0/less/variables.less",
 | ||
|         // 是否开启搜索:true/false,默认true
 | ||
|         search: true,
 | ||
|         // 是否开启分页:true/false,默认true
 | ||
|         page: true,
 | ||
|         // 每页显示数量,默认12
 | ||
|         limit: 12,
 | ||
|         // 点击回调
 | ||
|         click: function (data) {
 | ||
|             // console.log(data);
 | ||
|         },
 | ||
|         // 渲染成功后的回调
 | ||
|         success: function (d) {
 | ||
|             // console.log(d);
 | ||
|         }
 | ||
|     });
 | ||
| }); |