如何将自定义的搜索参数便捷的添加到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对线,将分页参数放入。这下就可以用这个通用的方式,来将表单参数放入,不用担心参数多少的问题了。