如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中

页面:

复制代码

<div>
  <form id="exp_form">
     查询参数...
   <button type="button" οnclick="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对线,将分页参数放入。这下就可以用这个通用的方式,来将表单参数放入,不用担心参数多少的问题了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值