JSp:

永利开户送38元体验金,如下所示:

<%@ 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>
<table class="layui-table" lay-filter="demo11" id="test11"></table>

//js 规范书写

var tst=table.render({
 elem: '#test11'
 ,cols: [[ //标题栏
 {checkbox: true}
 ,{field: 'pay_ct_time', title: '创建时间', width: 80}
 ,{field: 'paycard', title: '流水编号', width: 120}
 ]]
 ,url: '/pay/getlist/?<?PHP echo $_SERVER["QUERY_STRING"]; ?>'
});

Controller

如上那篇layui框架table
数据表格的法子级渲染详解便是作者分享给我们的全体内容了,希望能给大家四个参照,也盼望大家多多支持脚本之家。

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;
 }
}

您恐怕感兴趣的稿子:

  • 基于layui数据表格以及传数据的形式
  • Layui table
    组件的施用之起首化加载数据、数据刷新表格、传参数
  • layui前端框架之table表数据的基础代谢方法
  • LayUi中接口传数据成功,表格不出示数据的减轻方式
  • 行使layui
    渲染table数据表格的实例代码

回到类型

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
参数设置方法正是小编分享给大家的全体内容了,希望能给大家2个参照,也旨在大家多多扶助脚本之家。

您大概感兴趣的稿子:

  • layui
    监听表格复选框选中值的法子
  • layui表格完成代码
  • LayUI表格批量去除方法

相关文章