如何將自定義的搜索參數便捷的添加到js方式的bootstrap table的參數中


頁面:

<div>
  <form id="exp_form">
     查詢參數...
   <button type="button" onclick="search()" data-icon="search">查詢</button>
  </form>
</div>
<div>
  <table id="exp_table">
  </table>
</div>

bootstrap table的js:

function searc(){
  $('#exp_table').bootstrapTable('refresh');
} function queryParams(params) {   參數處理... } $('#exp_table').bootstrapTable({ url:"url", method:"post", dataType: "json", striped: true, contentType:"application/x-www-form-urlencoded; charset=UTF-8", height:556, width:1000, sidePagination:"server", queryParams:queryParams, queryParamsType:"limit", pagination: true, totalRows:20, pageNumber:1, pageSize:20, pageList:[20,50,100,150], idField:'keyid', paginationLoop:false, columns:[   列定義... ] , onPageChange:function(number, size){ queryParams.search=number; } });

參數方式是采用函數返回json對象:

  1、最開始采用的方式是直接寫在json對象中;

function queryParams(params) {
    var temp = {
         pageSize: params.limit,
         pageCurrent: params.offset/params.limit+1,
         name:$("#name").val()
    };
    return temp;
 }          

但是這樣的問題就是,當條件比較多的時候,就會顯得很龐大,需要些很多基本雷同的代碼。於是就開始思考有沒有便捷的方法添加參數,於是產生了下個版本。

2、利用jq的表單序列化方法在url后將表單數據拼接到url后面:

function SignRem_Init(){
        var opt = {
        url: "SignRemData.do?"+$("#exp_form").serialize()
        };
        $('#exp_table').bootstrapTable('refresh',opt);
}   
$(
'#exp_table').bootstrapTable({ url:"url?"+$("#exp_form").serialize(),
 ...
}

滿以為已經解決問題,確在測試時發現了問題,查詢什么的是可以了,但當翻頁時,發現只有分頁參數被提交了,表單數據沒有被同步提交,觸發翻頁函數后bootstrap table只是更新新了參數函數里面的參數,於是思考怎么把表單放到參數函數中去,於是有了第三個版本。

3、自定義一個函數將表單轉為json兌現。

表單轉json兌現的函數(利用了jq的表單序列化為數組的方法):

$.fn.serializeJsonObject = function() {  
    var json = {};  
    var form = this.serializeArray();  
    $.each(form, function() {  
        if (json[this.name]) {  
            if (!json[this.name].push) {  
                json[this.name] = [ json[this.name] ];  
            }  
            json[this.name].push( );  
        } else {  
            json[this.name] = this.value || '';  
        }  
    });  
    return json;  
}

function queryParams(params) {
    var temp = $("#exp_form").serializeJsonObject();
    temp["pageSize"]=params.limit;
    temp["pageCurrent"]=params.offset/params.limit+1;return temp;
  } 

利用得到的表單json對線,將分頁參數放入。這下就可以用這個通用的方式,來將表單參數放入,不用擔心參數多少的問題了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM