form2js的使用（續BootstrapTable）

通過收集表單數據，並且轉換為json格式，實現表格的查詢。

引入插件：不要忘記引入jquery。

<script src="${ctx}/assets/plugins/form2js/form2js.js"></script>
<script src="${ctx}/assets/plugins/form2js/js2form.js"></script>

 建立一個form表單，id為searchForm。品紅色標注的name字段名是作為屬性名傳入后台的，必須與后台規定的字段保持一致。

<div id="searchForm">
   <div class="box-header with-border">
      <div class="form-group col-lg-2 col-md-3 col-sm-4 col-xs-6">
          <label for="orderNo">訂單編號</label> 
 <input type="text" class="input-sm form-control" name="orderNo" placeholder="輸入訂單編號">
      </div>
      <div class="form-group col-lg-2 col-md-3 col-sm-4 col-xs-6">
          <label for="state">訂單狀態</label>
             <select name="state" class="input-sm form-control">
                 <option value="" selected="selected">全部</option>
                 <option value="0">未拆單</option>
                 <option value="1">已拆單</option>
             </select>
      </div>
      <div class="form-group col-lg-2 col-md-3 col-sm-4 col-xs-6">
          <label for=" initiator">發起人</label> 
 <input type="text" class="input-sm form-control" name="initiator" placeholder="輸入發起人姓名">
      </div>
 <div class="form-group col-lg-2 col-md-4 col-sm-4 col-xs-12">
          <label for="startDate">發起時間</label>
          <div class="input-daterange input-group" id="date">
            <input type="text" class="input-sm form-control" name="createdDtm" />
            <span class="input-group-addon">至</span> 
 <input type="text" class="input-sm form-control" name="createdDtm" />
          </div>
      </div>
 <div class="form-group col-lg-2 col-md-3 col-sm-4 col-xs-6">
          <label for="type">類型</label>
          <select name="type" class="input-sm form-control">
              <option value="" selected="selected">全部</option>
              <option value="1">搬運</option>
              <option value="0">維修</option>
              <option value="1,0">維修、搬運</option>
          </select>
      </div>
 <div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <label for="search"></label>
          <Button id="searchBtn" class="btn btn-sm btn-default">
          <i class="glyphicon glyphicon-search"></i>&nbsp;查詢 </Button>
      </div>
   </div>

 </div>

 js代碼：

var searchformData={}; //定義一個全局變量收集表單數據。
$("#searchBtn").on("click", function() { searchformData = form2js($("#searchForm")[0]);//將收集到的表單數據使用form2js轉換為json格式。 console.log(searchformData); $("#table").bootstrapTable("refresh", { //BootstrapTable定義的方法，refresh。 query: searchformData }); });

 refresh方法：刷新遠程服務器上的數據，設置{query:{k:v}}來通過這個請求查詢參數。具體詳見BootstrapTable文檔。

 

通過文檔可以看出，這個查詢參數（query param）是json數據格式，所以這就體現了form2js的用處。

使用form2js后收集的表單數據如下，是json格式，這樣就能從服務器加載查詢的那條記錄。

 

 

--------------------------------------------------------------------------------------------------------------------------------------分割線-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

結合jquery寫了原生js，可以達到類似的效果。

 

 

 

<div class="form-group">
     <div>
        <input type="text" class="searEle" name="nickname" value="" placeholder="姓名" />
        <input type="text" class="searEle" name="phone" value="" placeholder="手機號碼" />
        <select name="sex" class="searEle">
            <option value="" selected="selected">全部</option>
            <option value="0">male</option>
            <option value="1">female</option>
        </select>
        <input id="searchcus" type="button" value="查詢" />
     </div>
     <div>
        <table id="cusTable"></table>
     </div>
</div>

 

 

  var a = [];//定義全局變量數組a和c。
  var c;

$("#searchcus").on("click", function() { a = []; //每次查詢結束清空數組。 search(); });
 function search() { //定義一個查詢函數search var x = $(".searEle").serializeArray(); //jquery序列化表格元素，返回json數據結構數據，此方法返回的是json對象而不是json字符串

 for(i = 0; i < x.length; i++) {
      if(x[i].value != "") { var searchformData = JSON.parse('{' + '"' + x[i].name + '"' + ':' + '"' + x[i].value + '"' + '}');//將json字符串轉換為json對象 a.push(searchformData); //將json對象放入數組中。 } } c = $.extend({}, a[0], a[1],a[2]);//用一個或多個其他對象來擴展一個對象，返回被擴展的對象。將a[0],a[1],a[2]的內容整合到｛｝中，
 不足之處在於，數組長度為多少（searEle的個數），這里就需要手動添加多少。
 $("#cusTable").bootstrapTable("refresh", { query: c }); }

 

 

 

 

 

變量 x：

 

變量c：和form2js中的searchformData一樣，json數據格式。