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

Editor to share with you what skills to use layui data tables, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Three initialization rendering methods

I'll start with the simplest initialization form. If I post all the code directly, you may get dizzy.

1. Method rendering:

Var table = layui.table, form = layui.form Layui.use ('table', function () {/ / introduces the table module table.render ({id: "dataTable", / / elem:' # layui_table_id',// specifies the table element url:'/ menu/menuList.ajax', / / request path cellMinWidth: 20 / / globally defines the minimum width of regular cells Layui 2.2.1 added, skin: 'line' / / table style line (row border style) row (column border style) nob (no border style) / /, even: true / / interlaced color change, page: true / / open paging, limits: [10forme 20550] / / options for the number of pages per page, default: [10jie 20jinmei 30pence40pence80jin90]. , limit: 10 / / the number of pages displayed by default, method:'post' / / submission method, cols: [{type:'checkbox'}, / / enable the key title: 'ID' corresponding to the multi-box {field:' menuId', / / json / / column name sort: true / / defaults to false,true enabling sorting}]]}) })

Json data format returned by java backend

{code: 0, count: 8, / / Total number of rows data: [, …] , / / tabular data msg: ""}

2. Automatic rendering method (the following code is provided by the official. The automatic rendering method is suitable for complex headlines. It is generally recommended to use the above method to render)

ID user name, gender, city signature score, professional wealth

Second, how to add edit buttons

Var table = layui.table, form = layui.form Layui.use ('table', function () {/ / introduces the table module table.render ({id: "dataTable", / / elem:' # layui_table_id',// specifies the table element url:'/ menu/menuList.ajax', / / request path cellMinWidth: 20 / / globally defines the minimum width of regular cells Layui 2.2.1 added, skin: 'line' / / table style line (row border style) row (column border style) nob (no border style) / /, even: true / / interlaced color change, page: true / / open paging, limits: [10forme 20550] / / options for the number of pages per page, default: [10jie 20jinmei 30pence40pence80jin90]. , limit: 10 / / default number of display per page, method:'post' / / submission method, done: function (res, curr, count) {/ / event / / call sample layer.photos ({/ / Click on the image pop-up photos:'. Layer-photos-demo', anim: 1 / / 0-6) to specify the pop-up image animation type Default random (note that versions prior to 3.0 use the shift parameter)}) / / if the data is requested asynchronously, res is the information returned by your API. / / if it is assigned directly, res is: {data: [], count: 99} data is the current page data, count is the total data length console.log (res); / / get the current page number console.log (curr); / / get the total data console.log (count) }, cols: [{type:'checkbox'}, / / enable the multiple checkboxes {field: 'menuId', / / json corresponding to key title:' ID', / / column name sort: true / / default to false,true to enable sorting}, {fixed: 'right', title:' action', width: 215, align:'center', toolbar:'# barDemo' / / bind button group}]});}) / / listen to the toolbar table.on ('tool (dataTable)', function (obj) {/ / Note: tool is the name of the toolbar event, test is the property of the original table container lay-filter= "corresponding to the value" var data = obj.data / / get the current row data, layEvent = obj.event; / / get the lay-event corresponding value if (layEvent = = 'detail') {layui.alert (JSON.stringifr (data)) / / convert edited line information to json string layer.msg (data.attrId);} else if (layEvent = 'del') {layer.msg (' delete'+ data.menuId); console.log (table)} else if (layEvent = 'edit') {});}}); / / bind id and toolbar attributes to view editing deletion

Third, how to add form components to a table (I will recommend 2 below)

1, the way to use the module engine (this method is troublesome, personally recommend the second one)

/ / Please note the association between id {{# if (d.menuDisplay ='Y') {}} {{#} else {}} {/ / add field: 'menuDisplay', / title:' display', templet:'# isShow', / / template to the above defined unresize: true Filter: "isShow", sort: false}

2, the method of using function

{field: 'menuDisplay', title:' whether to display', unresize: true, filter: "isShow", sort: false, templet: function (d) {if (d.menuDisplay = ='Y') {return``;} else {return``;}

Fourth, display pictures

{field: 'img', title:' picture', unresize: true, sort: false, / / style:'height:100px;', templet:function (d) {return `

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.