|
1.layui介紹 layui是一款采用自身模塊規(guī)范編寫的前端UI框架,，遵循原生HTML/CSS/JS 的書寫與組織形式,，門檻極低，拿來即用,，非常適合界面的快速開發(fā),。layui區(qū)別于那些基于MVVM底層的UI框架,，不需要各種前端工具的復雜配置，只需面對瀏覽器本身,。 2.table 數(shù)據(jù)表格 在進行代碼編譯之前,，還是需要引入layui框架，在git中下載dist文件夾,。 （網(wǎng)址：https://github.com/sentsin/layui） table數(shù)據(jù)表格是layui最核心的組成之一,。它用于對表格進行一些列功能和動態(tài)化數(shù)據(jù)操作，支持固定表頭,、固定行,、固定列，支持拖拽改變列寬度,，支持排序，支持多級表頭,，支持單元格的自定義模板,，支持復選框，支持分頁,，支持單元格編輯等等一些列功能,。 
2.1 數(shù)據(jù)表格基礎參數(shù) 
2.1 數(shù)據(jù)表格表頭基礎參數(shù) 2.1直接賦值數(shù)據(jù)的表格 layui框架在一些用法上是與bootstrap框架類似的，都是使用了封裝樣式,。創(chuàng)建一個table實例最簡單的方式是：在頁面放置一個元素<tableid="demo"></table>,，然后通過table.render()方法指定該容器。還可以利用skin,even,、size進行數(shù)據(jù)表格的樣式調(diào)整,。具體參數(shù)名和可選值見下圖2.3數(shù)據(jù)表格樣式。 
圖2.3 數(shù)據(jù)表格樣式 具體代碼如下（其中表格數(shù)據(jù)中的部分代碼已省略）： <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; //展示已知數(shù)據(jù) table.render({ elem: '#demo'//Tab的切換功能,，切換事件監(jiān)聽等 ,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 //每頁默認顯示的數(shù)量 }); }); </script> |
效果圖如下： 
圖2.4 效果圖 2.2利用接口填充表格數(shù)據(jù) 這里只需在利用url接口就可以實現(xiàn)，data數(shù)據(jù)就可以不寫,，只需要利用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">聯(lián)系人</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}">區(qū)</th> </tr> </thead> </table> |
效果如下： 
圖2.5 效果圖
編 輯 | 王楠嵐 責 編 | 劉 連
|
