Bootstrap Table adds the drop-down box control to the specified column and obtains the selected value.

Bootstrap Table adds the drop-down box control to the specified column and obtains the selected value.

Background

Recently, when using Bootstrap table, a user adds a drop-down list to a column and uses the "getAllSelections" method to obtain the required row, some detours were taken and some pitfalls were encountered. So today I have summarized my own learning and shared it with you, hoping to help you.

Solution

To add this drop-down list, you can use either of the following methods:

• Convert data to a drop-down list using formatter in Column options
• Use the editable plug-in bootstrap-table Extension

This article mainly introduces the first method. The basic idea is: first, convert the obtained data to the select control containing the data through formatter in the Column configuration item of bootstrap-table. Then, update the corresponding cell data based on the selected item, and use the getallselection method to obtain the data of the selected row.

Formatter, Which is configured with function and has three parameters: (value, row, index)

formatter: setSelectfunction setSelect(value, row, index) {  var strHtml = "";  if (value == "Item 1")   {    strHtml = "<select class='ss'><option value='Item 1' selected='selected'>Item 1</option><option value='Item 2'>Item 2</option></select>";   }    else    {    strHtml = "<select class='ss'><option value='Item 1' >Item 1</option><option value='Item 2' selected='selected'>Item 2</option></select>";   }   return strHtml;}

The drop-down list can be displayed. However, if you use the getallselection method to obtain the selected content directly, the following error occurs: the obtained data is the content initialized and loaded by the default table, it is not a reselect.

  Bootstrap-table is a jQuery plug-in that cannot be directly modified on the html. to modify it, you must use its own method. Bootstrap-table provides an updateCell method in Methods.

UpdateCell contains three parameters (index, field, value) to update the value in a column of a row.

$('#table').bootstrapTable('updateCell', {  index: indexSelected,  field: 'name',  value: valueSelected })

Events

After the drop-down list is displayed, you can update the cell value. You also need to select the BIND event for the drop-down list to select the drop-down list> change the cell value.

We can bind the onchange event on the select element or use the jquery change event.

$(".ss").change(function() { var indexSelected = $(this).parent().parent()[0].rowIndex - 1; var valueSelected = $(this).children('option:selected').val(); $('#table').bootstrapTable('updateCell', {  index: indexSelected,  field: 'name',  value: valueSelected })});

However, after testing, we found that $ (". ss "). change () is only triggered after the first selection after page loading. Later, the events item was found in the bootstrap-table document, which can listen to cell events and be used with formatter.

Events: {'change. ss': function (e, value, row, index) {}}; // value indicates the value of the current cell, row indicates the current row, and index indicates the index value of the current row.

• Change transmits jQuery events.
• . Ss is the class selector of jQuery.

The above is a small Demo made in JSFiddle, with the source code and display effect, you can refer to it.

Summary

Sometimes, we encounter a problem that someone else has never encountered, and we have not found a direct solution on the Internet. So be sure to follow his official documents and even contact the author directly.

In addition, bootstrap-table is a jQuery plug-in. If you understand how a jQuery plug-in works, it is very helpful to solve the problem.

The above section describes how to add the drop-down box control in the specified column of Bootstrap Table and obtain the selected value. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!