How to use basic parameters in the table module in layui

Introduction:

layui is a low-threshold, out-of-the-box front-end UI solution created by professional front-end developers for all levels of front-end and back-end developers.

layui's table module is a major focus and is as friendly as possible in terms of basic parameters, that is, ensuring the prerequisites of functionality while avoiding overly complicated configurations. Basic parameters generally appear in the following scenarios:

场景一：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

场景二：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: &#39;/api/data&#39;
});

更多场景：下述options即为含有基础参数项的对象
> table.init(&#39;filter&#39;, options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

Next, let’s take a look at what the basic elements are?

1. elem - The binding element specifies the original table container, which is only applicable to the rendering method of table.render()

HTML：
<table id="test"></table>

JS：
table.render({ //其它参数在此省略
  elem: &#39;#test&#39; //或 elem: document.getElementById(&#39;test&#39;) 等
});

2. Set the table header, which contains many values. It is a Two-dimensional array. If you use "method-level rendering" of tables, then you need to use this parameter to set the table. For example:

JS：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: 'id', title: 'ID', width: 80}
    ,{field: 'username', title: '用户名', width: 120}
  ]]
});

它等价于：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:&#39;id&#39;, width:80}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:180}">用户名</th>
    </tr>
  </thead>
</table>

The following is an example of a secondary header:

JS：
table.render({
  cols:  [[ //标题栏
    {field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: 'amount', title: '金额', width: 80, rowspan: 2}
    ,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
  ], [
    {field: 'province', title: '省', width: 80}
    ,{field: 'city', title: '市', width: 120}
    ,{field: 'county', title: '详细', width: 300}
  ]]
});
 
它等价于：
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:&#39;username&#39;, width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:&#39;amount&#39;, width:120}" rowspan="2">金额</th>
      <th lay-data="{align:&#39;center&#39;}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:&#39;province&#39;, width:80}">省</th>
      <th lay-data="{field:&#39;city&#39;, width:120}">市</th>
      <th lay-data="{field:&#39;county&#39;, width:300}">详细</th>
    </tr>
  </thead>
</table>

It should be noted that the table module supports Infinitus headers, and you can continue to expand in the above way. The core point lies in the two parameters rowspan and colspan

The next step is to set some parameters in the header

f35d6e602fd7d0f0edfa6f7d103c1b57 field: Set the field name

table.render({
  cols: [[
    {field: 'id'} //其它参数在此省略
    ,{field: 'username'}
  ]]
});

等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

< ;2> title: Set the title name

table.render({
  cols: [[
    {title: '邮箱'} //其它参数在此省略
    ,{title: '签名'}
  ]]
});

等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<th lay-data="{}">签名</th>

5bdf4c78156c7953567bb5a0aef2fc53 width: Set the column width. The setting of column width is usually necessary (except for "special columns", such as checkbox columns, toolbars, etc.), which is related to the overall beauty of the table.

table.render({
  cols: [[
    {width: 80} //其它参数在此省略
    ,{width: 120}
  ]]
});

等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

23889872c2e8594e0f446a471a78ec4c checkbox: Set the checkbox. If set to true, it means that the content of this column is a check box, usually it is placed in the first column.

table.render({
  cols: [[
    {checkbox: true} //其它参数在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

It should also be noted that LAY_CHECKED here is used in conjunction with checkbox. If set to true, it means that all checkboxes are selected by default.

table.render({
  cols: [[
    {checkbox: true, LAY_CHECKED: true} //其它参数在此省略
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

43ad812d3a971134e40facaca816c822 space: Set the gap column. If set to true, defines a 15px width column with no content.

table.render({
  cols: [[ //其它参数在此省略
    {space: true}
    ,{field: 'id', title:'ID', width: 100}
  ]]
});

等价于：
<th lay-data="{space:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

efbfa0de8737dc86eae413541a49df20 sort: Whether sorting is required. If set to true, the sorting icon will be displayed in the corresponding table header, thereby enabling the sorting function for the column.

Note: It is not recommended to enable sorting for columns whose values ​​exist: numbers and ordinary characters, because it will enter lexicographic comparison. For example: 'Xianxin' > '2' > '100', this may not be the result you want, but the dictionary sorting algorithm (ASCII code comparison) is like this. You can also learn about the dictionary for details. sequence knowledge.

table.render({
  cols: [[
    {sort:true} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

40107655ec554331c1c6222ab67a141c fixed: Whether fixed columns are required. If true or 'right' is set, the corresponding column will be fixed to the left or right and will not scroll with the scroll bar.

table.render({
  cols: [[
    {fixed:true} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
    ,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右
  ]]
});

等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{field:&#39;username&#39;, width:120, fixed:&#39;right&#39;}">姓名</th>

37cd6113a8c348d99fa846f2c6fcea98 edit: Whether to allow editing. If set to true, the cells in the corresponding column will be allowed to be edited. Currently, only input editing of type="text" is supported.

table.render({
  cols: [[
    {edit:'text'} //其它参数在此省略
    ,{field:'id', title:'ID', width:100}
  ]]
});

等价于：
<th lay-data="{edit:&#39;text&#39;}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

c161494dba5e0dd0fb25d890c74e408d templet: Custom template. By default, the content of the cell is output exactly as it is returned by the data interface. If you want to add links and other elements to the cells of a certain column, you can easily do so with the help of this parameter. This is a very practical function, and the content of your table will be rich and diverse.

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

等价于：
<th lay-data="{field:&#39;title&#39;, width: 200, templet: &#39;#titleTpl&#39;}">文章标题</th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

In fact, templet can also be directly a piece of html content, such as:

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

eebe431eeb58984ec8915354762c30c6 toolbar: bind toolbar. Usually you need to add similar operation buttons such as view, edit, and delete in each row of the table, and the tool parameter is born for this, so you can implement various operation functions very conveniently. The tool parameter is used in exactly the same way as the templet parameter. It usually accepts a selector or a paragraph of HTML characters.

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

等价于：
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}"></th>

The following is the template corresponding to the toolbar, which can be stored anywhere on the page:

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>

  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }}
</script>

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

Next, we use the toolbar events of the table module to complete different operating functions:

//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-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'
    });
  }
});

Related recommendations: layui

The above is the detailed content of How to use basic parameters in the table module in layui. For more information, please follow other related articles on the PHP Chinese website!