关于前端组件bootstrap使用上的几点小技巧

最新推荐文章于 2025-05-15 01:40:40 发布

原创最新推荐文章于 2025-05-15 01:40:40 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端

java 同时被 2 个专栏收录

100 篇文章

订阅专栏

前端

9 篇文章

订阅专栏

本文介绍了使用Bootstrap前端组件时的一些实用技巧，包括如何在更改查询条件后返回第一页，根据不同查询条件显示不同的列，以及如何自定义数据项的展示样式等。

关于前端组件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;
    }
}, {