layui table 完整例項
阿新 • • 發佈：2019-01-08
1、layui 搜尋
var $ = layui.$, active = { reload: function () { debugger var countyId = $("#countyId option:selected").val(); var fwzt = $('#fwzt').val(); //執行過載 table.reload('workReload', { // table 的id page: { page: 1 //重新從第 1 頁開始 } , where: { // 條件 pId: "12", cId: "112", oId:countyId, fwzt:fwzt } }); } } $('.demoTable .layui-btn').on('click', function(){ // 點選搜尋 var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });
2、 表格序號列
<script type="text/html" id="indexTpl">
{{d.LAY_TABLE_INDEX+1}}
</script>
3、layui 操作列
//監聽工具條 table.on('tool(work)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" debugger; var data = obj.data; //獲得當前行資料 var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值） var tr = obj.tr; //獲得當前行 tr 的DOM物件 if(layEvent === 'detail'){ //檢視 //do somehing } }); <script type="text/html" id="toolbar"> // id為 cols toolbar的值 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">檢視</a> <%-- <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>--%> </script> cols: [[ {field:'',title: '操作',toolbar:'#toolbar', align:'center',width:150}]]
4、直接上程式碼 layui table 完整例項
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>阜陽農業生產服務資訊化管理平臺</title> <%@ include file="/WEB-INF/jsp/includes/common.jsp" %> <%@ include file="/WEB-INF/jsp/includes/common_css.jsp" %> <link rel="stylesheet" href="${base}/css/index.css"> <link rel="stylesheet" href="${base}/css/zuoye.css"> <%@ include file="/WEB-INF/jsp/includes/common_js.jsp" %> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dvRC4bVv5hy5GLqjycysGaGc9BdHvnsG"></script> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <%--公共頭部--%> <%@ include file="/WEB-INF/jsp/includes/header_common.jsp"%> <%--左側選單--%> <%@ include file="/WEB-INF/jsp/includes/left_common.jsp"%> <!--搜尋框--> <div class="select"> <div class="layui-form-item"> <label class="layui-form-label">區域</label> <div class="layui-input-inline"> <%--<input type="text" readonly value="安徽省" name="12" id="pId">--%> <select name="quiz1"> <option value="12" >安徽省</option> </select> </div> <div class="layui-input-inline"> <select name="quiz2"> <option value="112">阜陽市</option> </select> </div> <div class="layui-input-inline"> <select name="quiz3" id="countyId"> <option value="">請選擇縣/區</option> <option value="1">西湖區</option> <option value="2">餘杭區</option> <option value="3">臨安市</option> </select> </div> <label class="layui-form-label">服務主體</label> <div class="layui-input-inline"> <input type="text" placeholder="輸入服務主體名稱" id="fwzt"> </div> <div class="demoTable"> <button class="layui-btn searchBtn" data-type="reload">查詢</button> </div> </div> </div> <!--主體--> <div class="layui-body"> <!--table--> <table class="layui-hide" id="work" lay-filter="work"></table> <%-- <div id="pageList"></div>--%> </div> </div> <div class="footer"> <!-- 底部版權 --> <p> Copyright © 2008-2018 大田農社（www.datian360.com）版權所有<br/> 京ICP備14027879 </p> </div> <script type="text/html" id="indexTpl"> {{d.LAY_TABLE_INDEX+1}} </script> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#work' ,url:base+ 'work/ajax/toWorkList.htm' ,method:"post" ,id: 'workReload' // ,skin: 'line' //表格風格 // ,even: true ,limit: 15 //每頁預設顯示的數量 ,limits:[10,15,20,25,50] // ,cellMinWidth: 80 //全域性定義常規單元格的最小寬度，layui 2.2.1 新增 ,where: { pId: "12",cId: "112"}, //請求後端介面的條件，該處就是條件錯誤點，按照官方給出的程式碼示例，原先寫成了 where: { key : { type: "all" } }，結果並不是我想的那樣，如此寫，key 將是後端的一個類作為引數，裡面有 type 屬性，如果誤以為 key 是 Layui 提供的格式，那就大錯特錯了 response: { //定義後端 json 格式，詳細參見官方文件 statusName: 'status', //狀態欄位名稱 statusCode: '1', //狀態欄位成功值 msgName: 'errMsg', //訊息欄位 countName: 'total', //總數字段 dataName: 'data' //資料欄位 } // ,page: true //是否顯示分頁 ,page: { //支援傳入 laypage 元件的所有引數（某些引數除外，如：jump/elem） - 詳見文件 layout: ['limit', 'prev', 'page', 'next', 'skip'] //自定義分頁佈局 //,curr: 5 //設定初始在第 5 頁 ,groups: 3 //只顯示 1 個連續頁碼 ,first: false //不顯示首頁 ,last: false //不顯示尾頁 } ,cols: [[ {field:'',title: '序號',templet: '#indexTpl', align:'center',width:100} ,{field:'villageName', title: '作業環節', align:'center'} ,{field:'tljzp', title: '農機名稱', align:'center',templet:function(d){ if(null == d.tljzp){ return "暫無資料" }else{ return d.tljzp; } }} ,{field:'sbxlh', title: '監控編號', align:'center'} ,{field:'njhzs', title: '服務主體', align:'center'} //width 支援：數字、百分比和不填寫。你還可以通過 minWidth 引數區域性定義當前單元格的最小寬度，layui 2.2.1 新增 , { field: 'workTime', title: '總時長', align:'center', templet: function (d) { if (null == d.dtNjStatiDto.workTime) { return "暫無資料" } else { return d.dtNjStatiDto.workTime + "小時"; } } } , { field: 'workMile', title: '總里程', align:'center', templet: function (d) { if (null == d.dtNjStatiDto.workMile) { return "暫無資料" } else { return d.dtNjStatiDto.workMile + "公里"; } } } ,{field:'effecArea', title: '總面積', align:'center',templet:function(d){ if(null == d.dtNjStatiDto.effecArea){ return "暫無資料" }else{ return d.dtNjStatiDto.effecArea + "畝"; } }} ,{field:'',title: '操作',toolbar:'#toolbar', align:'center',width:150} ]] }); //監聽工具條 table.on('tool(work)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" debugger; var data = obj.data; //獲得當前行資料 var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值） var tr = obj.tr; //獲得當前行 tr 的DOM物件 if(layEvent === 'detail'){ //檢視 //do somehing } }); var $ = layui.$, active = { reload: function () { debugger var countyId = $("#countyId option:selected").val(); var fwzt = $('#fwzt').val(); //執行過載 table.reload('workReload', { page: { page: 1 //重新從第 1 頁開始 } , where: { pId: "12", cId: "112", oId:countyId, fwzt:fwzt } }); } } $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script> <script type="text/html" id="toolbar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">檢視</a> <%-- <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>--%> </script> </body> </html>