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; //元素操作 //監(jiān)聽Tab切換 element.on('tab(demo)', function(data){ layer.msg('切換了：'+ this.innerHTML); console.log(data); }); //執(zhí)行一個 table 實例 table.render({ elem: '#userList' ,height: 'full' ,url: 'user/selectUserList.do' //數(shù)據(jù)接口 ,method: 'POST' ,cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增 ,page: { //支持傳入 laypage 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局 //,curr: 5 //設(shè)定初始在第 5 頁 ,groups: 5 //只顯示 5 個連續(xù)頁碼 ,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: '創(chuàng)建時間', width: 200} ,{field: 'isDelete', title: '是否刪除', width: 200, sort: true} ,{fixed: 'right', title:'操作' , width: 200, align:'center', toolbar: '#barDemo'} ]] ,where : { //傳值 startDate : startDate, } ,response: { statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱，默認：code ,statusCode: 200 //成功的狀態(tài)碼，默認：0 ,msgName: 'message' //狀態(tài)信息的字段名稱，默認：msg ,countName: 'totalCount' //數(shù)據(jù)總數(shù)的字段名稱，默認：count ,dataName: 'data' //數(shù)據(jù)列表的字段名稱，默認：data }/* , done: function(res, curr, count){ //如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。 //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度 console.log(res.data); //得到當(dāng)前頁碼 console.log(curr); //得到數(shù)據(jù)總量 console.log(count); } */ }); //監(jiān)聽工具條 table.on('tool(userList)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應(yīng)的值" console.log(obj) var data = obj.data //獲得當(dāng)前行數(shù)據(jù) ,layEvent = obj.event; //獲得 lay-event 對應(yīng)的值 if(layEvent === 'detail'){ layer.msg('查看操作'); } else if(layEvent === 'del'){ layer.confirm('真的刪除行么', function(index){ obj.del(); //刪除對應(yīng)行（tr）的DOM結(jié)構(gòu) layer.close(index); //向服務(wù)端發(fā)送刪除指令 }); } 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>
新聞熱點
疑難解答
圖片精選
