3歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
歡迎加入團隊圈子！與作者面對面！直接點擊！
1.layui介紹
layui是一款採用自身模塊規範編寫的前端UI框架，遵循原生HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用，非常適合界面的快速開發。layui區別於那些基於MVVM底層的UI框架，不需要各種前端工具的複雜配置，只需面對瀏覽器本身。
2.table 數據表格
在進行代碼編譯之前，還是需要引入layui框架，在git中下載dist文件夾。
（網址：https://github.com/sentsin/layui）
table數據表格是layui最核心的組成之一。它用於對錶格進行一些列功能和動態化數據操作，支持固定表頭、固定行、固定列，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持複選框，支持分頁，支持單元格編輯等等一些列功能。
2.1 數據表格基礎參數
2.1 數據表格表頭基礎參數
2.1直接賦值數據的表格
layui框架在一些用法上是與bootstrap框架類似的，都是使用了封裝樣式。創建一個table實例最簡單的方式是：在頁面放置一個元素<tableid="demo"></table>，然後通過table.render()方法指定該容器。還可以利用skin,even、size進行數據表格的樣式調整。具體參數名和可選值見下圖2.3數據表格樣式。
圖2.3 數據表格樣式
具體代碼如下（其中表格數據中的部分代碼已省略）：
<table class="layui-hide" id="demo"></table> <script src="../js/layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接複製所有代碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use('table', function(){ var table = layui.table; //展示已知數據 table.render({ elem: '#demo'//Tab的切換功能，切換事件監聽等 ,cols: [[ //標題欄 {field: 'id', title: 'ID', width: 80, sort: true} ,{field: 'username', title: '用戶名', width: 120} ,{field: 'email', title: '郵箱', minWidth: 150} ,{field: 'sign', title: '簽名', minWidth: 160} ,{field: 'sex', title: '性別', width: 80} ,{field: 'city', title: '城市', width: 100} ,{field: 'experience', title: '積分', width: 80, sort: true} ]] ,data: [{ "id": "10001" ,"username": "杜甫" ,"email": "[email protected]" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一場修行" ,"experience": "116" ,"ip": "192.168.0.8" ,"logins": "108" ,"joinTime": "2016-10-14" } ] //,skin: 'line' //表格風格 ,even: true//背景 //,page: true //是否顯示分頁 //,limit: 5 //每頁默認顯示的數量 }); }); </script> |
效果圖如下：
圖2.4 效果圖
2.2利用接口填充表格數據
這裏只需在利用url接口就可以實現，data數據就可以不寫，只需要利用cols顯示標題欄就可以了，效果如圖2.4。代碼如下：
table.render({ elem: '#test' ,url:'/demo/table/user/' |
2.3合併表格行或列
合併單元格的方法和HTML中其實是一樣的，都是利用rowspan="2"，colspan="3"進行合併。代碼如下：
<table lay-data="{width:800, url:'/test/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}"> <thead> <tr> <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th> <th lay-data="{field:'username', width:150}" rowspan="2">聯繫人</th> <th lay-data="{align:'center'}" colspan="3">地址</th> <th lay-data="{field:'amount', width:120}" rowspan="2">金額</th> <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th> </tr> <tr> <th lay-data="{field:'province', width:120}">省</th> <th lay-data="{field:'city', width:120}">市</th> <th lay-data="{field:'zone', width:200}">區</th> </tr> </thead> </table> |
效果如下：
圖2.5 效果圖
END
編 輯 | 王楠嵐
責 編 | 劉 連
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！