记录开启头部工具栏，行工具栏的表格展示例子
2019-06-27 本文已影响0人
马木木
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="${base}/layui/css/layui.css"/>
</head>
<body>
<div class="demoTable">
角色名称：
<div class="layui-inline">
<input class="layui-input" name="roleName" id="roleName" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="eidtRole">角色权限配置</a>
<a class="layui-btn layui-btn-xs" lay-event="deleteRole">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addNewRole">新增</button>
</div>
</script>
<script type="application/javascript" src="${base}/layui/layui.js"></script>
<script>
layui.use(['table','layer','form'], function(){
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
var $ = layui.$;
table.render({
elem: '#roleTable'
,url:'${base}/aps/dmp/sixth/getSysParamList.htm'
,title: '角色管理'
,toolbar: '#toolbarDemo'
,method:'POST'
,even:true
,cols: [[
{field:'roleCode', title:'角色编码'}
,{field:'roleName', title:'角色名称'}
,{field:'createTime', title:'创建时间',}
,{field:'updateTime', title:'更新时间'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
]]
,page: true
,done : function(res, curr, count) {
$('th').css({'background-color': '#5792c6', 'color': '#fff', 'font-weight': 'bold'})
}
});
//监听行工具事件
table.on('tool(roleTable)', function(obj){
var data = obj.data;
if(obj.event === 'eidtRole'){
layer.open({
type: 2,
title:'角色权限配置',
maxmin:true,
resize:true,
area: ['800px', '600px'],
content: '${base}/aps/dmp/sixth/toEditDmpParamMap.htm?id='+data.id
});
}else if(obj.event === 'deleteRole'){
}
});
//头工具栏事件
table.on('toolbar(roleTable)', function(obj){
switch(obj.event){
case 'addNewRole':
layer.open({
type: 2,
title: '新增角色',
maxmin: true,
resize: true,
area: ['400px', '800px'],
content: '${base}/aps/dmp/sixth/toAddDmpSysParam.htm'
});
break;
};
});
var active = {
reload: function(){
var roleName = $('#roleName');
//执行重载
table.reload('sysParam',{
page:{
curr:1
},
where:{
roleName: roleName.val()
}
})
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
