layui表格對數據進行用table樣式展現
舉個例子:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>layui表格div容器</title> 6 </head> 7 <body> 8 <div id=“container”></div> 9 </body> 10 </html>
首先引入layui,jquery等插件 展示為js部分
1 <script> 2 layui.use('table', function(){ 3 var table = layui.table; 4 5 table.render({ 6 elem: '#container', //綁定控件，為html頁面容器id 7 id：‘container’, //定義id 8 page:true, //開啟分頁 9 height：‘full’, 10 width ：$(document.body).width(), 11 url:'/demo/table/user/', //路徑 12 method：‘post’, //請求方式 13 where ：‘＿where’, //查詢條件 14 cellMinWidth: 80, //定義單元格（列）的最寬度， 15 request:{//重新指定響應參數名稱 16 pageName:'page', 17 limitName:'pageSize', 18 } 19 response:{ 20 countName:'allcount' 21 } 22 cols: [[ 23 {field:'id', width:80, title: 'ID', sort: true} 24 ,{field:'username', width:80, title: '用戶名'} 25 ,{field:'sex', width:80, title: '性別', sort: true} 26 ,{field:'city', width:80, title: '城市'} 27 ,{field:'sign', title: '簽名', width: '30%', minWidth: 100} //minWidth：局部定義當前單元格的最小寬度，layui 2.2.1 新增 28 ,{field:'experience', title: '積分', sort: true} 29 ,{field:'score', title: '評分', sort: true} 30 ,{field:'classify', title: '職業'} 31 ,{title:'操作', width:'137',align:'center',templet:initDetail}, 32 ]] 33 }); 34 }); 35 </script>
基本參數:
filed為數據庫的字段名(與字段名相符和)
title為展示表格的表頭
limit為每頁顯示的條數(默認:10)。值務必對應 limits 參數的選項
limits為每頁條數的選擇項,例:[5,10,15]
width為表格列的寬度(可自適應寬度,不設置寬度)
sort為是否允許排序(默認:false),設置true對列開啟排序功能
templet設置回調函數 后面加方法名
詳情操作按鈕顯示於操作列 d為當前條數的所有值(格式為object)
1 function initDetail(d){ 2 return '<div><span class="operatestyle" onclick="showDetail(\''+d.caseid+'\')">詳情</span></div>' 3 }
點擊詳情,查看詳情頁.此方法跳轉路徑需要先引ExtendForm.js插件 target控制打開方式 此方法傳遞為用post傳遞 在展示詳情頁可用post直接接收數組值
1 function showDetail(d){ 2 var data = {}; 3 data['字段id']=d; 4 參數傳遞... 5 ExtendForm.init({action:'路徑',target:'_blank'}).bind(data).send(); 6 }