layui table的使用方法以及基本操作

最新推荐文章于 2024-05-21 09:32:29 发布

置顶 jinggaoniao

最新推荐文章于 2024-05-21 09:32:29 发布

阅读量2.2w

点赞数 5

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/jinggaoniao/article/details/107628250

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

layui table用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。(本段话来源于layui官网)

一、基本使用方法

layui table的使用方法很简单，可以总结为三个步骤：绑定容器、设置数据接口、在表头设定对应的字段

以下表格即是一个简单数据表格最基本的样子

对应的代码为：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui table基本使用方法</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //基本实例
  table.render({
    elem: '#demo'//绑定容器
    ,height: 312
    ,url: '/demo/table/user/' //设置数据接口
    ,page: true //开启分页
    ,cols: [[ //在表头设置对应的字段
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>
</body>
</html>

二、渲染方式

在第一节基本使用方法中已经使用了一种渲染方式即方法渲染，但是layui table为满足不同情况下的需求，设置了三种不同渲染方法，如下表格：

	方式	机制	适用场景
01.	方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.	自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
03.	转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

1、方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器：(本段话来源于layui官网)

方法渲染的优势在于可以脱离html，只专注js本身

<table id="demo" lay-filter="test"></table>
var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考本文档：基本参数选项
});

2、自动渲染

自动渲染不同于方法渲染在js中设置的方式，它是在table容器中配置相应参数，table模块内部自动对其完成渲染，优势为：无需写过多 JS，可专注于 HTML 表头部分

操作步骤为：

1）写一个带有 class="layui-table" 的 <table> 标签。 2）在此table标签中设置属性lay-data="" 用于配置一些基础参数 3）给每个<th> 标签设置属性lay-data=""用于配置表头信息

实例代码为：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

3、转换静态表格

假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

<div class="layui-btn-group demoTable" style="margin-bottom: 10px;">
  <button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
</div>
 
<table lay-filter="parse-table-demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:200}">昵称</th>
      <th lay-data="{field:'joinTime', width:150}">加入时间</th>
      <th lay-data="{field:'sign', minWidth: 180}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>2016-11-28</td>
      <td>人生就像是一场修行 A</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行 B</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>2016-11-30</td>
      <td>人生就像是一场修行 C</td>
    </tr>
  </tbody>
</table>

layui.use('table', function(){
  var table = layui.table;
 
  var $ = layui.$, active = {
    parseTable: function(){
      table.init('parse-table-demo', { //转化静态表格
        //height: 'full-500'
        //支持所有基础参数
      }); 
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});

点击按钮转化之后的表格为：

三、templet--自定义模板

在基本的数据表格中，单元格的内容是完全按照数据接口返回的content输出的，如果想在表格中添加链接或者其它的元素来丰富你的表格内容，这个时候可以使用自定义模板来实现。

templet提供了三种不同的使用方式，可以适用于不同的使用场景

1、绑定模板选择器

自定义模板字符量太大，可以使用此方法

//模板选择器
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});

<script type="text/html" id="titleTpl">
  {{#  if(d.id < 100){ }}
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  {{#  } else { }}
    {{d.title}}(普通用户)
  {{#  } }}
</script>

2、函数转义

templet 函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});

3、直接赋值模版字符

templet 也可以直接是一段 html 内容。 如下所示：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'

四、toolbar-绑定数据条模板

在一般的表格数据操作中，有时需要在每一行中加上查看、编辑、删除这样类似的操作按钮，toolbar完美解决了此需求。tool 参数和 templet 参数的使用方式完全类似，同样是可以是一个选择器，也可以是一段html字符串。

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});

<script type="text/html" id="barDemo">
  <a class="layui-btn 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>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>

属性 lay-event="" 是模板的关键所在，值可随意定义。

接下来我们可以借助 table模块的工具条事件，完成不同的操作功能：

//监听工具条 
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});

五、异步数据接口

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  url: '/api/data/'
  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
  //contentType:application/json //发送到服务端的内容编码类型
  //method: 'post' //如果无需自定义HTTP类型，可不加该参数
  done: function(res, curr, count){
  //如果是异步请求数据方式，res即为你接口返回的信息。
  //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
  console.log(res);
   
  //得到当前页码
  console.log(curr); 
    
  //得到数据总量
  console.log(count);
  }
  //request: {} //如果无需自定义请求参数，可不加该参数
  //response: {} //如果无需自定义数据响应名称，可不加该参数
});

六、基础方法

 table.set(options); //设定全局默认参数。options即各项基础参数
 table.on('event(filter)', callback); //事件监听。event为内置事件名（详见下文），filter为容器lay-filter设定的值
 table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
 table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
 table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
 table.reload(id, options); //表格重载
 table.resize(id); //重置表格尺寸
 table.exportFile(id, data, type); //导出数据

1、获取表格选中行

该方法可获取到表格所有的选中行相关数据
语法：table.checkStatus('ID')，其中 ID 为基础参数 id 对应的值，如：

table.render({ //其它参数省略
  id: 'idTest'
});

调用：

var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
 
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

2、表格重载

在进行全局搜索，排序等情况的时候，你需要对表格进行重载。

语法	说明	适用场景
table.reload(ID, options)	参数 ID 即为容器id对应的值参数 options 即为各项基础参数	所有渲染方式
tableIns.reload(options)	参数同上 tableIns 可通过 var tableIns = table.render() 得到	仅限方法级渲染

示例1：自动化渲染的重载

【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【JS】
<script>
table.reload('idTest', {
  url: '/api/table/search'
  ,where: {} //设定异步数据接口的额外参数
  //,height: 300
});
</script>

示例2：方法级渲染的重载

//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
  elem: '#id'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
}); 
 
//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
}); //只重载数据

jinggaoniao

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
layui table的使用方法以及基本操作

layui table用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。(本段话来源于layui官网)一、基本使用方法layui table的使用方法很简单，可以总结为三个步骤：绑定容器、设置数据接口、在表头设定对应的字段以下表格即是一个简单数据表格最基本的样子对应
复制链接

扫一扫