如需 LayUI 单页正版可联系我!
在使用 LayUI 之前,大多使用 Bootstrap 进行一些网站后台、简易系统的布局,自从上手 LayUI 后,感觉非常舒爽啊!再也不用纠结英文的文档,不得不提的一点是 LayUI 对于前后台分离这点做得也相当给力。这里我们拿 LayUI 前后台核心的数据表格来聊聊。文档链接点击这里。
渲染方式有三种:
a) 方法渲染(js实现)
b) 自动渲染(html配置,自动渲染)
c) 转换静态表格(转化一段已有的表格元素)
后两种都是简单的复制粘贴了,涉及前后台分离传递数据的是第一种。
a) HTML 代码
<table id="demo" lay-filter="test"></table>
b) JS 代码
layui.use('table', function () { var table = layui.table; table.render({ elem:'#demo',//绑定表格 height:312, id:'testReload',//设置id url:'{:url("index/getData")}',//异步请求地址 page:{limit:5,limits:[5,10,15]},//开启分页 toolbar:true,//工具 defaultToolbar:['filter'],//工具筛选 skin: 'line' //行边框风格 ,even: true //开启隔行背景 ,size: 'sm', //小尺寸的表格 cols: [[ //表头 {type: 'checkbox'},//显示复选框 {field:'sno', title:'ID',sort: true} ,{field: 'sname', title: '用户名'} ,{field: 'sclass', title: '课程', sort: true} ,{field: 'sage', title: '年龄'} ,{field: 'ssex', title: '性别',templet: function (d) { if(d.ssex == 1){ return '男'; }else { return '女' } }} ,{field: 'sbirthday', title: '生日', sort: true} ,{field: 'sregion', title: '地区', sort: true} ,{field:'',title:'操作', toolbar: '#barDemo'} ]], text:{ none:'暂无相关数据', } });
c) 工具栏 JS 代码
将以下代码设置的 id 绑定到 js 代码的 toolbar 上。
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
d) 分页
首先 js 代码中加上 page 属性,分页开启前台只是显示分页,数据还需在后台处理; 异步请求数据会传 当前页(page)和 每页条数(limit)到后台;(如果后台没有处理数据则会显示所有的数据)。
e) 后台数据格式
后台默认的数据格式(可通过 response 参数修改默认格式详情请看 layui文档 )
{ "code": 0 ,"msg": "" ,"count": "100" ,"data": [{},{}] }
f) PHP 代码
这里拿订单列表举例,附上搜索功能。
public function orderlist() { $page = I('get.page');//当前页 $limit = I('get.limit');//每页条数 $first = $page * $limit - $limit; $search = I('search'); //搜索条件 if ($search) { //查询 $lists = M('testdata')->where("name LIKE '%" . $search . "%'")->select(); $ids = implode(',', array_column($lists, 'id')); if ($ids) { $where['id'] = array('IN', $ids); } } $data = M('testdata')->where($where)->limit($first, $limit)->select(); $count = M('testdata')->count(); $this->ajaxReturn(['code' => 0, 'valid' => 1, 'msg' => '!', 'count' => $count, 'data' => $data]); }
g) 工具条监听(编辑、修改等按钮的监听)
table.on('tool(test)', function(obj){ var data = obj.data;//所选列的相关数据如id等 //obj.enven:工具栏设置的lay-event属性上图所示 if(obj.event === 'detail'){ //查看详情的相关操作 } else if(obj.event === 'del'){ //删除的相关操作 } else if(obj.event === 'edit'){ //编辑的相关操作 } });
其他监听事件(复选框、单元格、单双击等)请参考 layui文档;操作完成后可使用表格重载( table.reload() 详情使用请往下看)对表格进行刷新。
h) 表格重载(搜索时可用)
HTML 代码:
<div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="sno" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" data-type="reload">搜索</button> </div>
js 代码( reload 为上面 button 的 data-type 属性值,testReload 为表格 id ):
var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { sno: demoReload.val() //传到后台的搜索条件 } }); } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });
Finally,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主半原创文章,未经博主允许不得转载。
微信赞赏支付宝赞赏
大哥,求layui单页版源码
QQ联系我 434493420