首页 > 编程 > JavaScript > 正文

layui table 参数设置方法

2019-11-19 13:15:29
字体:
来源:转载
供稿:网友

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; //元素操作			 //监听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 + "]";	} }

以上这篇layui table 参数设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表