首页
所有分类
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脚本学习 比较实用的基础
Sep 07 Javascript
js 走马灯简单实例
Nov 21 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
用jQuery实现抽奖程序
Apr 12 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
http_stub_status_module(1) 逻辑函数(1) 连接查询(1) BufferPool(1) pongo2(1) 模板引擎(1) element-ui(1) 数据合并(1) 复合索引(1) 缓存机制(1)
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
PHP中Array相关函数简介
2016/07/03 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
nodejs aes 加解密实例
2018/10/10 NodeJs
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python文件如何引入？详解引入Python文件步骤
2018/12/10 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python 多进程、多线程效率对比
2020/11/19 Python
在Python中实现字典反转案例
2020/12/05 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
咖啡厅创业计划书范本
2014/01/22 职场文书
国窖1573广告词
2014/03/21 职场文书
求职信结尾怎么写
2014/05/26 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
人事专员岗位说明书
2014/07/29 职场文书
解除租房协议书
2014/12/03 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
导游词之吉林花园山
2019/10/17 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL