form2js的使用（续BootstrapTable）

Posted 2020-08-17 Cryst

通过收集表单数据，并且转换为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数据格式。