layui table 参数设置方法

程序员文章站 2023-09-07 15:44:51

jsp： <%@ page language="java" import="java.util.*" pageencoding="utf-8"%>...

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";
	/**
	 * 無數據
	 */
	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 参数设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： python解析json串与正则匹配对比方法

下一篇： layui结合form,table的全选、反选v1.0示例讲解

layui table 参数设置方法

监听element-ui table滚动事件的方法

mysql中错误：1093-You can’t specify target table for update in FROM clause的解决方法

bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法

LayUI动态设置checkbox不显示的解决方法

iview table高度动态设置方法

在layui中layer弹出层点击事件无效的解决方法

Layui数据表格跳转到指定页的实现方法

MySQL出现Waiting for table metadata lock的原因方法

layui table设置某一行的字体颜色方法

layui table去掉右侧滑动条的实现方法