110 lines
3.2 KiB
JavaScript
110 lines
3.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: 'title', title: '菜单名称', minWidth: 150, singleLine: true},
|
|||
|
{title: '图标', width: 50, templet: '<div><i class="fa {{ d.icon }}"></i></div>',align: 'center'},
|
|||
|
{field: 'name', title: '路由标识'},
|
|||
|
|
|||
|
{templet: '#menu-operate', minWidth: 250, fixed: 'right', align: 'center', title: '操作'}
|
|||
|
]],
|
|||
|
done: function () {
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
|
|||
|
|
|||
|
//监听工具条 注意区别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);
|
|||
|
}
|
|||
|
});
|
|||
|
});
|