layui table 詳細講解


<%@ 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%>">
<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">
    -->
<link rel="stylesheet" type="text/css"
    href="js/layui-v2.2.6/layui/css/layui.css" 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;
    }
}

返回類型

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 + "]";
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM