Layui如何使用折叠表格,以及默认自动折叠
我们有时在开发项目是需要用到树形接口,这时我们可以 Layui 的树形表格treetable插件。参数说明:参数类型是否必填描述treeColIndexint是树形图标显示在第几列treeSpidobject是最上级的父级idtreeIdNamestring否id字段的名称treePidNamestring否pid字段的名称treeDefaultCloseboolean否是否默认折叠treeLinkageboolean否父级展开时是否自动展开所有子级HTML代码:
添加
删除
修改
删除
Js代码:
layui.use(['table','treetable'],function(){
var$=layui.jquery;
vartable=layui.table;
vartreetable=layui.treetable;
//渲染表格
layer.load(2);
treetable.render({
toolbar:'#toolbarDemo',
treeColIndex:1,
treeSpid:-1,
treeIdName:'id',
treePidName:'pid',
elem:'#munu-table',
url:'{:url("union/Permission/getPermission")}',
//url:'__STATIC__/union/api/menus.json',
page:false,
treeDefaultClose:true,
cols:[[
{type:'numbers'},
{field:'name',minWidth:200,title:'权限名称'},
{field:'ac',title:'方法'},
{field:'co',title:'控制器'},
{field:'url',title:'菜单url'},
{field:'ico',title:'图标'},
{field:'sort',width:80,align:'center',title:'排序号'},
{
field:'isMenu',width:80,align:'center',templet:function(d){
if(d.is_menu==1){
return'按钮';
}elseif(d.is_menu==2){
return'其他';
}else{
return'菜单';
}
},title:'类型'
},
{templet:'#auth-state',width:120,align:'center',title:'操作'}
]],
done:function(){
layer.closeAll('loading');
}
});
$('#btn-expand').click(function(){
treetable.expandAll('#munu-table');
});
$('#btn-fold').click(function(){
treetable.foldAll('#munu-table');
});
//监听工具条
table.on('tool(munu-table)',function(obj){
vardata=obj.data;
varlayEvent=obj.event;
if(layEvent==='del'){
layer.msg('删除'+data.id);
}elseif(layEvent==='edit'){
layer.msg('修改'+data.id);
}
});
});
Json结构数据格式:{
"code":0,
"msg":"",
"count":19,
"data":[
{
"authorityId":1,
"authorityName":"系统管理",
"orderNumber":1,
"menuUrl":null,
"menuIcon":"layui-icon-set",
"createTime":"2018/06/2911:05:41",
"authority":null,
"checked":0,
"updateTime":"2018/07/1309:13:42",
"isMenu":0,
"parentId":-1
},
{
"authorityId":2,
"authorityName":"用户管理",
"orderNumber":2,
"menuUrl":"system/user",
"menuIcon":null,
"createTime":"2018/06/2911:05:41",
"authority":null,
"checked":0,
"updateTime":"2018/07/1309:13:42",
"isMenu":0,
"parentId":1
},
]
}