導語:
layui是由職業前端傾情打造,面向全層次的前後端開發者,低門檻開箱即用的前端 UI 解決方案。
layui 的 table模組是一個重頭,在基礎參數方面盡可能地友好,即:保證功能的前提而又避免過於繁雜的配置。基礎參數一般會出現在以下幾個場景:
场景一:下述 lay-data 里面的内容即为基础参数项,切记:值要用单引号 <table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table> 场景二:下述方法中的键值即为基础参数项 table.render({ height: 300 ,url: '/api/data' }); 更多场景:下述options即为含有基础参数项的对象 > table.init('filter', options); //转化静态表格 > var tableObj = table.render({}); tableObj.reload(options); //重载表格
接下來看一下基礎元素有哪些?
1、elem - 綁定元素是指定原始table容器,只適用於 table.render()的渲染方式
HTML: <table id="test"></table> JS: table.render({ //其它参数在此省略 elem: '#test' //或 elem: document.getElementById('test') 等 });
2、設定表頭,這裡包含很多值,是一個二維數組。如果你採用表格的“方法級渲染”,那麼你需要藉助該參數來設定表格。如:
JS: table.render({ cols: [[ //标题栏 {checkbox: true} ,{field: 'id', title: 'ID', width: 80} ,{field: 'username', title: '用户名', width: 120} ]] }); 它等价于: <table class="layui-table" lay-data="{基础参数}" lay-filter="test"> <thead> <tr> <th lay-data="{checkbox:true}"></th> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:180}">用户名</th> </tr> </thead> </table>
下面是一個二級表頭的範例:
JS: table.render({ cols: [[ //标题栏 {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数 ,{field: 'amount', title: '金额', width: 80, rowspan: 2} ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数,这种情况下不用设置field和width ], [ {field: 'province', title: '省', width: 80} ,{field: 'city', title: '市', width: 120} ,{field: 'county', title: '详细', width: 300} ]] }); 它等价于: <table class="layui-table" lay-data="{基础参数}"> <thead> <tr> <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th> <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th> <th lay-data="{align:'center'}" colspan="3">地址</th> </tr> <tr> <th lay-data="{field:'province', width:80}">省</th> <th lay-data="{field:'city', width:120}">市</th> <th lay-data="{field:'county', width:300}">详细</th> </tr> </thead> </table>
需要說明的是,table模組支援無限極表頭,你可按照上述的方式繼續擴充。核心點在於 rowspan 和 colspan 兩個參數的
接下來是表頭裡的一些參數設定
f35d6e602fd7d0f0edfa6f7d103c1b57 field:設定欄位名稱
table.render({ cols: [[ {field: 'id'} //其它参数在此省略 ,{field: 'username'} ]] }); 等价于: <th lay-data="{field:'id'}"></th> <th lay-data="{field:'username'}"></th>
< ;2> title:設定標題名稱
table.render({ cols: [[ {title: '邮箱'} //其它参数在此省略 ,{title: '签名'} ]] }); 等价于: <th lay-data="{}">邮箱</th> (PS:也可以把标题写在lay-data里面,即 title:'邮箱') <th lay-data="{}">签名</th>
5bdf4c78156c7953567bb5a0aef2fc53 width:設定列寬。列寬的設定也通常是必須的(「特殊列」除外,如:複選框列、工具列等),它關係到表格的整體美觀程度。
table.render({ cols: [[ {width: 80} //其它参数在此省略 ,{width: 120} ]] }); 等价于: <th lay-data="{width:80}"></th> <th lay-data="{width:120}"></th>
23889872c2e8594e0f446a471a78ec4c checkbox:設定複選框。如果設定 true,則表示該列內容為複選框,通常它被放在第一列。
table.render({ cols: [[ {checkbox: true} //其它参数在此省略 ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{checkbox:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
還有要注意的是,這裡的LAY_CHECKED是跟checkbox搭配使用的,如果設定 true,表示複選框預設全部選取。
table.render({ cols: [[ {checkbox: true, LAY_CHECKED: true} //其它参数在此省略 ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{checkbox:true, LAY_CHECKED: true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
43ad812d3a971134e40facaca816c822 space:設定空隙列。如果設定 true,定義一個 15px 寬度無任何內容的欄位。
table.render({ cols: [[ //其它参数在此省略 {space: true} ,{field: 'id', title:'ID', width: 100} ]] }); 等价于: <th lay-data="{space:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
efbfa0de8737dc86eae413541a49df20 sort:是否需要排序。如果設定 true,則在對應的表頭顯示排序icon,從而對列開啟排序功能。
注意:不建議對值存在:數字和普通字元的列開啟排序,因為會進入字典序比對。例如:'賢心' > '2' > '100',這可能不是你想要的結果,但字典序排列演算法(ASCII碼比對)就是這樣的,具體你也可以去了解字典序方面的知識。
table.render({ cols: [[ {sort:true} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{sort:true}"></th> <th lay-data="{field:'id', width:100}">ID</th>
40107655ec554331c1c6222ab67a141c fixed:是否需要固定欄位。如果設定 true 或 'right',則對應的欄位將會固定在左或右,且不會隨捲軸而捲動。
table.render({ cols: [[ {fixed:true} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右 ]] }); 等价于: <th lay-data="{sort:true}"></th> <th lay-data="{field:'id', width:100}">ID</th> <th lay-data="{field:'username', width:120, fixed:'right'}">姓名</th>
37cd6113a8c348d99fa846f2c6fcea98 edit:是否允許編輯。如果設定 true,對應列的儲存格將被允許編輯,目前只支援type="text"的input編輯。
table.render({ cols: [[ {edit:'text'} //其它参数在此省略 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{edit:'text'}"></th> <th lay-data="{field:'id', width:100}">ID</th>
c161494dba5e0dd0fb25d890c74e408d templet:自訂模版。在預設情況下,單元格的內容是完全按照資料介面傳回的content原樣輸出的,如果你想在某列的儲存格中加入連結等其它元素,你可以藉助該參數來輕鬆實現。這是一個非常實用的功能,你的表格內容會因此而豐富多元。
table.render({ cols: [[ {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器 ,{field:'id', title:'ID', width:100} ]] }); 等价于: <th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th> <th lay-data="{field:'id', width:100}">ID</th>
事實上,templet也可以直接是一段html內容,如:
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' 注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板
eebe431eeb58984ec8915354762c30c6 toolbar:綁定工具列。通常你需要在表格的每一行加上 查看、編輯、刪除 這樣類似的操作按鈕,而 tool 參數就是為此而生,你因此可以非常便捷地實現各種操作功能。 tool 參數和 templet 參數的使用方式完全類似,通常接受的是一個選擇器,也可以是一段HTML字元。
table.render({ cols: [[ {field:'id', title:'ID', width:100} ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器 ]] }); 等价于: <th lay-data="{field:'id', width:100}">ID</th> <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>
下述是toolbar 對應的模板,它可以存放在頁面的任意位置:
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a> <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a> <!-- 这里同样支持 laytpl 语法,如: --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-mini" lay-event="check">审核</a> {{# } }} </script> 注意:属性 lay-event="" 是模板的关键所在,值可随意定义。
接下來我們藉助table模組的工具列事件,完成不同的操作功能:
//监听工具条 table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值 var tr = obj.tr; //获得当前行 tr 的DOM对象 if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行(tr)的DOM结构,并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } });
相關推薦:layui
以上是如何使用layui中的table模組中的基礎參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!