bootstrap table 动态刷新表头以及数据

要做一个月考勤统计,致使表头及数据会根据搜索月份发生变化,网上找了很多办法

比如博主:阿布布_0410
或者博主:Answerlzd
还有很多复制粘贴的帖子均不好使,自己经过研究+瞎蒙 终于搞出来了,很简单!

主要思路

1.通过搜索条件,ajax异步去后台获取需要展示的表头,页面进行组装

2.调用bootstrap

3.没了…

function getTableColumn() {
        $.ajax({
            type: "POST",
            url: "/getMonthHead",//这里是异步获取表头的URL,你需要改
            async: true,
            data: {"month": $("#month").val()},//这里改成你自己的参数
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
            	//我这里data后台返回的是List<String> 这种类型的
                var options = {
                    url: prefix + "/list", //这里是异步获取表格数据的URL,你需要改
                    modalName: "人员出勤记录",//需要改 或者直接为空
                    showExport: true, //要不要都行,不要就删了
                    columns: [{
                        checkbox: true
                    },
                    	//以下三个花括号因为我有公用的三列,如果你没有就全删了
                        {
                            field: 'personName',
                            title: '员工姓名',
                            sortable: false
                        }, {
                            field: 'dept',
                            title: '部门',
                            sortable: false
                        }, {
                            field: 'post',
                            title: '岗位',
                            sortable: false
                        }
                    ]
                };
                //这里遍历返回的表头集合,并组装到options里
                $.each(data, function (i, o) {
                    var param = {};
                    param.field = o;
                    param.title = o;
                    options.columns.push(param);
                })
                
                **$.table.destroy();//关键部分:刷新表头必须销毁原表格
                $.table.init(options);**
            }
        });
    }

上面加粗的两行代码说明一下

$.table.destroy();
如果你的是原生bootstrap,那正确的写法应该是
$("#你的table唯一ID").bootstrapTable('destroy');
$.table.init(options);
如果你的是原生bootstrap,那正确的写法应该类似
$("#你的table唯一ID").bootstrapTable({
				url: options.url,                                   // 请求后台的URL(*)
                    contentType: "application/x-www-form-urlencoded",   // 编码类型
                    method: 'post',                                     // 请求方式(*)
                    cache: false,                                       // 是否使用缓存
                    height: options.height,                             // 表格的高度
                    striped: options.striped,                           // 是否显示行间隔色
                    sortable: true,                                     // 是否启用排序
                    sortStable: true,                                   // 设置为 true 将获得稳定的排序
                    sortName: options.sortName,
                    ... //这里省略了其他配置
				});

然后每次条件查询调用一下getTableColumn()就好了

猜你喜欢

转载自blog.csdn.net/u013204622/article/details/103628814