So verwenden Sie neue bedingte Abfrage- und Aktualisierungsparameter in der Symbolleiste in der Bootstrap-Tabelle

Dieser Artikel stellt hauptsächlich die Verwendung der neuen Bedingungsabfrage und der Aktualisierungsparameter der Symbolleiste in der Bootstrap-Tabelle vor. Er ist sehr gut und hat einen gewissen Referenzwert.

Empfohlenes Tutorial: Bootstrap-Grafik-Tutorial

Wie wollen wir die Abfragebedingungen in der Bootstrap-Tabelle anpassen? Was über die Umsetzung? Wo sind diese benutzerdefinierten Schaltflächen und Eingabefelder definiert?

//工具按钮用哪个容器
  toolbar: '#toolbar', 
<div id="toolbar"></div>

Die von uns definierten Abfragebedingungen werden in dieses Div eingefügt. Schauen wir uns zunächst den erwarteten Effekt an:

Um diesen Effekt zu erzielen, benötigen wir zunächst um ein Abfrageformular hinzuzufügen:

<div class="container">
 <div class="row">
  <div class="table-responsive">
   <div id="toolbar">
    <form class="form-inline">
     <div class="form-group">
     <label class="sr-only" for="product_line">产品线</label>
     <div class="input-group">
      <div class="input-group-addon">产品线</div>
      <select class="form-control" name="product_line" id="productLine">
       <option value="">请选择产品线...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <select class="form-control" name="msg_type" id="msgType">
       <option value="">请选择消息类型...</option>
      </select>
     </div>
     </div>
     <div class="form-group">
     <label class="sr-only" for="msg_type">消息类型</label>
     <div class="input-group">
      <div class="input-group-addon">消息类型</div>
      <input type="text" class="form-control" name="searchTexts" id="searchText" placeholder="请输入消息名称或内容关键字...">
     </div>
     </div>
     <button type="button" class="btn btn-primary queryButton">查询</button>
    </form>
   </div>
   <table id="table" ></table>
  </div>
 </div>
</div>

Holen Sie sich den entsprechenden Wert aus den im Anforderungsserver übergebenen Parametern:

 //请求服务器数据
  queryParams: function queryParams(params){
   var param = { 
     pageNumber: params.pageNumber, 
     pageSize: params.pageSize,
     sortName: params.sortName,
     sortOrder: params.sortOrder,
     searchText: $("#searchText").val(),
     msgType: $("#msgType").val(),
     productLine: $("#productLine").val()
    }; 
    return param; 
  }

Senden Sie ihn schließlich an den Server:

 //查询
 $(document).on('click', ".queryButton",function(){
   $('#table').bootstrapTable('refresh');
 });

This The Das offizielle Dokument zum Aktualisieren beschreibt es folgendermaßen:

Remote-Server-Daten aktualisieren. Sie können {silent: true} so einstellen, dass die Daten stillschweigend aktualisiert werden, und {url: newUrl} festlegen, um die URL zu ändern.

Um für diese Anfrage spezifische Abfrageparameter bereitzustellen, legen Sie {query: {foo: 'bar'}} fest.

Zusammenfassung

Das Obige ist die Einführung des Herausgebers in die Verwendung neuer Bedingungsabfragen und Aktualisierungsparameter für die Symbolleiste in der Bootstrap-Tabellenmethode Ich hoffe, dass es für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie neue bedingte Abfrage- und Aktualisierungsparameter in der Symbolleiste in der Bootstrap-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!