190 lines
5.7 KiB
JavaScript
190 lines
5.7 KiB
JavaScript
layui.use(['laytpl', 'treeTable','jquery', 'form', 'miniTab', 'xmSelect'], function () {
|
|
let $ = layui.jquery,
|
|
form = layui.form,
|
|
treeTable = layui.treeTable,
|
|
layer = layui.layer,
|
|
miniTab = layui.miniTab,
|
|
xmSelect = layui.xmSelect;
|
|
|
|
let modifyUrl = $('#row-modify').data('url');
|
|
|
|
/**** 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',
|
|
skin: 'line',
|
|
url: listUrl,
|
|
page: false,
|
|
tree: {
|
|
iconIndex: 1, // 折叠图标显示在第几列
|
|
isPidData: true, // 是否是id、pid形式数据
|
|
idName: 'id', // id字段名称
|
|
pidName: 'pid' // pid字段名称
|
|
},
|
|
cols: [[
|
|
{type: 'checkbox'},
|
|
{field: 'name', minWidth: 200, title: '名称',edit: 'text'},
|
|
{field: 'sort', width: 80, align: 'center', title: '排序', edit: 'text'},
|
|
{templet: '#menu-operate', align: 'center', title: '操作'}
|
|
]],
|
|
done: function () {
|
|
}
|
|
});
|
|
|
|
//监听单元格编辑
|
|
treeTable.on('edit(menu-table)', function(obj){
|
|
$.post(modifyUrl, {id: obj.data.id, field: obj.field, value: obj.value}, function (res) {
|
|
layer.msg(res.msg)
|
|
if (res.code === 0) {
|
|
insTb.refresh();
|
|
}
|
|
})
|
|
|
|
});
|
|
|
|
//监听工具条 注意区别toolbar和tool toolbar是表头上的工具条 tool是行中的工具条
|
|
treeTable.on('toolbar(menu-table)', function (obj) {
|
|
let layEvent = obj.event;
|
|
|
|
if (layEvent === 'expand') {
|
|
insTb.expandAll();
|
|
return false;
|
|
}
|
|
if (layEvent === 'refresh') {
|
|
insTb.refresh();
|
|
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;
|
|
}
|
|
|
|
if (layEvent === 'add') {
|
|
let url = $(obj.elem.context).data('href');
|
|
let title = $(obj.elem.context).data('title');
|
|
let index = layer.open({
|
|
title: title,
|
|
type: 2,
|
|
shade: 0.2,
|
|
maxmin: true,
|
|
shadeClose: true,
|
|
area: ['100%', '100%'],
|
|
content: url,
|
|
});
|
|
$(window).on("resize", function () {
|
|
layer.full(index);
|
|
});
|
|
return false;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//删除
|
|
function del(url, ids) {
|
|
let index = layer.confirm('确认删除吗?', {
|
|
btn: ['确认','取消'], //按钮
|
|
title: '操作提示',
|
|
}, function() {
|
|
$.post(url, {ids: ids}, function (res) {
|
|
layer.msg(res.msg)
|
|
if (res.code === 0) {
|
|
insTb.refresh();
|
|
}
|
|
})
|
|
}, function(){
|
|
layer.close(index)
|
|
return false;
|
|
});
|
|
}
|
|
|
|
//监听工具条
|
|
treeTable.on('tool(menu-table)', function (obj) {
|
|
let data = obj.data;
|
|
let layEvent = obj.event;
|
|
let url = $(obj.tr.context).data('href');
|
|
let title = $(obj.tr.context).data('title');
|
|
|
|
if (layEvent === 'del') {
|
|
let ids = [data.id];
|
|
del(url, ids);
|
|
return false;
|
|
}
|
|
|
|
if (layEvent === 'edit') {
|
|
let index = layer.open({
|
|
title: title,
|
|
type: 2,
|
|
shade: 0.2,
|
|
maxmin: true,
|
|
shadeClose: true,
|
|
area: ['100%', '100%'],
|
|
content: url,
|
|
});
|
|
|
|
$(window).on("resize", function () {
|
|
layer.full(index);
|
|
});
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
/*** index end ***/
|
|
|
|
|
|
// add和edit页面
|
|
if ($('.location-operate-page').length > 0) {
|
|
let parentMenu = $('#parent-menu');
|
|
let menuList = parentMenu.data('menu') ? parentMenu.data('menu') : [];
|
|
xmSelect.render({
|
|
el: '#parent-menu',
|
|
paging: false,
|
|
autoRow: true,
|
|
radio: true,
|
|
clickClose: true,
|
|
name: 'pid',
|
|
tips: '请选择上级分类',
|
|
direction: 'auto',
|
|
height: 'auto',
|
|
model: {
|
|
icon: 'hidden',
|
|
},
|
|
prop: {
|
|
name: 'name',
|
|
value: 'id',
|
|
},
|
|
tree: {
|
|
show: true,
|
|
strict: false,
|
|
clickCheck: true,
|
|
expandedKeys: true,
|
|
clickExpand: false
|
|
},
|
|
theme: {
|
|
color: '#1e84ff',
|
|
},
|
|
data: menuList
|
|
});
|
|
}
|
|
}); |