前端-layui-table：简单前台实现及后台数据封装

声明：框架采用的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;
	}
}