layui table 参数设置方法

最新推荐文章于 2025-04-08 14:34:44 发布

spt_dream

最新推荐文章于 2025-04-08 14:34:44 发布

阅读量4.4k

点赞数 1

分类专栏：框架

本文链接：https://blog.csdn.net/spt_dream/article/details/103376842

版权

框架专栏收录该内容

32 篇文章

订阅专栏

<%@ 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; //元素操作

//监听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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

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 + "]";

}