layui.use([ 'laypage', 'layer', 'table', 'element','form','treetable'], function(){
var laypage = layui.laypage //分页
,$ = layui.jquery
,layer = layui.layer //弹层
,table = layui.table //表格
,treetable = layui.treetable //treetable表格
,element = layui.element //元素操作
,form = layui.form;
//第一个实例
if($('#menulist').attr('lay-filter') == 'menulist'){
var renderTable = function (wheres = {}) {
layer.load(2);
treetable.render({
treeColIndex:2,
treeSpid:0,
treeIdName: 'id',
treePidName: 'pid',
treeDefaultClose: true,
treeLinkage: false,
elem: '#menulist',
url: '/menu/indexfrom',
page: false,
where:wheres,
id:'tablerReload'
, cols: [[ //表头
{type: 'numbers', title: '序号'}
, {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'}
, {field: 'name', title: '菜单名称', align: 'center'}
, {field: 'url', title: '地址', width: 300, align: 'center'}
, {field: 'icon', title: '图标', width: 120, align: 'center'}
//,{field: 'sort', title: '排序', width:100,align:'center'}
, {field: 'sort', title: '排序', width: 80, edit: 'text', align: 'center', sort: true, templet: "#sortBox"}
, {field: 'level', title: '菜单级别', width: 120, align: 'center'}
, {
field: 'status', title: '审核', align: 'center', width: 100,templet:function(d){
// console.log(d)
switch (d.status){
case '2':
return '<input type="checkbox" value="'+d.id+'" res="1" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
break;
case '1':
return '<input type="checkbox" checked value="'+d.id+'" res="2" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
break;
}
}
}
, {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#operate'}
]],
done: function () {
layer.closeAll('loading');
}
});
};
renderTable();
}
// table.render({
// elem: '#menulist'
// ,url: '/menu/indexfrom' //数据接口
// ,where:{token:csrfToken}
// ,method:'post'
// ,id:'tablerReload'
// ,page: true //开启分页
// ,text:'数据加载中'
// ,cols: [[ //表头
// {type:'numbers',title:'序号'}
// ,{field: 'id', title: 'ID', width:80, sort: true, align:'center'}
// ,{field: 'name', title: '菜单名称', align:'center'}
// ,{field: 'url', title: '地址', width:300,align:'center'}
// ,{field: 'icon', title: '图标', width:120,align:'center'}
// ,{field: 'sort', title: '排序', width:100,align:'center'}
// ,{field: 'level', title: '菜单级别', width:120,align:'center'}
// ,{field: 'status', title: '状态', width:80,align:'center',templet:function(d){
// // console.log(d)
// switch (d.status){
// case '2':
// return '<input type="checkbox" value="'+d.id+'" res="1" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
// break;
// case '1':
// return '<input type="checkbox" checked value="'+d.id+'" res="2" lay-skin="switch" lay-filter="switchTest" lay-text="|">'
// break;
// }
// }}
// ,{fixed: 'right',title:'操作', width: 165, align:'center', toolbar: '#operate'}
//
// ]]
// });
// table.reload('tablerReload'); //重新加载
//列表操作
table.on('tool(menulist)', function(obj){
var layEvent = obj.event,
data = obj.data;
if(layEvent === 'edit'){
layer.open({
type: 2,
title: '添加菜单',
closeBtn: 1, //不显示关闭按钮
// shade: [0],
area: ['600px', '500px'],
anim: 2,
content: ['/menu/edit?id='+data.id, 'yes'], //iframe的url，no代表不显示滚动条
});
} else if(layEvent === 'del') {
$.post('/menu/delmenu',{'id':data.id},function (data) {
if(data.code == 200)
{
layer.msg(data.msg);
table.reload('menulist');
} else if(data.code == 300 ) {
layer.msg(data.msg);
}
})
}
});
var $ = layui.$, active = {
addData: function(){ //获取选中数据
layer.open({
type: 2,
title: '添加菜单',
closeBtn: 1, //不显示关闭按钮
// shade: [0],
area: ['600px', '500px'],
anim: 2,
content: ['/menu/create.html', 'no'] //iframe的url，no代表不显示滚动条
// end: function(){ //此处用于演示
// layer.open({
// type: 2,
// title: '很多时候，我们想最大化看，比如像这个页面。',
// shadeClose: true,
// shade: false,
// maxmin: true, //开启最大化最小化按钮
// area: ['893px', '600px'],
// content: '//fly.layui.com/'
// });
// }
});
// var checkStatus = table.checkStatus('idTest')
// ,data = checkStatus.data;
// layer.alert(JSON.stringify(data));
}
};
//监听指定开关
form.on('switch(switchTest)', function(data){
var status_id = $(data.elem).val();
var status_res = $(data.elem).attr('res');
layer.confirm('您确定要修改当前状态吗？',{btn:['确认','取消']},function(index){
editMenuStatus(status_id,status_res)
table.reload('tablerReload');
layer.close(index)
},function(index){
table.reload('tablerReload');
layer.close(index)
})
return false;
});
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
form.on('submit(editMenu)', function(data){
$.post('/menu/editfrom',{'data':data.field},function (data) {
if(data.code == 200)
{
layer.msg('修改成功');
setTimeout(function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layui.table.reload('menulist');
},1000)
} else if(data.code == 300 ) {
layer.msg('修改失败');
}
})
return false;
});
form.on('submit(addmenu)', function(data){
$.post('/menu/createfrom',{'data':data.field},function (data) {
if(data.code == 200)
{
layer.msg('修改成功');
parent.layui.table.reload('menulist');
TableClose();
} else if(data.code == 300 ) {
layer.msg('修改失败');
}
})
return false;
});
//修改菜单状态
function editMenuStatus(id,res){
$.post("/menu/menustatus",{menuid: id,res:res},function(res){
if(res.code == 200 ){
layer.msg('修改成功');
renderTable();
}else{
layer.msg('网络延时');
}
},'json')
}
//排序
table.on('edit(menulist)', function(obj){
var data = obj.data;
$.post('/menu/menusortedit',{id:data.id,sort:data.sort},function (data) {
if(data.code == 200)
{
layer.msg(data.msg);
} else if(data.code == 300 ) {
layer.msg(data.msg);
}
})
})
});