Basic parameter application in the table module in layui

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:

Scenario 1: The content in the following lay-data is the basic parameters items, remember: the value must be in single quotes

<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

Scenario 2: The key value in the following method is the basic parameter item

table.render({
  height: 300
  ,url: '/api/data'
});

More scenarios: The following options are the basic parameters. Item object

> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

Let’s take a look at the basic elements?

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, here Contains many values ​​and 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 some parameter settings in the header

table.render({
  cols: [[
    {field: 'id'} //其它参数在此省略
    ,{field: 'username'}
  ]]
});
 
等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

title: set the title name

table.render({
  cols: [[
    {title: '邮箱'} //其它参数在此省略
    ,{title: '签名'}
  ]]
});
 
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<th lay-data="{}">签名</th>

width: set Fixed 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>

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>

space: Set the gap column. If set to true, define a 15px width column without any 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>

sort: Whether sorting is required. If true is set, 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>

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>

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>

templet: Custom template. By default, the content of the cell is output exactly according to the content returned by the data interface. If you want to add links and other elements to the cells of a certain column, you can easily achieve this 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> 包裹，否则无法读取到模板

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 segment 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'
    });
  }
});

For more layui related knowledge, please pay attention to layui framework.

The above is the detailed content of Basic parameter application in the table module in layui. For more information, please follow other related articles on the PHP Chinese website!