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

This article mainly introduces the relevant knowledge of "how to use Layui table components". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use Layui table components" can help you solve the problem.

Problems that have occurred:

1. Use the [convert static table] method provided by Layui to initialize the error that Times id cannot find (your own pot).

2. Transfer parameters

Table load refresh scheme used

There is a page with a tree on the left and a table on the right. The default table loads all data. When you click on the tree node, table filters. It's a simple requirement.

1.jpg

Here we will not talk about the use of tree, will only post the relevant methods of table!

First post the source form code:

Serial number

Sell ID

Name

Year

January

February

Year

Operation

Editing

Explain directly through comments in the code:

(function () {/ / load the backend url of the list

VargetListUrl='';// for any table, according to the official statement, there are three different initialization rendering methods, which are not introduced, but the method used here is regarded as the third: converting static table mode.

/ / to convert a static table, you naturally need to have an existing table first, and then convert it to a Layui table by js.

/ / configuration items are naturally required for Layuitable initialization regardless of which method

/ / initialize the Layuitable by transformation. The configuration items can be partially in the source table and partly in the js. The source code of the source table has been given above. Here is an example of the configuration items in js.

VartableOptions= {

Url:getListUrl,// request address

Method:'POST',// mode

Id:'listReload',// generates the identity id of Layuitable, which must be provided for later refresh operation. The author has had a problem there.

Whether page:false,// is paged or not

Where: {type: "all"}, / / request the condition of the backend interface, where is the condition error point. According to the official code example, it was originally written as where: {key: {type: "all"}}, but the result is not what I thought. Key will be a backend class as a parameter with the type attribute in it. If you mistook key for the format provided by Layui, it would be a big mistake.

Response: {/ / define the backend json format. For more information, please see the official documentation.

StatusName:'Code',// status Field name

StatusCode:'200',// status field success value

MsgName:'Message',// message field

CountName:'Total',// total number field

DataName:'Result'// data field

}

}; / /

Layui.use (['table','layer'], function () {/ / layui module reference, modify as needed

Varlayer=layui.layer,table=layui.table;// table initialization

VarcreateTable=function () {

Table.init ('EditListTable',tableOptions)

/ / tablelay-filter

}; / / Table refresh method

VarreloadTable=function (item) {

Table.reload ("listReload", {/ / here is the initialization ID id mentioned above

Where: {/ / key: {/ / this method has been mentioned above

Type:item.type,id:item.id//}

}

})

}; / / Table initialization

CreateTable (); / / other tree-related methods, including clicking the tree item to call the refresh method

})

) ()

Backend method:

/ / in this example, the background code is written as publicActionResultGetGoalList (stringtype,stringid)

{/ /} / / if according to the official document condition, it should be written as follows: publicActionResultGetGoalList (keyItemkey)

{/ /} publicclasskeyItem

{publicstringid {get;set;} publicstringtype {get;set;}

}

This is the end of the introduction to "how to use Layui table components". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.