Layui uses form rendering an example of getting row data

  • 的头像-Tumi
  • 36 day agopublish

Requirements: Use the front-end frame Layui to generate a table, click the button in a row of data in a table to get this line of data.

Added fields in render:

 DONE: FUNCTION (RES, CURR, Count) {// $ ('. X-body'). Find ('. Layui-Table-Body'). Find ("Table"). Find ("TBody"). Children ("TR"). on ( 'Click', Function () {// var ID = JSON.STRINGIFY ($ ('. x-body'). Find ('. Layui-Table-Body'). Find ("Table"). Find ("TBody ") .find (". Layui-Table-Hover "). DATA ('Index')); // var obj = res. Data [ID]; // console.log (Obj, 'Obj') // / // / / fun.openlayer (obj); //}) Table.on ('TEST)', Function (OBJ) {// Note: Tool is the toolbar event name, Test is the properties of Table Original container lay-filter = "Corresponding value" var data = obj.data; // Get the current row data var LayEvent = obj.event; // Get the value corresponding to the Lay-Event (or a value corresponding to the Event parameter of the header) VAR TR = Obj.tR; // Get the DOM object IF of the current row TR (LayEvent == "INVEST_PERFER") {x_admin_show ("Investment Preference", "/ Echarts1.html? Mobil =" + DATA.MOBIL, "", 510);} Else {x_admin_show ("user portrait", "/ echarts4.html? mobil =" + data.mobil, "", 510);}});}   
then Be sure to increase the lay-event attribute in the button:

Investment preference
  user portrait        

Layui.Use (‘Table’, Function () {var table = layui.table; // First instance table.render ({elem: ‘# userlisttable “, height: 300, url:’ / userlist ‘// data interface, Page: True // Open Pipes, cols :[[// Header {Field: ‘ID’, Title: ‘ID’, Width: 80, Sort: true, fixed: ‘left’, align: ‘center’}, {Field: ‘Name’, Title: ‘User Name, Width: 80, Align:’ Center ‘}, {Field:’ SEX ‘, TITLE:’ Gender ‘, Width: 100, Sort: True, Align:’ Center ‘}, {Field:’ Mobil ‘, Title:’ Mobile ‘, Width: 150, Align:’ Center ‘}, {Field:’ Log_IN_TIME ‘, TITLE:’ Joined Time ‘, Sort: True, Width: 250, Align: ‘center’}, {title: ‘Operation’, Width: 300, Toolbar: ‘# Userpicbtn’, Align: ‘Center’}]], DATA: [{ID: 1, Name: ‘Zhang San’}, {ID: 2, Name: ‘Lee 4’}], // Nothing Done: Function (RES, CURR, Count) {// $ (‘. x-body’). Find (‘. Layui-Table- Body ‘). Find (“TBODY”). Children (“TR”). ON (‘ Click ‘, Function () {// var id = json.stringify ($ (‘. x- Body ‘). Find (‘. Layui-Table-Body ‘). Find (“Table”). Find (“TBODY”). Find (“. Layui-Table-Hover”). DATA (‘ INDEX ‘)); // var obj = res. Data [ID]; // Console.log (Obj, ‘Obj’) // // Fun.OpenLayer (OBJ); //}) Table.on (‘Test)’, Function (OBJ) {// Note: Tool is Tools Event Name, TEST is the properties of the Table raw container. Lay-filter = “Value” var data = Obj.data; // Get the current row data var LayEvent = Obj.Event; // Get the value of Lay-Event (you can also It is the value corresponding to the Event parameter of the header) VAR TR = Obj.tr; // Get the DOM object IF of the current row TR (layevent == “invest_perfer”) {x_admin_show (“Investment Preference”, “/ Echarts1.html? Mobil = “+ DATA.MOBIL,” “, 510);} else {x_admin_show (” user portrait “,” / echarts4.html? Mobil = “+ data.mobil,” “, 510);}});}
   User portrait 
Effect display: Click on the investment preference or the user portrait button to get the data of the line.
The above-mentioned Layui uses form rendering to get row data is a small package to everyone.All content, I hope to give you a reference, I also hope that you 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