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)