首页
所有分类
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字符串处理实例代码
Aug 05 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
jquery实现聊天机器人
Feb 08 jQuery
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
TECSUN(1) 东方红(1) 接收机(2) 电子管(5) 德生(17) 修复(2) DSP(2) 海燕B411(1) 车机(1) PL-365(1)
You might like
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Javascript 个人笔记（没有整理，很乱）
2007/07/07 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
jQuery.each使用详解
2015/07/07 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Anaconda入门使用总结
2018/04/05 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python 中字典嵌套列表的方法
2018/07/03 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
英国奢侈品牌时尚购物平台：Farfetch（支持中文）
2020/02/18 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
运动会表扬稿大全
2014/01/16 职场文书
村庄绿化方案
2014/05/07 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
Win11黑色桌面背景怎么办？Win11黑色壁纸解决方法汇总
2022/04/05 数码科技