bootstrap表格合并多⾏的使⽤⽅法
1 function initTable(tableID) {
2    $("#" + tableID).bootstrapTable('destroy');
3    $('#' + tableID).bootstrapTable({
4        method: 'post',
5        url: primary_url,
6        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
7        showRefresh: false,
8        // height: $(window).height()+500,
9        striped: true,
10        pagination: false,
11        paginationLoop: false,
12        singleSelect: false,
13        // pageSize: 300,
14        pageList: ['All'],  //设置为 All 或者 Unlimited，则显⽰所有记录。
15        search: false, //不显⽰搜索框
16        showHeader: true,
17        showColumns: false, //不显⽰下拉框（选择显⽰的列）
18        showExport: false,//是否显⽰导出
19        paginationVAlign: "bottom",
20        exportDataType: "all",
21        sidePagination: "server", //服务端请求
22        queryParams: queryParams,
23        sortable: false,    //是否允许排序.
24        minimunCountColumns: 2,
25        queryParamsType: 'limit',
26        columns: [{
27            field: '⼤项',
28            title: '评估⼤项',
29            width: '7%',
30            align: 'left',
31            valign: 'middle',
32            formatter: joinPingGuDaXiang,
33            sortable: true
34        }, {
35            field: '⼩项',
36            title: '评估⼩项',
37            width: '10%',
38            align: 'left',
39            valign: 'middle',
40            formatter: joinPingGuXiaoXiang,
41            sortable: true
42        }, {
43            field: '⼩项序号',
44            title: '序号',
45            width: '3%',
46            align: 'center',
47            valign: 'middle',
48            sortable: true
49        }],
95        onLoadError: function (data) {
96
97        },
98        onLoadSuccess: function (data) {
99            if (de == "1" && ssage == "成功") {
100                // console.log( $('#' + tableID)["0"].clientHeight);    //这种办法可以取到bootstrap表格的⾼度
101                /*
102                要根据当前⾏的⼤项 == prevBigItem，和当前⾏的⼩项的parentid是否相同，结合来判定合并表格的单元格. 103                  */
104                var prevBigItem = "";  //前⼀⾏的评估⼤项
105                var prevSmallItem = ""; //前⼀⾏的评估⼩项
106                var prevParentID = "";  //前⼀⾏的评估⼩项的id号
107                var currentRowBigIndex = 0;    //要合并的⼤项⾏组⾥第⼀⾏的下标
108                var bigRowspan = 1;            //要rowspan的⼤项⾏数.
109
110                //⼩项的⾏下标/合并的⾏数
111                var currentRowSmallIndex = 0;
112                var smallRowspan = 1;
113
114                for (var i = 0; i < al; i++) {
115                    var row = ws[i];
116                    var wd_name = data.v_wd;
121
128                    if (row.⼤项 == prevBigItem) {
129                        //⼤项重合了哈哈哈居然好啦
130
131                        bigRowspan++;
132                        $("#" + tableID).bootstrapTable('mergeCells', {
133                            index: currentRowBigIndex,
134                            field: '⼤项',
135                            colspan: 1,
136                            rowspan: bigRowspan
137                        });
138
139
140                        if (row.PARENTID == prevParentID) {
141                            //⼩项重合了
142
143                            smallRowspan++;
144
145                            $("#" + tableID).bootstrapTable('mergeCells', {
146                                index: currentRowSmallIndex,
147                                field: '⼩项',
148                                colspan: 1,
149                                rowspan: smallRowspan
150                            });
151
152                            /*$("#" + tableID).bootstrapTable('mergeCells', {
153                                index: currentRowSmallIndex,
154                                field: '附件数量',
155                                colspan: 1,
156                                rowspan: smallRowspan
157                            });*/
158
159                            $("#" + tableID).bootstrapTable('mergeCells', {
160                                index: currentRowSmallIndex,
161                                field: '⼩项得分',
162                                colspan: 1,
163                                rowspan: smallRowspan
164                            });
165                        } else {
166                            currentRowSmallIndex = parseInt(row.DISPID) - 1;
167                            smallRowspan = 1;
tabletable
168                        }
169                    } else {
170                        currentRowBigIndex = parseInt(row.DISPID) - 1;  //重置初始化.
171                        bigRowspan = 1;    //重置初始化.
172                        currentRowSmallIndex = parseInt(row.DISPID) - 1;
173                        smallRowspan = 1;
174                    }
175
176
177                    /*
178                    构造bootstrap的开关按钮和下拉框
179                      */
182                    prevBigItem = row.⼤项;
183                    prevSmallItem = row.⼩项;
184                    prevParentID = row.PARENTID;
196            }
197
198        },
199        onRefresh: function () {
200            afterflash = 1;
201
202        },
203        onPostBody: function () {
204
205        }
206
207    });
208 }
$('#' + tableID)["0"].clientHeight，可以在bootstrap的表格成功⽣成后取得其⾼度，是为数不多的能取得表格的⽅法之⼀. bootstrap table可以在初始化⽅法⾥，加⼊height属性:500(或1000)，这样也能定下⾼度.不够会有留⽩，超出了会⾃动出现滚动条.表格合并，这⾥采取是表格加载成功后，再给予'mergeCell
s'单元格合并.以当前⼤⼩项和parentid和上⼀个同指标相⽐较，如果相同, currentRowBigIndex和bigRowspan都进⾏相应的变化,
就加以合并；否则,currentRowBigIndex和bigRowspan都给重置初始化.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。