Shulou(Shulou.com)06/03 Report--

This article mainly introduces what is the use of table module in layui. It is very detailed and has certain reference value. Friends who are interested must finish it!

Layui's table module is a big start and is as friendly as possible in terms of basic parameters, that is, ensuring the premise of functionality while avoiding overly cumbersome configuration.

Basic parameters generally appear in the following scenarios:

Scenario 1: the contents of the following lay-data are the basic parameter items. Remember: the value should be in single quotation marks.

……

Scenario 2: the key values in the following methods are the basic parameter items

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

More scenarios: the following options is the object with the basic parameter item

> table.init ('filter', options); / / convert static form > var tableObj = table.render ({}); tableObj.reload (options); / / reload form

Next, what are the basic elements?

1. Elem-the binding element is the specified original table container, which only applies to the rendering method of table.render ()

HTML: JS:table.render ({/ / other parameters are omitted here elem:'# test' / / or elem: document.getElementById ('test'), etc.})

2. Set the header, which contains many values, which is a two-dimensional array. If you use the "method-level rendering" of the table, then you need to use this parameter to set the table. Such as:

JS:table.render ({cols: [[/ / title bar {checkbox: true}, {field: 'id', title:' ID', width: 80}, {field: 'username', title:' user name', width: 120}]]}); it is equivalent to: ID user name

Here is an example of a secondary header:

JS:table.render ({cols: [/ / title bar {field: 'username', title:' contact', width: 80, rowspan: 2} / / rowspan is the number of cells crossed vertically, {field: 'amount', title:' amount', width: 80, rowspan: 2}, {align: 'center', title: address', colspan: 3} / / colspan is the number of cells spanned In this case, there is no need to set field and width], [{field: 'province', title:' province', width: 80}, {field: 'city', title:' city', width: 120}, {field: 'county', title:' details', width: 300}]}) It is equivalent to: contact amount address province and city details

It is important to note that the table module supports infinite pole headers, and you can continue to expand as described above. The core point lies in the parameters rowspan and colspan

Then there are some parameter settings in the header.

Field: setting field name

Table.render ({cols: [[{field: 'id'} / / other parameters are omitted here, {field:' username'}]}); equivalent to:

Title: set title name

Table.render ({cols: [[{title:' mailbox'} / / other parameters are omitted here, {title:' signature'}]}); equivalent to: mailbox signature (PS: you can also write the title in lay-data, that is, title:' mailbox') signature

Width: sets the column width. The setting of column width is also usually necessary (except for "special columns", such as check box columns, tool columns, etc.), which is related to the overall beauty of the table.

Table.render ({cols: [[{width: 80} / / other parameters are omitted here, {width: 120}]}); equivalent to:

Checkbox: sets the check box. If true is set, the content of the column is a check box, which is usually placed in the first column.

Table.render ({cols: [[{checkbox: true} / / other parameters are omitted here, {field: 'id', title:'ID', width: 100}]}); equivalent to: ID

It is also important to note that the LAY_CHECKED here is used in conjunction with checkbox. If you set true, the check box is selected by default.

Table.render ({cols: [[{checkbox: true, LAY_CHECKED: true} / / other parameters are omitted here, {field: 'id', title:'ID', width: 100}]}); equivalent to: ID

Space: sets the gap column. If you set true, define a column with nothing in the width of the 15px.

Table.render ({cols: [[/ / other parameters are omitted here {space: true}, {field: 'id', title:'ID', width: 100}]}); equivalent to: ID

Sort: whether sorting is required. If true is set, the sort icon is displayed in the corresponding header, thus enabling sorting for the column.

Note: the existence of values is not recommended: sorting is enabled for columns of numbers and ordinary characters, as it will enter lexicographic alignment. For example: 'Xianxin' >'2' > '100', this may not be the result you want, but the dictionary order algorithm (ASCII code comparison) is like this, you can also learn about dictionary order.

Table.render ({cols: [[{sort:true} / / other parameters are omitted here, {field:'id', title:'ID', width:100}]}); equivalent to: ID

Fixed: whether fixed columns are required. If you set true or 'right', the corresponding column will be pinned to the left or right and will not scroll with the scroll bar.

Table.render ({cols: [[{fixed:true} / / other parameters are omitted here, {field:'id', title:'ID', width:100}, {field:'username', title:' name', width:120, fixed:'right'} / / are fixed on the right]]}); equivalent to: ID name

Edit: whether editing is allowed. If true is set, the cells corresponding to the column will be allowed to be edited. Currently, only input editing of type= "text" is supported.

Table.render ({cols: [[{edit:'text'} / / other parameters are omitted here, {field:'id', title:'ID', width:100}]}); equivalent to: ID

Templet: custom templates. By default, the contents of the cells are output exactly as they are returned by the data interface. If you want to add links and other elements to the cells of a column, you can easily achieve them with this parameter. This is a very useful function, and your form will be rich and varied.

Table.render ({cols: [{field:'title', title:' article title', width: 200, templet:'# titleTpl'} / / the templet value here is the selector of the template element, {field:'id', title:'ID', width:100}]}); equivalent to: article title ID

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

Templet:'{d.title}} 'Note: this must be wrapped in a layer, otherwise the template cannot be read

Toolbar: bind the toolbar. Usually you need to add similar action buttons such as view, edit and delete in each row of the table, and the tool parameter is created for this, so you can easily achieve a variety of operation functions.

The tool parameter is used in exactly the same way as the templet parameter, usually accepting 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'} / / where the toolbar value is the selector of the template element]]}); equivalent to: ID

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

View, edit, delete {{# if (d.auth > 2) {}} audit {{#} Note: the attribute lay-event= "" is the key to the template, and the value can be defined at will.

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

/ / listen to the toolbar table.on ('tool (test)', function (obj) {/ / Note: tool is the event name of the toolbar, and test is the attribute lay-filter= of the original table container. "var data = obj.data; / / get the current row data var layEvent = obj.event; / / get the value var tr = obj.tr corresponding to lay-event / / get the DOM object if of the current line tr (layEvent = 'detail') {/ / View / / do somehing} else if (layEvent =' del') {/ / delete layer.confirm ('really delete rows', function (index) {obj.del (); / delete the DOM structure of the corresponding line (tr) and update the cache layer.close (index); / / send a delete instruction to the server}) } else if (layEvent = = 'edit') {/ / edit / / do something / / synchronous update cache corresponding value obj.update ({username:' 123', title: 'xxx'});}}). This is all the content of the article "what is the use of table modules in layui". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.