1數據表格-張偉 · LayUI的學習

### 1.數據表格 - 使用代碼 ``` <table class="layui-table" lay-data="{url:'{:url('rbac/getRoleList')}','limit':10,height: 'full-100', page:true, id:'listData'}" lay-filter="list"> <thead> <tr> <th width="40" lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th> <th align="left" lay-data="{field:'name',width:120}">{:lang('ROLE_NAME')}</th> <th align="left" lay-data="{field:'remark',width:120}">{:lang('ROLE_DESCRIPTION')}</th> <th width="60" align="left" lay-data="{field:'status',width:100,templet:'#statusTpl'}">{:lang('STATUS')}</th> <th lay-data="{fixed: 'right', width:360, align:'center', toolbar: '#toolbar'}">操作</th> </tr> </thead> </table> //狀態判斷邏輯 <script type="text/html" id="statusTpl"> {{# if(d.status == 1){ }} //todo {{# } else { }} // todo {{# } }} </script> //工具條內容 <script type="text/html" id="toolbar"> {{# if(d.id == 1) { }} //todo {{# }else{ }} //todo {{# } }} </script> ``` >lay-data 寫相關的接口地址和參數（詳情參考layui手冊) table中的 id 必須為 `listData` ,lay-filter="list" 。 ## 楊紅偉制作 [TOC] 文檔：http://www.layui.com/doc/modules/table.html ## 視圖 `lay-data` 的用法來源于 `layui` 的 `table`，只不過必須得綁定 `listData` ``` <include file="public@header" /> </head> <body>  <table class="layui-table" lay-data="{ url:'{:url('agent/admin_agent/testapi')}','limit':20,height: 'full-100', page:true, id:'listData'}" lay-filter="list"> <thead> <tr> <th lay-data="{checkbox:true, fixed: true}"></th> <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th> <th lay-data="{field:'mobile', width:200}">用戶名</th> </tr> </thead> </table>  <script src="__STATIC__/larry/js/admin.js"></script> </body> </html> ``` ## 控制器 ``` public function testapi() { $limit = $this->request->param('limit'); $users = Db::name('user') ->order("id DESC") ->where('mobile','neq','') ->paginate($limit)->toArray(); $data = array('data'=>$users['data'],'code'=>0,'msg'=>'成功','count'=>$users['total']); return json($data); } ``` ## 結果 ![mark](http://qiniu.newthink.cc/blog/20171020-105857997.png) ## `listData` 來源 `list.js` >文件位置：/public/staic/larry/lib/list.js 如圖： ![mark](http://qiniu.newthink.cc/blog/20171020-115448153.png)