Bootstrap Table Double-click, click on the line to get the row and full table content

What is bootstrap-table?

In the business system development, the processing of queries, paging, sorting, etc. of the table record is very common. In web development, there can be many powerful plugins to meet the requirements, and Great increased development efficiency, this bootstrap-table is a very famous open source form plugin, widely used in many projects. The bootstrap-table plugin provides a very rich property setting, you can implement query, pagination, sorting, check box, setting display column, Card View view, master dissection, merge column, international processing, etc., and the plugin At the same time, some nice extensions, such as mobile rows, mobile column locations, and more, the plugin can be set with HTML5-based DATA- * property identifier, or you can use JavaScript mode for setting, which is very convenient. This article introduces the application of the Bootstrap-Table plugin in my actual project, summarizing the problem of issues encountered in the relevant use.

Bootstrap Table Gets the content of the click or double-click

Description: Seeing this should know how the Bootstrap Table is used and how to use it, so The following name does not introduce

• RealTime_table is the ID

 $ ("# realTIME_TABLE"). Bootstraptable ({// is still a little more Let's take an extra. If you want to add money // to display the search search: false, // Page Paging: false, // How many pieces of data are displayed per page, that is, how many lines are to be displayed Pagesize: 15, // Page, select Different numbers to change the above PageSize Pagelist: [5, 10, 15, 20], //Column shows showColumns: true, // display refresh button showRefresh: false, // is visible showToggle: true, // default English setting is as follows display Chinese locale: "zh-CN", // display background-color and white lime striped: true, / * * * * * * the following article is to be introduced, others are extra, including this sentence * * * * * / // ============= ================================================== ======================== // Double-click the event triggered when double-clicking will get row, row content is the entire line, where "row. playerName "in" playerName "is a data-field-defined field (if defined in js, the field is defined fields) can get the value of all the columns of the row onDblClickRow by this method: function (row) {console.log ( "click:" + row.playerName)} // ====================================== ================================================= / / to obtain click row, to the onDblClickRow onClickRow, as // onClickRow: function (row) {// console.log ( "click:" + row.playerName) //} // ====== ====================================================================================== Get the content of the full table, as long as the following method, allTableData is an array, the contents of the table, you can use the traversal to get the content of each row, you can also use the index to directly get the contents of the line you want VAR indextemp = 0; VAR PlayernameTemp = 'Zhang Xiaoshuai'; VAR AllTableData = $ ('# realtime_table'). Bootstraptable ('getdata'); for (var i = 0; i  < allTableData.length; i++) {
   indexTemp = i;
   //如果此行中有玩家名字(此处默认名字不重复)与你想获取的相同,则跳出循环,indexTemp是你要的行索引
   if(allTableData[i].playerName == playerNameTemp) {
    break;
   }
  }
  console.log("玩家张小帅的数据在表的第" + (indexTemp + 1) + "行");
 }); 
extraneous: field is set on the table, can be viewed: click Bootstrap-table Usage right sidebar jump bottom, there are two methods, one is provided in the declaration attribute table, and the other is disposed [the js


• Bootstraptable implementation timing refresh data: //www.jb51.net/Article/145535.htm


Summary

The above is the Bootstrap Table double-click on Xiaobian, click on the line to get the row and full table content, I hope everyone can help, if everyone has any If you have questions, please leave a message, the small package will reply to everyone in time. I am very grateful to everyone in Tumi Cloud website!

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

Please log in to comment