layui之表格数据

1.实例

创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table>,然后通过 table.render() 方法指定该容器,如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>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>
View Code

2.方法渲染

将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个 选择器

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

3.自动渲染

在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点:

1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 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>

4.转换静态表格

可通过init方法转换

<table lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'username', width:100}">昵称</th>
      <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
      <th lay-data="{field:'sign'}">签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心1</td>
      <td>66</td>
      <td>人生就像是一场修行a</td>
    </tr>
    <tr>
      <td>贤心2</td>
      <td>88</td>
      <td>人生就像是一场修行b</td>
    </tr>
    <tr>
      <td>贤心3</td>
      <td>33</td>
      <td>人生就像是一场修行c</td>
    </tr>
  </tbody>
</table>
View Code

执行js方法就可以了

var table = layui.table;
 
//转换静态表格
table.init('demo', {
  height: 315 //设置高度
  ,limit: 10 //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致
  //支持所有基础参数
}); 
    

5.基础参数

1.elem:指定原始 table 容器的选择器或 DOM,方法渲染方式必填

2.cols:设置表头。值是一个二维数组。方法渲染方式必填

3.url:异步数据接口相关参数。其中 url 参数为必填项

4.toolbar:开启表格头部工具栏区域,该参数支持四种类型值:

  • toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
  • toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
  • toolbar: true //仅开启工具栏,不显示左侧模板
  • toolbar: 'default' //让工具栏左侧显示默认的内置模板

5.defaultToolbar:该参数可自由配置头部工具栏右侧的图标按钮

6.width:设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。

7.height:设定容器高度,string/number

8.cellMinWidth:全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth

9.done:数据渲染完的回调。你可以借此做一些其它的操作

10.data:直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。

11.totalRow:是否开启合计行区域。

12.page:开启分页(默认:false)

13.limit:每页显示的条数(默认:10)

14.limits:每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
注意:优先级低于 page 参数中的 limits 参数

15.loading:是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式

16.title:定义 table 的大标题(在文件导出等地方会用到)

17.text:自定义文本,如空数据时的异常提示等。

18.autoSort:默认 true,即直接由 table 组件在前端自动处理排序。
若为 false,则需自主排序,通常由服务端直接返回排序好的数据。

19.initSort:初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。

20.id:设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。

21.skin:设定表格各种外观、尺寸等

6.表头参数

如果你采用的是方法渲染,cols 是一个二维数组,表头参数设定在数组内;如果你采用的自动渲染,表头参数的设定应放在 <th> 标签上

1.field:设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识

2.title:设定标题名称

3.width:设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比
请结合实际情况,对不同列做不同设定。

4.minWidth:局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth

5.type:设定列类型。可选值有:

  • normal(常规列,无需设定)
  • checkbox(复选框列)
  • radio(单选框列,layui 2.4.0 新增)
  • numbers(序号列)
  • space(空列)

6.LAY_CHECKED:是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。

7.fixed:固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。

8.hide:是否初始隐藏列,默认:false。

9.totalRow:是否开启该列的自动合计功能,默认:false。

10.totalRowText:用于显示自定义的合计文本。

11.sort:是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。

12.unresize:是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。

13.edit:单元格编辑类型(默认不开启)目前只支持:text(输入框)

14.event:自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理

15.style:自定义单元格样式。即传入 CSS 样式

16.align:单元格排列方式。可选值有:left(默认)、center(居中)、right(居右)

17.colspan:单元格所占列数(默认:1)。一般用于多级表头

18.rowspan:单元格所占行数(默认:1)。一般用于多级表头

19.templet:自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等

 20.toolbar:绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮

7.自定义列模板

在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对某列的单元格添加链接等其它元素,你可以借助该参数来轻松实现。这是一个非常实用且强大的功能,你的表格内容会因此而丰富多样。

 方式一:绑定模版选择器。

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});
 
等价于:
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>

下述是templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据

<script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
 
注意:上述的 {{d.id}}、{{d.title}} 是动态内容,它对应数据接口返回的字段名。除此之外,你还可以读取到以下额外字段:
     序号:{{ d.LAY_INDEX }} 
 
由于模板遵循 laytpl 语法(建议细读 laytpl文档 ),因此在模板中你可以写任意脚本语句(如 if else/for等):
<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>

方式二:函数转义。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}
  ]]
});  

方式三:直接赋值模版字符。事实上,templet 也可以直接是一段 html 内容,如:

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意:这里一定要被一层 <div></div> 包裹,否则无法读取到模板

8.绑定工具条模板toolbar

类型:String,默认值:无,通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮,而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似,通常接受的是一个选择器,也可以是一段HTML字符。

下述是 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.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,头部工具栏扩展的右侧图标。');
  }
});

9.异步数据接口

数据的异步请求由以下几个参数组成

url:接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义)
page 代表当前页码、limit 代表每页数据量

method:接口http请求类型,默认:get

where:接口的其它参数。如:where: {token: 'sasasas', id: 123}

 contentType:发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'

headers:接口的请求头。如:headers: {token: 'sasasas'}

 parseData:数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式假设你接口返回的数据为以下格式

{
  "status": 0,
  "message": "", 
  "total": 180, 
  "data": {
    "item": [{}, {}]
  }
}
table.render({
  elem: '#demp'
  ,url: ''
  ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.status, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.total, //解析数据长度
      "data": res.data.item //解析数据列表
    };
  }
  //,…… //其他参数
});  

request:用于对分页请求的参数:page、limit重新设定名称,如:

table.render({
  elem: '#demp'
  ,url: ''
  ,request: {
    pageName: 'curr' //页码的参数名称,默认:page
    ,limitName: 'nums' //每页数据量的参数名,默认:limit
  }
  //,…… //其他参数
});    

那么请求数据时的参数将会变为:?curr=1&nums=30

response:如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:

table.render({
  elem: '#demp'
  ,url: ''
  ,response: {
    statusName: 'status' //规定数据状态的字段名称,默认:code
    ,statusCode: 200 //规定成功的状态码,默认:0
    ,msgName: 'hint' //规定状态信息的字段名称,默认:msg
    ,countName: 'total' //规定数据总数的字段名称,默认:count
    ,dataName: 'rows' //规定数据列表的字段名称,默认:data
  } 
  //,…… //其他参数
});     

10.数据渲染完的回调

无论是异步请求数据,还是直接赋值数据,都会触发该回调。可以利用该回调做一些表格以外元素的渲染。

table.render({ //其它参数在此省略
  done: function(res, curr, count){
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);
    
    //得到当前页码
    console.log(curr); 
    
    //得到数据总量
    console.log(count);
  }
});

11.头部工具栏右侧图标defaultToolbar

类型:Array,默认值:["filter","exports","print"]

该参数可自由配置头部工具栏右侧的图标按钮,值为一个数组,支持以下可选值:
  • filter: 显示筛选图标
  • exports: 显示导出图标
  • print: 显示打印图标
table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名,用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});

12.自定义文本text

table 模块会内置一些默认的文本信息,如果想修改,你可以设置以下参数达到目的。

table.render({ //其它参数在此省略
  text: {
    none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
  }
});

13.初始排序initSort

用于在数据表格渲染完毕时,默认按某个字段排序。

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
  initSort: {
    field: 'id' //排序字段,对应 cols 设定的各字段名
    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
  }
});
 
等价于(“自动化渲染”配置方式)
<table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>

14.表格外观

skin:line (行边框风格)row (列边框风格)nob (无边框风格) 用于设定表格风格,若使用默认风格不设置该属性即可

even:true/false     若不开启隔行背景,不设置该参数即可

size:lg/sm     用于设定表格尺寸,若使用默认尺寸不设置该属性即可

15.获取选中行

语法:table.checkStatus('ID'),其中 ID 为基础参数 id 对应的值

【自动化渲染】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
 
【方法渲染】
table.render({ //其它参数省略
  id: 'idTest'
});
var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
 
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

16.监听复选框选中

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

 



 

posted @ 2019-12-02 15:42  本兮嘻嘻  阅读(2259)  评论(1编辑  收藏  举报