layui table 引數設定
阿新 • • 發佈：2019-02-14
JSp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta charset="utf-8"> <meta name="viewport" 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 rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="js/layui-v2.2.6/layui/css/layui.css" media="all"> </head> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="js/layui-v2.2.6/layui/layui.all.js"></script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">檢視</a> <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> <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 class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>預設表格</legend> </fieldset> <div> <table class="layui-hide" id="userList" 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
package com.xiaoye.app.common; import com.xiaoye.app.util.PropertyCodeMsgUtil; /** * 前後臺返回資料用的橋接 * * @author xiaoye * @date 2018年5月3日 * * */ public class MsgReturn { /** * 成功/錯誤碼 */ private String code; /** * 提示資訊 */ private Object message; /** * 返回資料 */ private Object data; // --------系統錯誤-------- /** * 系統繁忙 */ public static String ERROR = "0"; /** * 引數錯誤 */ public static String ERROR_PARAME = "1"; /** * 登入異常 */ public static String LOAD_ERROR = "2"; /** * 登入失敗 */ public static String LOAD_EXCEPTION = "3"; /** * 無資料 */ public static String NODATA = "4"; // --------使用者錯誤-------- /** * 驗證碼錯誤 */ public static String VERIFICATION_CODE_ERROR = "10"; /** * 使用者名稱不存在 */ public static String USERNAME_NOT_EXIST = "11"; /** * 密碼錯誤 */ public static String PASSWOR_ERROR = "12"; /** * 手機號碼長度有誤 */ public static String TEL_LENGTH_ERROR = "13"; /** * 請輸入正確的手機號 */ public static String TEL_IS_FALSE = "14"; /** * 郵箱格式有誤 */ public static String EMAIL_FORMAT_ERROR = "15"; /** ---------------300 異常 * 資料庫異常 */ public static String EXCEPTION_SQL = "300"; /** * 成功 */ public static String SUCCESS = "200"; private Integer totalCount; /** * 系統繁忙 */ public static MsgReturn ERROR_ERROR = new MsgReturn(ERROR, PropertyCodeMsgUtil.getPropertyValue(ERROR)); /** * 引數錯誤 */ public static MsgReturn ERROR_PARAM = new MsgReturn(ERROR_PARAME, PropertyCodeMsgUtil.getPropertyValue(ERROR_PARAME)); /** * 操作成功 */ public static MsgReturn SuccessMsg = new MsgReturn(SUCCESS, PropertyCodeMsgUtil.getPropertyValue(SUCCESS)); public MsgReturn(String code, String message) { this.code = code; this.message = message; } public MsgReturn(String code, Object message, Object data) { super(); this.code = code; this.message = message; this.data = data; } public MsgReturn(String code, Object message, Object data, Integer totalCount) { super(); this.code = code; this.message = message; this.data = data; this.totalCount = totalCount; } public static MsgReturn success(Object data) { return new MsgReturn(SUCCESS, PropertyCodeMsgUtil.getPropertyValue(SUCCESS), data); } public static MsgReturn success(Object message, Object data) { return new MsgReturn(SUCCESS, message, data); } public static MsgReturn ERROR(Object data) { return new MsgReturn(ERROR_PARAME, null, data); } public static MsgReturn NODATA() { return new MsgReturn(NODATA, PropertyCodeMsgUtil.getPropertyValue(NODATA), null); } /** * 引數錯誤 * * @return */ public static MsgReturn PARAM_ERROR() { return new MsgReturn(ERROR_PARAME, PropertyCodeMsgUtil.getPropertyValue(ERROR_PARAME), null); } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public Object getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Object getdata() { return data; } public void setdata(Object data) { this.data = data; } public Integer getTotalCount() { return totalCount; } public void setTotalCount(Integer totalCount) { this.totalCount = totalCount; } public void setMessage(Object message) { this.message = message; } @Override public String toString() { return "MsgReturn [code=" + code + ", message=" + message + ", data=" + data + ", totalCount=" + totalCount + "]"; } }