Layui implementation list query function

Layui can directly use the local JSON file to list data rendering, but we will find that the code comes from the official website CTR + C CTR + V, and each time it looks in a list, but actual operations Invalid, Baidu has not found specific reasons, helplessly continue to go back to see the official website, and then summarize only one thing, and everyone is easier to ignore:

layUI实现列表查询功能

official website Say that the URL of the query must set asynchronous interface, so, if we don’t look at the background, it seems to be a stand-off front end, but for local demonstration, here is a very low method, single relying on Show () HIDE () method to implement the query effect (the effect demo can not recommend the use of this method in actual development)

The following code paste copies can be used directly:

  
Layui.USE ('TABLE ', function () {var table = layui.table; // Method rendering var Tabins = Table.Render ({elem:' #lay_table_user ', url:' new_file.json ', cols: [{Checkbox: true, Fixed: true}, {field: 'id', title: 'id', width: 80, sort: true, fixed: true}, {field: 'username', title: 'User name', width: 80}, {Field: 'SEX', TITLE: 'Gender', Width: 80, Sort: true}, {Field: 'City', Title:'City', Width: 80}, {Field: 'Sign', Title: 'Sign'}, {FIELD: 'Experience', Title: 'Point', Sort: True, Width: 80}, {Field: 'Score ', Title:' Classified ', Title:' Professional ', Width: 80}, {Field:' Wealth ', Title:' Wealth ', Sort: True, Width: 135}]], ID: 'TestreLoad', Done: Function (RES) {}}; var $ = layui. $, active = {reload: function () { Var demoreLoad = $ ('# demoreLoad'); // Performs an overload Table.Reload ('TestreLoad', {page: {curr: 1 // Re-start}, where: {key: {ID: DEMoreLoad .val ()}}};}}; $ ('. demotable .layui-btn'). on ('click "() {search = $ (' # DemoreLoad '). Val (); $ '.layui-table-fixed tbody tr'). Each (I) {var ID = $ (this) .children ('TD'). EQ (1) .children ('div "). HTML (); IFID.indexof (Search)> = 0) {$ (this) .show () $ ('. Layui-Table-Main Tbody Tr'). EQ (i) .show ()} else {$ ('. Layui- Table-main tbody Tr '). EQ (i) .Hide () $ (this) .HIDE ();}};});};
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment