Layui.table – table 数据表格文档

作者: Mr.Xiong
日期: 2019年3月20日
分类: LayUI
Tags: LayUI
阅读量: 5,234

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

赞赏

微信赞赏支付宝赞赏

Welcome to

Mr.Xiong

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