bootstrap bootstrapTable 前端实用方法(长期更新)

最新推荐文章于 2024-03-21 02:22:12 发布

原创最新推荐文章于 2024-03-21 02:22:12 发布

· 置顶 · 769 阅读

0 ·

版权

文章标签：

#bootstrap #javascript #jquery #html5 #css

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

bootstrap table

3 篇文章

订阅专栏

本文分享了使用Bootstrap框架的几个实用技巧，包括按钮防二次点击动画、解决模态框滚动问题、表格刷新及数据加载策略、表格列过长的优雅处理方案、加载表格异常的解决办法以及单元格的合并与对齐技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮防止2次点击的动画事件

$('#myBtn').on('click', function () {
     var $btn = $(this).button('loading');
     setTimeout(function () {
            $btn.button('reset');
            //如果不想恢复 可换一种展示
           //$("#saveInquiryFrom").html('<i class="fa fa-save"></i>'+' 已保存')
     }, 2000);
})

效果图

点击后的2秒内 2秒后恢复

模态框弹出后不能滚动问题

bootstrap 弹出一个模态框后，再弹出第二个模态框之后关闭第二个模态框，第一个模态框不能滚动问题

第一个模态框的div 附加： aria-hidden="true" style="overflow:auto;" 即可

bootstrapTable的刷新事件

$("#historyTable").bootstrapTable('refresh');

有时候refresh无效 ,需要先销毁(destroy)再重新加载

$('#historyTable').bootstrapTable('destroy').bootstrapTable({
    toggle: 'table',
    method: 'post',
    url: './personal/findByMonth',
    dataType: "json",
    queryParams:function (queryParams) {
        var temp = {
            Month : $('#year').val()
        };
        return temp;

    },

    onLoadSuccess: function (data) {
        $('#MonthTable').bootstrapTable('destroy').bootstrapTable({
            data: data.data,
            toolbar: '#toolbar',

            cache: false,
            striped: true,
            exportDataType: "basic",
            sortOrder: "desc",
            columns: [
                [
                    {
                        title: "专家选用次数_月份统计("+$('#year').val()+"年)",
                        halign:"center",
                        align:"center",
                        colspan: 2,
                    }
                ],
                [
                    {
                        title: "月份",
                        valign:"middle",
                        align:"center",
                        field:"月份"
                    },{
                    title: "次数",
                    valign:"middle",
                    align:"center",
                    field:"次数"
                }

                ]
            ],
        });


    },
    error: function () {
        alert("錯誤");
    },
});

bootstrapTable 中的td过长需要加省略号并且鼠标悬停显示全部

首先需要在html里加style="table-layout:fixed;width: 100%;"

<table class="table   table-striped" id="historyTable"  data-toggle="table" style="table-layout:fixed;width: 100%;">
</table>

然后在js中colums里加方法
cellStyle:pageLogic.formatter.formatTableUnit,
formatter: pageLogic.formatter.paramsMatter

$("#btTable").on("click", ".process", function (event) {
                        var id = $(event.target).attr("name");
                        $("#historyTable").bootstrapTable('destroy');
                        $('#historyTable').bootstrapTable({
                        toggle: 'table',
                        method: 'post', 
                        url: 'shiHouJianGuan/history',
                        toolbar: '#toolbar',
                        //pagination: true,//页数
                        //search: true,
                        queryParams: function (queryParams) {
                            var query = {
                                id
                            };
                            return query;
                        },//参数
                        showColumns: true,
                        showRefresh: true,
                        //pageSize: '10',
                        columns: [{
                            title: 'id',
                            field: 'id',
                            align: 'center',
                            valign: 'middle',
                            width: '7%',
                            visible: false
                        },{
                            field: 'indexs',
                            title: '序号',
                            width: '40px',
                            align: 'center',
                            valign: 'middle',
                        },{
                            field: 'jcr',
                            title: '检查人',
                            width: '100px',
                            align: 'center',
                            valign: 'middle',
                            cellStyle:pageLogic.formatter.formatTableUnit,
                            formatter: pageLogic.formatter.paramsMatter
                        }, {
                            field: 'jcrq',
                            title: '检查日期',
                            width: '100px',
                            align: 'center',
                            valign: 'middle',
                            formatter:function (jcrq) {
                                jcrq = jcrq.substr(0,10)
                                return jcrq;
                            }
                        },  {
                            field: 'xksx',
                            title: '许可事项',
                            align: 'center',
                            cellStyle:pageLogic.formatter.formatTableUnit,
                            formatter: pageLogic.formatter.paramsMatter
                        }, {
                            field: 'result',
                            title: '备注',
                            align: 'center',
                            valign: 'middle',
                            cellStyle:pageLogic.formatter.formatTableUnit,
                            formatter: pageLogic.formatter.paramsMatter
                        },{
                            field: 'operate',
                            title: '操作',
                            width: 120,
                            align: 'center',
                            valign: 'middle',
                            formatter: pageLogic.formatter.actionHistoryFormatter,
                        }
                        ]
                    })
                        $('#myModal').off('shown.bs.modal');
                });

实现

            paramsMatter:function(value, row, index){
                var span=document.createElement('span');
                span.setAttribute('title',value);
                span.innerHTML = value;
                return span.outerHTML;
            },
            formatTableUnit:function(value, row, index){
                return {
                    css: {
                        "width":'200px',
                        "white-space": 'nowrap',
                        "text-overflow": 'ellipsis',
                        "overflow": 'hidden'
                    }
                }
            },

通过js加载bootstrapTable可能异常没有标题没有数据的情况

$("#historyTable").bootstrapTable('destroy');

bootstrapTable 单元格合并水平居中垂直居中 columns 中设置

columns: [
                            [
                                {
                                    title: "各机构南京地区业务情况(" + tYear + "年)",
                                    halign:"center",
                                    align:"center",
                                    colspan: 11,
                                }
                            ],[
                                {
                                    title: "单位名称",
                                    halign:"center",
                                    align:"center",
                                    valign:"middle",
                                    rowspan: 2,
                                },{
                                    title: "总产值（万元）",
                                    halign:"center",
                                    align:"center",
                                    valign:"middle",
                                    rowspan: 2,
                                },{
                                    title: "总面积（m2）",
                                    halign:"center",
                                    align:"center",
                                    valign:"middle",
                                    rowspan: 2,
                                },{
                                    title: "总数（栋）",
                                    halign:"center",
                                    align:"center",
                                    valign:"middle",
                                    rowspan: 2,
                                },{
                                    title: "南京地区各类型鉴定情况（栋）",
                                    halign:"center",
                                    align:"center",
                                    colspan: 6,
                                },{
                                    title: "公益项目面积（m2）",
                                    halign:"center",
                                    align:"center",
                                    valign:"middle",
                                    rowspan: 2,
                                },
                            ],[
                                {
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                },{
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                },{
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                },{
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                },{
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                },{
                                    title: "危险性房屋鉴定",
                                    halign:"center",
                                    align:"center",

                                }
                            ]
                        ]

效果如下