首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

layui table 参数设置方法

- Author -

萧曳丶

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
微信小程序（三）：网络请求
Jan 13 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
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
Counter(1) redo log(1) MIME(1) 爬虫(2) 抖音(1) LOGO(1) most_common(1) 写入策略(1) binlog(2) Xpath(1)
You might like
十天学会php之第十天
2006/10/09 PHP
解析isset与is_null的区别
2013/08/09 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现五子棋小程序
2019/06/18 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Whittard官方海外旗舰店：英国百年茶叶品牌
2018/02/22 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
班主任工作经验材料
2014/02/02 职场文书
车间核算员岗位职责
2014/07/01 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
单位委托书范本（3篇）
2014/09/18 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸