LayUI入門基礎篇4（樂位元組架構、大資料）
分頁
如果需要更多資料點選下方圖片加好友領取⬇（註明來意）
模組載入名稱：laypage
快速使用
laypage 的使用非常簡單，指向一個用於存放分頁的容器，通過服務端得到一些初始值，即可完成分頁渲染。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分頁</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="test1"></div> </body> <script src="layui/layui.js"></script> <script type="text/javascript"> layui.use('laypage', function(){ var laypage = layui.laypage; //執行一個laypage例項 laypage.render({ elem: 'test1' //注意，這裡的 test1 是 ID，不用加 # 號 ,count: 50 //資料總數，從服務端得到 }); }); </script> </html>
基礎引數
通過核心方法：laypage.render(options) 來設定基礎引數。
| 引數選項 | 說明 | 型別 | 預設值 |
|---|---|---|---|
| elem | 指向存放分頁的容器，值可以是容器ID、DOM物件。如： 1. elem: 'id' 注意：這裡不能加 # 號 2. elem: document.getElementById('id') | String/Object | - |
| count | 資料總數。一般通過服務端得到 | Number | - |
| limit | 每頁顯示的條數。laypage將會藉助 count 和 limit 計算出分頁數。 | Number | 10 |
| limits | 每頁條數的選擇項。如果 layout 引數開啟了 limit，則會出現每頁條數的select選擇框 | Array | [10, 20, 30, 40, 50] |
| curr | 起始頁。一般用於重新整理型別的跳頁以及HASH跳頁。如： // 開啟location.hash的記錄 laypage.render({ elem: 'test1' , count: 500 , // 獲取起始頁 curr: location.hash.replace('#!fenye=', '') // 自定義hash值 ,hash: 'fenye' }); ` |
Number | 1 |
| groups | 連續出現的頁碼個數 | Number | 5 |
| prev | 自定義“上一頁”的內容，支援傳入普通文字和HTML | String | 上一頁 |
| next | 自定義“下一頁”的內容，同上 | String | 下一頁 |
| first | 自定義“首頁”的內容，同上 | String | 1 |
| last | 自定義“尾頁”的內容，同上 | String | 總頁數值 |
| layout | 自定義排版。可選值有：count（總條目輸區域）、prev（上一頁區域）、page（分頁區域）、next（下一頁區域）、limit（條目選項區域）、refresh（頁面重新整理區域。注意：layui 2.3.0 新增） 、skip（快捷跳頁區域） | Array | ['prev', 'page', 'next'] |
| theme | 自定義主題。支援傳入：顏色值，或任意普通字元。如： 1. theme: '#c00' 2. theme: 'xxx' //將會生成 class="layui-laypage-xxx" 的CSS類，以便自定義主題 | String | - |
| hash | 開啟location.hash，並自定義 hash 值。如果開啟，在觸發分頁時，會自動對url追加：#!hash值={curr} 利用這個，可以在頁面載入時就定位到指定頁 | String/Boolean | false |
jump - 切換分頁的回撥
當分頁被切換時觸發，函式返回兩個引數：obj（當前分頁的所有選項值）、first（是否首次，一般用於初始載入的判斷）
laypage.render({
elem: 'page'
,count: 100 //資料總數，從服務端得到
,groups:10 // 連續出現的頁碼個數
,layout:['prev', 'page', 'next','limit','count'] // 自定義排版
,limits:[5,10,20] // layout屬性設定了limit值，可會出現條數下拉選擇框
,jump: function(obj, first){
// obj包含了當前分頁的所有引數，比如：
console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的資料。
console.log(obj.limit); //得到每頁顯示的條數
//首次不執行
if(!first){
//do something
}
}
});
資料表格
模組載入名稱：table
快速使用
建立一個table例項最簡單的方式是，在頁面放置一個元素 ，然後通過 table.render() 方法指定該容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table資料表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table id="demo"></table>
</body>
<script src="layui/layui.js" type="text/javascript" ></script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 第一個例項
table.render({
elem: '#demo'
,url: 'user.json' // 資料介面
,cols: [[ // 表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '使用者名稱', width:80}
,{field: 'sex', title: '性別', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '簽名', width: 177}
]]
});
});
</script>
</html>
資料介面 user.json
{
"code": 0,
"msg": "",
"count": 50,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "簽名-0"
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "簽名-1"
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "簽名-2"
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "簽名-3"
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "簽名-4"
}
]
}
三種初始化渲染方式
| 機制 | 適用場景 | |
|---|---|---|
| 方法渲染 | 用JS方法的配置完成渲染 | （推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設定各項引數即可。 |
| 自動渲染 | HTML配置，自動渲染 | 無需寫過多 JS，可專注於 HTML 表頭部分 |
| 轉換靜態表格 | 轉化一段已有的表格元素 | 無需配置資料介面，在JS中指定表格元素，並簡單地給表頭加上自定義屬性即可 |
方法渲染
-
將基礎引數的設定放在了JS程式碼中，且原始的 table 標籤只需要一個選擇器
<table id="demo"></table> -
渲染表格
layui.use('table', function(){ var table = layui.table; // 執行渲染 table.render({ elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器） ,url: 'user.json' // 資料介面 ,height: 315 // 容器高度 ,page:true // 開啟分頁 ,cols: [[ // 設定表頭 {field: 'id', title: 'ID'} ,{field: 'username', title: '使用者名稱'} ,{field: 'sex', title: '性別'} ]] }); });注：table.render()方法返回一個物件：var tableIns = table.render(options)，可用於對當前表格進行“過載”等操作。
自動渲染
在一段 table 容器中配置好相應的引數，由 table 模組內部自動對其完成渲染，而無需你寫初始的渲染方法。
1) 帶有 class="layui-table" 的 頁面已經存在了一段有內容的表格，由原始的table標籤組成，只需要賦予它一些動態元素。 執行用於轉換表格的JS方法 標籤。
2) 對標籤設定屬性 lay-data="" 用於配置一些基礎引數
3) 在 標籤中設定屬性lay-data=""用於配置表頭資訊
<table class="layui-table" lay-data="{url:'user.json'}">
<thead>
<tr>
<th lay-data="{field:'id'}">ID</th>
<th lay-data="{field:'username'}">使用者名稱</th>
<th lay-data="{field:'sex', sort: true}">性別</th>
</tr>
</thead>
</table>
轉換靜態表格
<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>
</tbody>
</table>
layui.use('table', function(){
var table = layui.table;
// 轉換靜態表格
table.init('demo', {
height: 315 // 設定高度
// 支援所有基礎引數
});
});
基礎引數使用的場景
// 場景一：下述方法中的鍵值即為基礎引數項
table.render({
height: 300
,url: 'user.json'
});
// 場景二：下述 lay-data 裡面的內容即為基礎引數項，切記：值要用單引號
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>
// 更多場景：下述 options 即為含有基礎引數項的物件
> table.init('filter', options); // 轉化靜態表格
> var tableObj = table.render({});
tableObj.reload(options); // 過載表格
開啟分頁
<!-- HTML程式碼 -->
<table id="demo"></table>
// JS實現程式碼
layui.use('table', function(){
var table = layui.table;
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 資料介面
,height: 315 // 容器高度
,page:true // 開啟分頁
,cols: [[ // 設定表頭
{field: 'id', title: 'ID'}
,{field: 'username', title: '使用者名稱'}
,{field: 'sex', title: '性別'}
]]
});
});
開啟頭部工具欄
<table id="demo" lay-filter="demo"></table>
<!-- 表格工具欄 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event 給元素繫結事件名 -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
獲取選中行資料
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
獲取選中數目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
驗證是否全選
</button>
</div>
</script>
<!-- 表頭工具欄 -->
<script type="text/html" id="barDemo">
<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>
layui.use('table', function(){
var table = layui.table;
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 資料介面
,height: 315 // 容器高度
,page:true // 開啟分頁
,cols: [[ // 設定表頭
{field: 'id', title: 'ID'}
,{field: 'username', title: '使用者名稱'}
,{field: 'sex', title: '性別'}
,{title:'操作', toolbar: '#barDemo'} // 繫結表頭工具欄
]]
,toolbar: '#toolbarDemo' // 開啟頭部工具欄，併為其繫結左側模板
});
/**
* 頭工具欄事件
* 語法：
table.on('toolbar(demo)', function(obj){
});
注：demo表示選擇器元素上設定的lay-filter屬性值
*/
table.on('toolbar(demo)', function(obj){
// obj.config.id 當前選擇器的id屬性值，即demo
// 獲取當前表格被選中的記錄物件，返回陣列
var checkStatus = table.checkStatus(obj.config.id);
// obj.event 得到當前點選元素的事件名
switch(obj.event){
case 'getCheckData':
// 獲取被選中的記錄的陣列
var data = checkStatus.data;
// 將陣列資料解析成字串
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('選中了：'+ data.length + ' 個');
break;
case 'isAll':
// checkStatus.isAll 判斷記錄是否被全選
layer.msg(checkStatus.isAll ? '全選': '未全選');
break;
// 自定義頭工具欄右側圖示 - 提示
case 'LAYTABLE_TIPS':
layer.alert('這是工具欄右側自定義的一個圖示按鈕');
break;
};
});
/**
* 監聽行工具事件
*/
table.on('tool(demo)', function(obj){
// 得到當前操作的tr的相關資訊
var data = obj.data;
if(obj.event === 'del'){
// 確認框
layer.confirm('真的刪除行麼', function(index){
// 刪除指定tr
obj.del();
// index 當前彈出層的下標，通過下標關閉彈出層
layer.close(index);
});
} else if(obj.event === 'edit'){
// 輸入框
layer.prompt({
// 表單元素的型別 0=文字框 1=密碼框 2=文字域
formType: 0
,value: data.username
}, function(value, index){
// 修改指定單元格的值
// value表示輸入的值
obj.update({
username: value
});
// 關閉彈出層
layer.close(index);
});
}
});
});
開啟單元格編輯
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'id', sort: true}">ID</th>
<th lay-data="{field:'username', sort: true, edit: 'text'}">使用者名稱</th>
<th lay-data="{field:'sex', edit: 'text'}">性別</th>
<th lay-data="{field:'city', edit: 'text'}">城市</th>
<th lay-data="{field:'experience', sort: true, edit: 'text'}">積分</th>
</tr>
</thead>
</table>
layui.use('table', function(){
var table = layui.table;
// 監聽單元格編輯
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改後的值
,data = obj.data // 得到所在行所有鍵值
,field = obj.field; // 得到欄位
layer.msg('[ID: '+ data.id +'] ' + field + ' 欄位更改為：'+ value);
});
});
資料表格的過載
<div class="demoTable">
搜尋ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜尋</button>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
layui.use('table', function(){
var table = layui.table;
var $ = layui.jquery; // 獲取jquery物件
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 資料介面
,page:true // 開啟分頁
,cols: [[ // 設定表頭
{type: 'checkbox', fixed: 'left'} // 設定複選框
,{field: 'id', title: 'ID'}
,{field: 'username', title: '使用者名稱'}
,{field: 'sex', title: '性別'}
]]
});
// 給指定元素繫結事件
$(document).on('click', '#searchBtn', function(data) {
// 獲取搜尋框物件
var demoReload = $('#demoReload');
table.reload('demo', {
where: { // 設定非同步資料介面的額外引數，任意設
id: demoReload.val()
}
,page: {
// 讓條件查詢從第一頁開始查詢，不寫則從當前頁開始查詢，此頁之前的資料將不納入條件篩選
curr: 1 // 重新從第 1 頁開始
}
}); // 只過載資料
});
});