Bootstrap Table 搜索框和查询功能

Bootstrap Table 搜索框和查询功能

1..知识点bootstrapTable 刷新和查询配置

2.提升js代码性能

1.减少全局变量声明

2.缓存dom节点查找结果

3.局部变量缓存全局变量

/**

* @param col bootstrapTable列表生成配置对象

*/

var searchValue ={};//查询匹配对象

var $button = $('

var $input = $('

var $select = $('

var addSearchGroup = function(col)

{

// 插入选项

var button ,input,select;

button = $button;input = $input;select = $select;////局部变量缓存全局变量 提高代码性能

var selectDom = $select.find('select');////缓存dom节点查找结果 避免在循环里用

for(var i = 0; i < col.length; i++){

if(col[i].visible != false){

var $option = ''+col[i].title+'';

selectDom.append($option);

}

}

//插入多选框、输入框、按钮

$('.fixed-table-toolbar').append(button,input,select);

}

/*

button = $button

*/

searchAction($button);

function searchAction(button){

//写入上一次查询的条件

if(searchValue.select != undefined){

$select.find('select').val(searchValue.select);

};

if(searchValue.input != undefined){

$input.find('input').val(searchValue.input);

};

//写入查询条件

// 获取查询选项

button.click(function(){

var option = $select.find('select').val();

var inputval = $input.find('input').val();

searchValue.select =option;

searchValue.inputval =inputval;

//定义刷新参数

if(inputval != ''){

var param = {

url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),

query: {

filters:[

{'colname':option,'filtertype':'LIKE','filtervalues':inputval}

]

}

}

}else{

var param = {

url: sWebRootPath+"/json/getAjaxData.jsp?v="+new Date().getTime(),

}

}

// 刷新表格

$('#tablelist').bootstrapTable('refresh',param);

});

}

总结

以上所述是给大家介绍的Bootstrap Table 搜索框和查询功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。