layui.table模組/資料表格文件
阿新 • • 發佈：2018-11-11
Layui_table模組/資料表格文件
table 模組是我們的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的組成之一。它用於對錶格進行一些列功能和動態化資料操作，涵蓋了日常業務所涉及的幾乎全部需求。支援固定表頭、固定行、固定列左/列右，支援拖拽改變列寬度，支援排序，支援多級表頭，支援單元格的自定義模板，支援對錶格過載（比如搜尋、條件篩選等），支援複選框，支援分頁，支援單元格編輯等等一些列功能。儘管如此，我們仍將對其進行完善，在控制程式碼量和效能的前提下，不定期增加更多人性化功能。table 模組也將是 layui 重點維護的專案之一。
建立一個table例項最簡單的方式是，在頁面放置一個元素 <table id="test"></table>，然後通過 table.render() 方法指定該容器，如下所示：
| 10000 | user-0 | 女 | 城市-0 | 簽名-0 | 255 | 57 | 作家 | 82830700 |
| 10001 | user-1 | 男 | 城市-1 | 簽名-1 | 884 | 27 | 詞人 | 64928690 |
| 10002 | user-2 | 女 | 城市-2 | 簽名-2 | 650 | 31 | 醬油 | 6298078 |
| 10003 | user-3 | 女 | 城市-3 | 簽名-3 | 362 | 68 | 詩人 | 37117017 |
| 10004 | user-4 | 男 | 城市-4 | 簽名-4 | 807 | 6 | 作家 | 76263262 |
| 10005 | user-5 | 女 | 城市-5 | 簽名-5 | 173 | 87 | 作家 | 60344147 |
| 10006 | user-6 | 女 | 城市-6 | 簽名-6 | 982 | 34 | 作家 | 57768166 |
| 10007 | user-7 | 男 | 城市-7 | 簽名-7 | 727 | 28 | 作家 | 82030578 |
| 10008 | user-8 | 男 | 城市-8 | 簽名-8 | 951 | 14 | 詞人 | 16503371 |
| 10009 | user-9 | 女 | 城市-9 | 簽名-9 | 484 | 75 | 詞人 | 86801934 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/buddhism-heritage2/layui/css/layui.css">
<script src="/buddhism-heritage2/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: 5px;">
<table id="demo" lay-filter="demo"></table>
<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>
layui.use('table', function(){
var table = layui.table;
//第一個例項
table.render({
elem: '#demo'
,height: 'full-20'
,method:'post'
,skin:'row'
,even:true
,page: true //開啟分頁
,url: '/buddhism-heritage2/building/queryAll' //資料介面
,cols: [[ //表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '住房名稱', width:80}
,{field: 'floor', title: '樓層', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'num', title: '數量', width: 177}
,{field: 'money', title: '價格', width: 80, sort: true}
,{field: 'houseType', title: '房型', width: 80, }
,{field: 'size', title: '大小', width: 80, sort: true}
,{field: 'purpose', title: '用途'}
,{field: 'decorate', title: '裝修'}
,{field: 'year', title: '樓齡', width: 135, sort: true}
,{fixed: 'right', title: '操作', width:178, align:'center', toolbar: '#barDemo'}
]]
});
});
</script>
</body>
</html>
對應的Controller：
@Controller
@RequestMapping("/building")
public class BuildingController {
@Autowired
private BuildingService buildService;
private static ConcurrentMap<String, Object> concurrentMap = new ConcurrentHashMap<String,Object>();
@RequestMapping("/queryAll")
@ResponseBody
public ConcurrentMap<String, Object> queryAllBuilding() {
Integer queryCount = buildService.queryCount();
List<Building> building = buildService.queryAll();
concurrentMap.put("count", queryCount);
concurrentMap.put("data", building);
concurrentMap.put("code", 0);
concurrentMap.put("msg", "成功");
return concurrentMap;
}
}
後臺傳遞的引數格式:
{
code: 200,//資料狀態的欄位名稱，預設：code
msg: "",//狀態資訊的欄位名稱，預設：msg
count: 1000,//資料總數的欄位名稱，預設：count
data: []//資料列表的欄位名稱，預設：data
}
三種渲染方式 在上述“快速使用”的介紹中，你已經初步見證了 table 模組的信手拈來，但其使用方式並不止那一種。我們為了滿足各種情況下的需求，對 table 模組做了三種初始化的支援，你可按照個人喜好和實際情況靈活使用。
| 方式 | 機制 | 適用場景 | |
|---|---|---|---|
| 01. | 方法渲染 | 用JS方法的配置完成渲染 | （推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設定各項引數即可。 |
| 02. | 自動渲染 | HTML配置，自動渲染 | 無需寫過多 JS，可專注於 HTML 表頭部分 |
| 03. | 轉換靜態表格 | 轉化一段已有的表格元素 | 無需配置資料介面，在JS中指定表格元素，並簡單地給表頭加上自定義屬性即可 |
1.方法渲染:
<table id="demo" lay-filter="test"></table>
var table = layui.table;
//執行渲染
table.render({
elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器）
,height: 315 //容器高度
,cols: [{}] //設定表頭
//,…… //更多引數參考右側目錄：基本引數選項
});
其實這是“自動化渲染”的手動模式，本質類似，只是“方法級渲染”將基礎引數的設定放在了JS程式碼中，且原始的 table 標籤只需要一個 選擇器：
事實上我們更推薦採用“方法級渲染”的做法，其最大的優勢在於你可以脫離HTML檔案，而專注於JS本身。尤其對於專案的頻繁改動及釋出，其便捷性會體現得更為明顯。而究竟它與“自動化渲染”的方式誰更簡單，也只能由各位猿猿們自行體味了。
備註：table.render()方法返回一個物件：var tableIns = table.render(options)，可用於對當前表格進行“過載”等操作，詳見目錄：表格過載
2.自動渲染
所謂的自動渲染，即：在一段 table 容器中配置好相應的引數，由 table 模組內部自動對其完成渲染，而無需你寫初始的渲染方法。其特點在上文也有闡述。你需要關注的是以下三點：
1) 帶有 class="layui-table" 的 <table> 標籤。
2) 對標籤設定屬性 lay-data="" 用於配置一些基礎引數
3) 在 <th> 標籤中設定屬性lay-data=""用於配置表頭資訊
按照上述的規範寫好table原始容器後，只要你載入了layui 的 table 模組，就會自動對其建立動態的資料表格。下面是一個示例
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">使用者名稱</th>
<th lay-data="{field:'sex', width:80, sort: true}">性別</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">簽名</th>
<th lay-data="{field:'experience', sort: true}">積分</th>
<th lay-data="{field:'score', sort: true}">評分</th>
<th lay-data="{field:'classify'}">職業</th>
<th lay-data="{field:'wealth', sort: true}">財富</th>
</tr>
</thead>
</table>
3.轉換靜態表格:
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">暱稱</th>
<th lay-data="{field:'experience', width:80, sort:true}">積分</th>
<th lay-data="{field:'sign'}">簽名</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心1</td>
<td>66</td>
<td>人生就像是一場修行a</td>
</tr>
<tr>
<td>賢心2</td>
<td>88</td>
<td>人生就像是一場修行b</td>
</tr>
<tr>
<td>賢心3</td>
<td>33</td>
<td>人生就像是一場修行c</td>
</tr>
</tbody>
</table>
var table = layui.table;
//轉換靜態表格
table.init('demo', {
height: 315 //設定高度
,limit: 10 //注意：請務必確保 limit 引數（預設：10）是與你服務端限定的資料條數一致
//支援所有基礎引數
});
分頁的情況：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/buddhism-heritage2/layui/css/layui.css">
<script src="/buddhism-heritage2/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: 5px;">
<table id="demo" lay-filter="demo"></table>
<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>
layui.use('table', function(){
var table = layui.table;
//第一個例項
table.render({
elem: '#demo'
,height: 'full-20'
,method:'post'
,skin:'row'
,even:true
,page: true //開啟分頁
,url: '/buddhism-heritage2/building/queryAll' //資料介面
,cols: [[ //表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'name', title: '住房名稱', width:80}
,{field: 'floor', title: '樓層', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'num', title: '數量', width: 177}
,{field: 'money', title: '價格', width: 80, sort: true}
,{field: 'houseType', title: '房型', width: 80, }
,{field: 'size', title: '大小', width: 80, sort: true}
,{field: 'purpose', title: '用途'}
,{field: 'decorate', title: '裝修'}
,{field: 'year', title: '樓齡', width: 135, sort: true}
,{fixed: 'right', title: '操作', width:178, align:'center', toolbar: '#barDemo'}
]]
});
//監聽表格複選框選擇
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//監聽工具條
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的檢視操作');
} else if(obj.event === 'del'){
layer.confirm('真的刪除行麼', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('編輯行：<br>'+ JSON.stringify(data))
}
});
var $ = layui.$, active = {
getCheckData: function(){ //獲取選中資料
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //獲取選中數目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('選中了：'+ data.length + ' 個');
}
,isAll: function(){ //驗證是否全選
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全選': '未全選')
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
@Controller
@RequestMapping("/building")
public class BuildingController {
@Autowired
private BuildingService buildService;
private static ConcurrentMap<String, Object> concurrentMap = new ConcurrentHashMap<String,Object>();
@RequestMapping("/queryAll")
@ResponseBody
public ConcurrentMap<String, Object> queryAllBuilding(Integer page,Integer limit) {
Integer queryCount = buildService.queryCount();
System.out.println("進入當前展示商品列表的controller");
List<Building> buildings = buildService.pagePlug(page, limit);
concurrentMap.put("count", queryCount);
concurrentMap.put("data", buildings);
concurrentMap.put("code", 0);
concurrentMap.put("msg", "成功");
return concurrentMap;
}
}
