Programmatically filling combo-boxes in BootstrapT

2019-08-29 19:04发布

问题:

I am successfully using the server-side option of BootstrapTable with Bootstrap V4 and jsp

  <table class="table table-condensed table-bordered table-hover" id="position-list"
    data-toggle="table"
    data-url="/pages/positions/p_getRows.jsp"
    data-side-pagination="server"
    data-filter-control="true"
    data-pagination="true" 
    data-click-to-select="true"
    data-id-field="id"
    data-page-list="[10, 25, 50, 100, ALL]"
    data-show-footer="false"   
    data-minimum-count-columns="2"                           
    data-pagination="true"                           
    >
    <thead>
       <tr>
          <th data-sortable="true" data-field="Status" data-filter-control="select">Status</th>
          ...
       </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

Here is a sample of the p_getRows.jsp ajax

int fromPos=SecurityIssues.StringToInt(request.getParameter("offset"));
int limit=SecurityIssues.StringToInt(request.getParameter("limit"));

//simplified for illustration purposes
String sqlQuery="SELECT * from (select *,row_number() over (order by position_no) as RowNum from ("+...sql for all positions...+")b )  a where a.rowNum between "+fromPos+" and "+(fromPos+limit);
int numPos=...//number of total positions
%>
{
   "total":<%=numPos%>,
    "rows":[   

<% 
for (Row r:listRows) {%>

    {
        "Status":"<%=r.getStatus()%>",

At the moment, the "Status" combo-box is populated with the data that BootstrapTable "sees". (I.e. the more the user navigates within the table, the more values the combo-box will contain)

How do I programmatically set the "Status" combo-box with a list of pre-defined values?

回答1:

A "hack" solution is to access the dropdown directly via jquery

$('.form-control.bootstrap-table-filter-control-status')

(replacing 'status' with the name of the desired column header)

One can then do

 $('.form-control.bootstrap-table-filter-control-status').html('
<OPTION value="A">A</OPTION><OPTION value="B">B</OPTION>');

(or whatever)

I was hoping for something more elegant, perhaps using the methods of the bootstrap table