【Bootstrap Table】表格列合并 && 设置表格内容为勾选框

心已赠人 2022-12-11 09:27 618阅读 0赞

# 效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZVdpc2VfbHp5_size_16_color_FFFFFF_t_70][]1.列合并： #

### 1.1写在$('\#bootstrap-table').bootstrapTable中 ###

onLoadSuccess: function () {//当所有数据被加载时触发处理函数
                var data = $('#bootstrap-table').bootstrapTable('getData', true);//获取当前页数据
                mergeCells(data,'number',1,$('#bootstrap-table')); //列名
                mergeCells(data,'item',1,$('#bootstrap-table'));
                mergeCells(data,'severity',1,$('#bootstrap-table'));
            },
            onPageChange: function (){//当页面更改页码或页面大小时触发
                var data = $('#bootstrap-table').bootstrapTable('getData', true);
                mergeCells(data,'number',1,$('#bootstrap-table'));
                mergeCells(data,'item',1,$('#bootstrap-table'));
                mergeCells(data,'severity',1,$('#bootstrap-table'));
            },

### 1.2写在$('\#bootstrap-table').bootstrapTable外面 ###

# 2.设置勾选框（在columns中） #

{
                    field: 'problem',
                    title: '检查问题',
                    width: '50px',
                    formatter: function (value, row , index) {
                        return '<input type="checkbox"/> ';
                    }
                },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZVdpc2VfbHp5_size_16_color_FFFFFF_t_70]: /images/20221123/5571e2ddf8ad44bb9c119d3464a76ac8.png