layui table 參數(shù)設(shè)置方法
更新時(shí)間：2018年08月14日 15:38:16 作者：蕭曳丶
今天小編就為大家分享一篇layui table 參數(shù)設(shè)置方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
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%>" rel="external nofollow" >
<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" rel="external nofollow" >
-->
<link rel="stylesheet" type="text/css"
href="js/layui-v2.2.6/layui/css/layui.css" rel="external nofollow" 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; //元素操作
//監(jiān)聽Tab切換
element.on('tab(demo)', function(data){
layer.msg('切換了：'+ this.innerHTML);
console.log(data);
});
//執(zhí)行一個(gè) table 實(shí)例
table.render({
elem: '#userList'
,height: 'full'
,url: 'user/selectUserList.do' //數(shù)據(jù)接口
,method: 'POST'
,cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
,page: { //支持傳入 laypage 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設(shè)定初始在第 5 頁
,groups: 5 //只顯示 5 個(gè)連續(xù)頁碼
,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: '創(chuàng)建時(shí)間', width: 200}
,{field: 'isDelete', title: '是否刪除', width: 200, sort: true}
,{fixed: 'right', title:'操作' , width: 200, align:'center', toolbar: '#barDemo'}
]]
,where : {
//傳值 startDate : startDate,
}
,response: {
statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
,statusCode: 200 //成功的狀態(tài)碼，默認(rèn)：0
,msgName: 'message' //狀態(tài)信息的字段名稱，默認(rèn)：msg
,countName: 'totalCount' //數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
,dataName: 'data' //數(shù)據(jù)列表的字段名稱，默認(rèn)：data
}/* ,
done: function(res, curr, count){
//如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
console.log(res.data);
//得到當(dāng)前頁碼
console.log(curr);
//得到數(shù)據(jù)總量
console.log(count);
} */
});
//監(jiān)聽工具條
table.on('tool(userList)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
console.log(obj)
var data = obj.data //獲得當(dāng)前行數(shù)據(jù)
,layEvent = obj.event; //獲得 lay-event 對應(yīng)的值
if(layEvent === 'detail'){
layer.msg('查看操作');
} else if(layEvent === 'del'){
layer.confirm('真的刪除行么', function(index){
obj.del(); //刪除對應(yīng)行（tr）的DOM結(jié)構(gòu)
layer.close(index);
//向服務(wù)端發(fā)送刪除指令
});
} else if(layEvent === 'edit'){
layer.msg('編輯操作');
}
});
});
});
</script>
<body>
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 20px;">
<legend>默認(rèn)表格</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;
/**
* 前后臺(tái)返回?cái)?shù)據(jù)用的橋接
*
* @author xiaoye
* @date 2018年5月3日
*
*
*/
public class MsgReturn {
/**
* 成功/錯(cuò)誤碼
*/
private String code;
/**
* 提示信息
*/
private Object message;
/**
* 返回?cái)?shù)據(jù)
*/
private Object data;
// --------系統(tǒng)錯(cuò)誤--------
/**
* 系統(tǒng)繁忙
*/
public static String ERROR = "0";
/**
* 參數(shù)錯(cuò)誤
*/
public static String ERROR_PARAME = "1";
/**
* 登錄異常
*/
public static String LOAD_ERROR = "2";
/**
* 登錄失敗
*/
public static String LOAD_EXCEPTION = "3";
/**
* 無數(shù)據(jù)
*/
public static String NODATA = "4";
// --------用戶錯(cuò)誤--------
/**
* 驗(yàn)證碼錯(cuò)誤
*/
public static String VERIFICATION_CODE_ERROR = "10";
/**
* 用戶名不存在
*/
public static String USERNAME_NOT_EXIST = "11";
/**
* 密碼錯(cuò)誤
*/
public static String PASSWOR_ERROR = "12";
/**
* 手機(jī)號碼長度有誤
*/
public static String TEL_LENGTH_ERROR = "13";
/**
* 請輸入正確的手機(jī)號
*/
public static String TEL_IS_FALSE = "14";
/**
* 郵箱格式有誤
*/
public static String EMAIL_FORMAT_ERROR = "15";
/** ---------------300 異常
* 數(shù)據(jù)庫異常
*/
public static String EXCEPTION_SQL = "300";
/**
* 成功
*/
public static String SUCCESS = "200";
private Integer totalCount;
/**
* 系統(tǒng)繁忙
*/
public static MsgReturn ERROR_ERROR = new MsgReturn(ERROR, PropertyCodeMsgUtil.getPropertyValue(ERROR));
/**
* 參數(shù)錯(cuò)誤
*/
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);
}
/**
* 參數(shù)錯(cuò)誤
*
* @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 + "]";
}
}
以上這篇layui table 參數(shù)設(shè)置方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-10-10
之前只知道eval可以解析字符串，剛剛網(wǎng)上看了又了解了一點(diǎn)，這里貼出來，不懂的也看看哈2012-07-07
微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法
這篇文章主要介紹了微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類型的綁定方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
uniapp是2019年火爆的一個(gè)Dcloud開發(fā)跨平臺(tái)前端工具,下面這篇文章主要給大家介紹了關(guān)于uniapp添加車牌組件的實(shí)現(xiàn)與使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳并壓縮圖片的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap Paginator分頁插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要給大家介紹了ES5和ES6中類的區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本文給大家簡單分享了一下個(gè)人項(xiàng)目中解決無刷新上傳文件的方法和示例，有需要的小伙伴可以參考下。2015-06-06
每個(gè)頁面按照結(jié)構(gòu)可以分成三部分:window?page?tabbar.其中window和tabbar一般比較固定，page是平常業(yè)務(wù)開展的主要載體，根據(jù)業(yè)務(wù)需求進(jìn)行頁面配置。下面主要講一下window和tabbar，感興趣的朋友跟隨小編一起看看吧2022-11-11
JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號的方法,涉及javascript數(shù)值運(yùn)算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12