layui table 参数设置方法

2023-09-09 01:20:04 69

JSp：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%
	Stringpath=request.getContextPath();
	StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>




"rel="externalnofollow">


用户信息表












	查看
	编辑
	删除


	$(function(){
		layui.use(['laydate','laypage','layer','table','carousel','upload','element'],function(){
			varlaydate=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//全局定义常规单元格的最小宽度，layui2.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)
			vardata=obj.data//获得当前行数据
			,layEvent=obj.event;//获得lay-event对应的值
			if(layEvent==='detail'){
			layer.msg('查看操作');
			}elseif(layEvent==='del'){
			layer.confirm('真的删除行么',function(index){
			obj.del();//删除对应行（tr）的DOM结构
			layer.close(index);
			//向服务端发送删除指令
			});
			}elseif(layEvent==='edit'){
			layer.msg('编辑操作');
			}
			});
		});
	});



	
		默认表格

Controller

packagecom.xiaoye.app.controller;

importjava.sql.SQLException;
importorg.apache.log4j.Logger;
importorg.springframework.beans.factory.annotation.Autowired;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.ResponseBody;
importcom.xiaoye.app.common.MsgReturn;
importcom.xiaoye.app.constant.passWordUtil;
importcom.xiaoye.app.entity.User;
importcom.xiaoye.app.service.UserService;
importcom.xiaoye.app.util.PropertyCodeMsgUtil;
importcom.xiaoye.app.util.StringUtil;

@Controller(value="userController")
/**
*
*@authorxiaoye
*@date2018年5月3日
*
*此类的全局访问"user/xxx.do"
*/
@RequestMapping(value="user/")
publicclassUserController{
	@Autowired
	//@Qualifier("userService")
	privateUserServiceuserService;
	privatestaticfinalLoggerlogger=Logger.getLogger(UserController.class);

	@RequestMapping(value="login",method=RequestMethod.POST)
	@ResponseBody
	publicMsgReturnlogin(Useruser){
		if(user==null){
			returnMsgReturn.ERROR_PARAM;
		}
		Stringpassword=user.getPassword();
		if(StringUtil.isEmpty(user.getUsername())||StringUtil.isEmpty(password)){
			returnMsgReturn.ERROR_PARAM;
		}
		user.setPassword(passWordUtil.md5ToRandomMd5(password));
		try{
			returnuserService.login(user);
		}catch(SQLExceptione){
			e.printStackTrace();
			logger.info(PropertyCodeMsgUtil.getPropertyValue(MsgReturn.EXCEPTION_SQL),e);
		}
		returnMsgReturn.ERROR_ERROR;
	}

	@RequestMapping(value="selectUserList",method=RequestMethod.POST)
	@ResponseBody
	publicMsgReturnselectUserList(Useruser){
		try{
			returnuserService.selectUserList(user);
		}catch(SQLExceptione){
			e.printStackTrace();
			logger.info(PropertyCodeMsgUtil.getPropertyValue(MsgReturn.EXCEPTION_SQL),e);
		}
		returnMsgReturn.ERROR_ERROR;
	}
}

返回类型

MsgReturn

packagecom.xiaoye.app.common;

importcom.xiaoye.app.util.PropertyCodeMsgUtil;

/**
*前后台返回数据用的桥接
*
*@authorxiaoye
*@date2018年5月3日
*
*
*/
publicclassMsgReturn{
	
	/**
	*成功/错误码
	*/
	privateStringcode;
	/**
	*提示信息
	*/
	privateObjectmessage;
	/**
	*返回数据
	*/
	privateObjectdata;
	//--------系统错误--------
	/**
	*系统繁忙
	*/
	publicstaticStringERROR="0";
	/**
	*参数错误
	*/
	publicstaticStringERROR_PARAME="1";
	/**
	*登录异常
	*/
	publicstaticStringLOAD_ERROR="2";
	/**
	*登录失败
	*/
	publicstaticStringLOAD_EXCEPTION="3";
	/**
	*無數據
	*/
	publicstaticStringNODATA="4";

	//--------用户错误--------

	/**
	*验证码错误
	*/
	publicstaticStringVERIFICATION_CODE_ERROR="10";
	/**
	*用户名不存在
	*/
	publicstaticStringUSERNAME_NOT_EXIST="11";
	/**
	*密码错误
	*/
	publicstaticStringPASSWOR_ERROR="12";
	/**
	*手机号码长度有误
	*/
	publicstaticStringTEL_LENGTH_ERROR="13";
	/**
	*请输入正确的手机号
	*/
	publicstaticStringTEL_IS_FALSE="14";
	/**
	*邮箱格式有误
	*/
	publicstaticStringEMAIL_FORMAT_ERROR="15";
	
	/**---------------300异常
	*数据库异常
	*/
	publicstaticStringEXCEPTION_SQL="300";
	
	/**
	*成功
	*/
	publicstaticStringSUCCESS="200";
	
	privateIntegertotalCount;
	/**
	*系统繁忙
	*/
	publicstaticMsgReturnERROR_ERROR=newMsgReturn(ERROR,PropertyCodeMsgUtil.getPropertyValue(ERROR));
	/**
	*参数错误
	*/
	publicstaticMsgReturnERROR_PARAM=newMsgReturn(ERROR_PARAME,PropertyCodeMsgUtil.getPropertyValue(ERROR_PARAME));

	/**
	*操作成功
	*/
	publicstaticMsgReturnSuccessMsg=newMsgReturn(SUCCESS,PropertyCodeMsgUtil.getPropertyValue(SUCCESS));


	publicMsgReturn(Stringcode,Stringmessage){
		this.code=code;
		this.message=message;
	}


	publicMsgReturn(Stringcode,Objectmessage,Objectdata){
		super();
		this.code=code;
		this.message=message;
		this.data=data;
	}

	publicMsgReturn(Stringcode,Objectmessage,Objectdata,IntegertotalCount){
		super();
		this.code=code;
		this.message=message;
		this.data=data;
		this.totalCount=totalCount;
	}

	publicstaticMsgReturnsuccess(Objectdata){
		returnnewMsgReturn(SUCCESS,PropertyCodeMsgUtil.getPropertyValue(SUCCESS),data);
	}

	publicstaticMsgReturnsuccess(Objectmessage,Objectdata){
		returnnewMsgReturn(SUCCESS,message,data);
	}

	publicstaticMsgReturnERROR(Objectdata){
		returnnewMsgReturn(ERROR_PARAME,null,data);
	}
	publicstaticMsgReturnNODATA(){
		returnnewMsgReturn(NODATA,PropertyCodeMsgUtil.getPropertyValue(NODATA),null);
	}
	/**
	*参数错误
	*
	*@return
	*/
	publicstaticMsgReturnPARAM_ERROR(){
		returnnewMsgReturn(ERROR_PARAME,PropertyCodeMsgUtil.getPropertyValue(ERROR_PARAME),null);
	}

	publicStringgetCode(){
		returncode;
	}

	publicvoidsetCode(Stringcode){
		this.code=code;
	}

	publicObjectgetMessage(){
		returnmessage;
	}

	publicvoidsetMessage(Stringmessage){
		this.message=message;
	}

	publicObjectgetdata(){
		returndata;
	}

	publicvoidsetdata(Objectdata){
		this.data=data;
	}


	publicIntegergetTotalCount(){
		returntotalCount;
	}


	publicvoidsetTotalCount(IntegertotalCount){
		this.totalCount=totalCount;
	}


	publicvoidsetMessage(Objectmessage){
		this.message=message;
	}


	@Override
	publicStringtoString(){
		return"MsgReturn[code="+code+",message="+message+",data="+data+",totalCount="
				+totalCount+"]";
	}

}

以上这篇layuitable参数设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

layui table 参数设置方法

热门推荐

随机推荐