layui学习笔记——表格table

最新推荐文章于 2024-05-08 16:56:06 发布

weixin_34337381

最新推荐文章于 2024-05-08 16:56:06 发布

阅读量228

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2427561/blog/1537597

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、三种初始化渲染方式

（1）自动化渲染

1、三种初始化渲染方式
（1）自动化渲染
<table class="layui-table" lay-data="{基础参数，详见右侧目录：基础参数选项}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{表头基础参数}">标题</th>
      ……
    </tr>
  </thead>
</table>

（2）方法级渲染（推荐）

<table id="demo"></table>
var table = layui.table;
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
});

（3）转换静态表格

var table = layui.table;
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  //支持所有基础参数
});

2、基础参数选项

（1）使用场景

场景一：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
 
场景二：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: '/api/data'
});
 
更多场景：下述options即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

（2）options

table.render({ 
  elem: '#test' //或 elem: document.getElementById('test') 等
  , cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
, url: '/api/data/'//接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义）page 代表当前页码、limit 代表每页数据量 
  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
  //method: 'post' //如果无需自定义HTTP类型，可不加该参数
  //request: {} //如果无需自定义请求参数，可不加该参数
  //response: {} //如果无需自定义数据响应名称，可不加该参数
  done: function(res, curr, count){
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);
    //得到当前页码
    console.log(curr); 
    //得到数据总量
    console.log(count);
  }
,  initSort: {
    field: 'id' //排序字段，对应 cols 设定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
  }
, page: true
,  limits: [30,60,90,150,300]
  ,limit: 60 //默认采用60
, loading: false// 是否显示加载条
, id: 'idTest'  //该参数在对表格的数据操作方法上是必要的传递条件，它是表格容器的索引。
,width: 1000// 设定容器宽度
,  skin: 'line' //行边框风格
  ,even: true //开启隔行背景
  ,size: 'sm' //小尺寸的表格
});


//表格重载
table.reload('idTest', options);

3、基础方法

> table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件监听。filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。
> table.checkStatus(id); //获取表格选中行。id即为id参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。

4、事件监听

（1）监听复选框选择

table.on('checkbox(test)', function(obj){
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

（2）监听单元格编辑

table.on('edit(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.value); //得到修改后的值
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.data); //所在行的所有相关数据  
  
  data[field] = value; //更新缓存中的值
});

（3）监听工具条点击

监听排序切换
table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
  
  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
  table.reload('idTest', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,where: { //请求参数
      field: obj.field //排序字段
      ,order: obj.type //排序方式
    }
  });
});

转载于:https://my.oschina.net/u/2427561/blog/1537597