layui table 参数设置方法


Posted in Javascript onAugust 14, 2018

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";
	/**
	 * ?o??
	 */
	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 参数设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
layui 表格的属性的显示转换方法
Aug 14 #Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 #Javascript
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
layer插件select选中默认值的方法
Aug 14 #Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
网页javascript精华代码集
2007/01/24 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
js删除数组中某几项的方法总结
2019/01/16 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python 重命名轴索引的方法
2018/11/10 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
生态学毕业生自荐信
2013/10/27 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
毕业实习感受与体会
2015/05/26 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis
linux目录管理方法介绍
2022/06/01 Servers