bootstraptable 超多列_Bootstrap Table

AJAX:

Use url, method, cache, contentType, dataType, queryParams, queryParamsType, responseHandler options to set the AJAX request and response params.

基本表格

不通过JavaScript的方式启动Bootstrap Table(使用data-toggle="table")。

Item IDItem NameItem Price

Item IDItem NameItem Price

0Item 0$0

1Item 1$1

2Item 2$2

3Item 3$3

4Item 4$4

5Item 5$5

6Item 6$6

7Item 7$7

8Item 8$8

9Item 9$9

10Item 10$10

11Item 11$11

12Item 12$12

13Item 13$13

14Item 14$14

15Item 15$15

16Item 16$16

17Item 17$17

18Item 18$18

19Item 19$19

20Item 20$20

Item IDItem NameItem Price

表格转换

从已经存在、未被格式化的表格中转换为Bootstrap Table。

Item ID

Item Name

Item Price

1

Item 1

$1

2

Item 2

$2

3

Item 3

$3

4

Item 4

$4

5

Item 5

$5

Transform

Destroy

Item IDItem NameItem Price

1Item 1$12Item 2$23Item 3$34Item 4$45Item 5$5

$(function () {

var $table = $('#table-transform');

$('#transform').click(function () {

$table.bootstrapTable();

});

$('#destroy').click(function () {

$table.bootstrapTable('destroy');

});

});

表格样式

用height, classes, striped, rowStyle 属性和class, width, cellStyle 列属性设置 bootstrap table 的样式。

hover

striped

condensed

Item ID

Item Name

Item Price

hover

striped

condensed

Item ID

Item Name

Item Price

$(function () {

$('#hover, #striped, #condensed').click(function () {

var classes = 'table';

if ($('#hover').prop('checked')) {

classes += ' table-hover';

}

if ($('#condensed').prop('checked')) {

classes += ' table-condensed';

}

$('#table-style').bootstrapTable('destroy')

.bootstrapTable({

classes: classes,

striped: $('#striped').prop('checked')

});

});

});

function rowStyle(row, index) {

var classes = ['active', 'success', 'info', 'warning', 'danger'];

if (index % 2 === 0 && index / 2 < classes.length) {

return {

classes: classes[index / 2]

};

}

return {};

}

列对齐

使用 align, halign 和 valign 来设置列和表头的对齐方式。

Item ID

Item Name

Item Price

Item IDItem NameItem Price

表格排序

基本排序

使用 sortName, sortOrder, sortable 属性和 sortable, order 列属性去设置表格的基本排序。

Item ID

Item Name

Item Price

Item IDItem NameItem Price

自定义排序

使用 sorter列属性来定义表格的自定义排序。

Item ID

Item Name

Item Price

Item IDItem NameItem Price

function priceSorter(a, b) {

a = +a.substring(1); // remove $

b = +b.substring(1);

if (a > b) return 1;