layui table 参数设置方法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "https://www.jb51.net/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="https://www.jb51.net/<%=basePath%>" > <meta charset="utf-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>用户信息表</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link type="text/css" href="https://www.jb51.net/styles.css" > --> <link type="text/css" href="https://www.jb51.net/js/layui-v2.2.6/layui/css/layui.css" media="all"> </head> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/layui-v2.2.6/layui/layui.all.js"></script> <script type="text/html"> <a lay-event="detail">查看</a> <a lay-event="edit">编辑</a> <a lay-event="del">删除</a> </script> <script type="text/javascript"> $(function(){ layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){ var laydate = layui.laydate //日期 ,laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table //表格 ,carousel = layui.carousel //轮播 ,upload = layui.upload //上传 ,element = layui.element; //元素操作 //监听Tab切换 element.on('tab(demo)', function(data){ layer.msg('切换了:'+ this.innerHTML); console.log(data); }); //执行一个 table 实例 table.render({ elem: '#userList' ,height: 'full' ,url: 'user/selectUserList.do' //数据接口 ,method: 'POST' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 ,groups: 5 //只显示 5 个连续页码 ,first: true //显示首页 ,last: true //显示尾页 } ,limits : [2,3] ,cols: [[ //表头 {checkbox : true} ,{field: 'id', title: 'ID', width:50, sort: true, fixed: 'left'} ,{field: 'name', title: '用户名', width:200} ,{field: 'username', title: '账号', width:200, sort: true} ,{field: 'tel', title: '电话', width:200} ,{field: 'QQ', title: 'QQ', width: 200} ,{field: 'WeChat', title: '微信', width: 200, sort: true} ,{field: 'role', title: 'role', width: 80, sort: true} ,{field: 'createDate', title: '创建时间', width: 200} ,{field: 'isDelete', title: '是否删除', width: 200, sort: true} ,{fixed: 'right', title:'操作' , width: 200, align:'center', toolbar: '#barDemo'} ]] ,where : { //传值 startDate : startDate, } ,response: { statusName: 'code' //数据状态的字段名称,默认:code ,statusCode: 200 //成功的状态码,默认:0 ,msgName: 'message' //状态信息的字段名称,默认:msg ,countName: 'totalCount' //数据总数的字段名称,默认:count ,dataName: 'data' //数据列表的字段名称,默认:data }/* , done: function(res, curr, count){ //如果是异步请求数据方式,res即为你接口返回的信息。 //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res.data); //得到当前页码 console.log(curr); //得到数据总量 console.log(count); } */ }); //监听工具条 table.on('tool(userList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" console.log(obj) var data = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent === 'detail'){ layer.msg('查看操作'); } else if(layEvent === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行(tr)的DOM结构 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ layer.msg('编辑操作'); } }); }); }); </script> <body> <fieldset> <legend>默认表格</legend> </fieldset> <div> <table lay-filter="userList"></table> </div> </body> </html>

Controller

package com.xiaoye.app.controller; import java.sql.SQLException; import org.apache.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.xiaoye.app.common.MsgReturn; import com.xiaoye.app.constant.passWordUtil; import com.xiaoye.app.entity.User; import com.xiaoye.app.service.UserService; import com.xiaoye.app.util.PropertyCodeMsgUtil; import com.xiaoye.app.util.StringUtil; @Controller(value = "userController") /** * * @author xiaoye * @date 2018年5月3日 * * 此类的全局访问 "user/xxx.do" */ @RequestMapping(value = "user/") public class UserController { @Autowired // @Qualifier("userService") private UserService userService; private static final Logger logger = Logger.getLogger(UserController.class); @RequestMapping(value = "login", method = RequestMethod.POST) @ResponseBody public MsgReturn login(User user) { if (user == null) { return MsgReturn.ERROR_PARAM; } String password = user.getPassword(); if (StringUtil.isEmpty(user.getUsername()) || StringUtil.isEmpty(password)) { return MsgReturn.ERROR_PARAM; } user.setPassword(passWordUtil.md5ToRandomMd5(password)); try { return userService.login(user); } catch (SQLException e) { e.printStackTrace(); logger.info(PropertyCodeMsgUtil.getPropertyValue(MsgReturn.EXCEPTION_SQL), e); } return MsgReturn.ERROR_ERROR; } @RequestMapping(value = "selectUserList", method = RequestMethod.POST) @ResponseBody public MsgReturn selectUserList(User user) { try { return userService.selectUserList(user); } catch (SQLException e) { e.printStackTrace(); logger.info(PropertyCodeMsgUtil.getPropertyValue(MsgReturn.EXCEPTION_SQL), e); } return MsgReturn.ERROR_ERROR; } }

返回类型

MsgReturn

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/0e06d43d1ba1e63993c124ba705235b1.html