Welcome to

Mr.Xiong

Home / LayUI / Layui.table – table 数据表格文档

Layui.table – table 数据表格文档

如需 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,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主半原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

2 条回应 “Layui.table – table 数据表格文档”
  1. 仰宗强 2019年4月2日 on 下午9:32 回复

    大哥,求layui单页版源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<