关于前端组件bootstrap使用上的几点小技巧
1.再次查询时不是以第1页开始的
如果已经翻到第5页了,这个时候改变了一下查询条件,重新点击查询,这个时候会发现请求的根据最新查询条件的第5页的数据,而一般大家是希望点击查询按钮时重新从第1页进行查询
那么可以这样
$('#tb_datagrid').bootstrapTable('refreshOptions',{pageNumber:1});
2.如果不同的查询条件对应最终的列也不一样,该如何办呢
var type=$(".type").selectpicker("val");
if(type==1){
$('#tb_datagrid').bootstrapTable('hideColumn','shop_name');
$('#tb_datagrid').bootstrapTable('showColumn','sku_sales_shop_cnt');
}else{
$('#tb_datagrid').bootstrapTable('hideColumn','sku_sales_shop_cnt');
$('#tb_datagrid').bootstrapTable('showColumn','shop_name');
}
3.如何自定义数据项展示效果呢
{
field: "upc_code",
title: "商家商品编码/UPC编码",
formatter: function (value, row, index) {
var tmpHtml="<div class='codegood'>";
tmpHtml += "<div><span>商家商品编码:</span>"+row.out_sku_id +"</div>";
tmpHtml += "<div><span>UPC编码:</span>"+row.upc_code +"</div>";
tmpHtml += "</div>";
return tmpHtml;
}
}
参考代码
function doSearch(){
//oTable.init();
var type=$(".type").selectpicker("val");
if(type==1){
$('#tb_datagrid').bootstrapTable('hideColumn','shop_name');
$('#tb_datagrid').bootstrapTable('showColumn','sku_sales_shop_cnt');
}else{
$('#tb_datagrid').bootstrapTable('hideColumn','sku_sales_shop_cnt');
$('#tb_datagrid').bootstrapTable('showColumn','shop_name');
}
$('#tb_datagrid').bootstrapTable('refreshOptions',{pageNumber:1});
$("#tb_datagrid").bootstrapTable("refresh", oTable.queryParams);
}
}, {
field: "upc_code",
title: "商家商品编码/UPC编码",
formatter: function (value, row, index) {
var tmpHtml="<div class='codegood'>";
tmpHtml += "<div><span>商家商品编码:</span>"+row.out_sku_id +"</div>";
tmpHtml += "<div><span>UPC编码:</span>"+row.upc_code +"</div>";
tmpHtml += "</div>";
return tmpHtml;
}
}, {