首页
所有分类
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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
2022年7月新番(1) 后端(1) Vscode(3) 人人对战(1) 双人对弈(1) tokenizer(1) OVERLORD(1) 时钟(1) 算法(1) SSH(3)
You might like
如何对PHP程序中的常见漏洞进行攻击（下）
2006/10/09 PHP
php预定义变量使用帮助（带实例）
2013/10/30 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python 正则表达式入门（中级篇）
2016/12/07 Python
安装Python的教程-Windows
2017/07/22 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python3 下载网络图片代码实例
2019/08/27 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
世界上最大的二手相机店：KEN
2017/05/17 全球购物
Kusmi茶美国官网：优质散叶茶和茶包
2019/10/13 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
领导党性分析材料
2014/02/15 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
值班管理制度范本
2015/08/06 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
MySQL 数据类型详情
2021/11/11 MySQL