声明:框架采用的layui+SpringMVC
1.引入js及css
<!-- layui插件 -->
<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" type="text/css">
<script src="${ctxStatic}/layui/layui.js" charset="UTF-8"></script>
2.页面元素
<table class="layui-hide" id="contentTable" lay-filter="lfilter"></table>
3.js定义及初始化(表格,分页,工具条)
//①表格及分页的定义,工具条方法的绑定
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#contentTable'
,url:'${ctx}/sys/user/listData'
,id: 'id'
,cols: [[
{field:'companyName', width:'22.5%', title: '归属公司', sort: true}
,{field:'officeName', width:'12.5%', title: '归属部门', sort: true}
,{field:'loginName', width:'12.5%', title: '登录名', sort: true}
,{field:'name', width:'12.5%', title: '姓名'}
,{field:'phone', width:'12.5%', title: '电话'}
,{field:'mobile', width:'12.5%', title: '手机'}
<shiro:hasPermission name="sys:user:edit">
,{field:'right', width:'15%', title: '操作', toolbar: '#operationBar'}
</shiro:hasPermission>
]]
,page: true
,limit:10 //默认十条数据一页
,limits:[10,20,30,50] //数据分页条
,request: {
pageName: 'pageNo', //页码的参数名称,默认:page
limitName: 'pageSize' //每页数据量的参数名,默认:limit
}
});
//监听工具条
table.on('tool(lfilter)', function(obj){ //注:tool是工具条事件名,lfilter是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
if(layEvent === 'edit'){ //修改
location.href='${ctx}/sys/user/form?id='+data.id;
} else if(layEvent === 'del'){ //删除
top.layer.confirm('确认要删除该用户吗?', {icon:3, title:'系统提示', btn: ['确定', '取消']}, function(index){
location.href='${ctx}/sys/user/delete?id='+data.id;
top.layer.close(index);
});
}
});
});
//②在body中添加工具条元素
<script type="text/html" id="operationBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
//③点击查询按钮,初始化表格数据
$("#btnSubmit").click(function(){
//执行重载
table.reload('userListTable', {
page: {
curr: 1 //重新从第 1 页开始
}
,where:{
'company.id' : $("#company").value,
'office.id' : $("#office").value,
'loginName' : $("#loginName").val(),
'name' : $("#name").val()
}
});
});
4.Control后台管理
// ①用于封装layui table的数据 解析基础数据为此格式 返回前台json字符串
public class LayuiTable extends HashMap<String,Object> {
private static final long serialVersionUID = 1L;
public static LayuiTable tableData(Integer count,List<?> data){
LayuiTable tableData = new LayuiTable();
tableData.put("code", 0);
tableData.put("msg", "");
tableData.put("count", count);
tableData.put("data", data);
return tableData;
}
}
//②返回值 使用renderString转为json字符串
/**
* 客户端返回JSON字符串
*/
protected String renderString(HttpServletResponse response, Object object) {
return renderString(response, JsonMapper.toJsonString(object), "application/json");
}
/**
* 客户端返回字符串
*/
protected String renderString(HttpServletResponse response, String string, String type) {
try {
response.reset();
response.setContentType(type);
response.setCharacterEncoding("utf-8");
response.getWriter().print(string);
return null;
} catch (IOException e) {
return null;
}
}