layui table 参数设置方法
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 参数设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
layui 监听表格复选框选中值的方法
需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)
-
layui表格实现代码
本文实例为大家分享了layui基本表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本表格</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <bod
-
LayUI表格批量删除方法
一:监听复选框事件 var checkedArr=[]; table.on('checkbox(demo)', function(obj){ if (obj.type=='all') return; if (obj.checked){ checkedArr.push(obj.data.LAY_TABLE_INDEX); //checkedArr[obj.data.id] = obj.data.LAY_TABLE_INDEX } else{ delete checkedArr[obj.data.L
-
layui table 参数设置方法
JSp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
-
Linux环境下Oracle安装参数设置方法详解
前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作. 1.系统信息查看 系统信息查看 首先服务器ip:192.168.8.120 服务器系统:Oracle Linux Server release 6.5 服务器主机名:oracle-learn 查看磁盘空间情况: [root@oracle-learn ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 32G 4.8G 26G
-
pandas读取csv格式数据时header参数设置方法
目录 写在前面 参考文档 read_csv的header参数 header参数测试 思考 写在前面 使用pandas中read_csv读取csv数据时,对于有表头的数据,将header设置为空(None),会报错:pandas_libs\parsers.pyx in pandas._libs.parsers.raise_parser_error() ParserError: Error tokenizing data. C error: Expected 4 fields in line 2,
-
MSDOS.SYS文件的参数设置方法
在MS-DOS 6.x及以下版本中,MSDOS.SYS是一个非常重要的启动文件.不过,到了MS-DOS 7.x版本中,MSDOS.SYS变成了一个设置文件,有点类似CONFIG.SYS,仍具有较大的作用.现在介绍一下MSDOS.SYS文件中[Options]项中的一些设置. AutoScan:非正常关机后下次启动是否运行 ScanDisk. BootDelay:开机时热键按下前的等待时间(单位:秒). BootGUI:启动时是否进入Windows的GUI界面,0代表不进入WIN,而是纯MS-DO
-
layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行tr,修改其样式中的颜色. //设置layui datatable的某一行的颜色 //TabDivId:tab父div id;RowIndex:行序列号,从0开始:ColorString:颜色字符串,如'#123456' function Layui_SetDataTableRowColor(Tab
-
layui table设置前台过滤转义等方法
如下所示: {field: 'username', title: '用户名', width:80,style:'height:100px;',templet: '#titleTpl'} 然后再最后加上 <script type="text/html" id="titleTpl"> {{# if(d.username=='user-0'){ }} 转义用户0 {{# } else if(d.username=='user-1') { }} 转义用户1 {{
-
layui table 表格上添加日期控件的两种方法
方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: "auto" , id: "tbtxrz" , text: {none: '暂无相关数据'} , toolbar: toolbartxrz , cols: [[ { //设置表格中部分字体的颜色 field: "number", title: "序
-
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当
-
详解layui弹窗父子窗口之间传参数的方法
本文介绍了layui弹窗父子窗口之间传参数的方法,分享给大家,具体如下: 1.父页面打开子页面并向子页面传参数 function setChooseValues(ret){ var oView = document.getElementById("userName"); var oValue = document.getElementById("userIds"); var i = 0; if( ret != null){ oValue.value="&q
-
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
我们想要在bootstrap-table中自定义查询条件如何实现呢?这些自定义的按钮.输入框是定义在哪个位置呢?还记得上一节中我们在配置中有这样一个属性: //工具按钮用哪个容器 toolbar: '#toolbar', <div id="toolbar"></div> 我们定义的查询条件就是放入到这个div中的,先看一下我们期望的效果: 要实现这样的效果,我们首先要新增查询表单: <div class="container">