Bootstrap table 简单示例

最近开始要写一个bootstrap table。之前做过一个例子，但是具体细节不太清楚了，这次又要重新查一边细节。

bootstrap table应该是一个中国人写的，功能十分强大，但是例子很少。至少我在看的时候感觉挺麻烦的。也许没有找到方法。

其实生成bootstrap table方法很简单。

<table data-toggle="table" id="dataTable" data-url="data/contracts.json" data-single-select="true" data-click-to-select="true">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="contractNum">contractNum</th>
<th data-field="idCard">idCard</th>
<th data-field="status">status</th>
</tr>
</thead>
</table>

这样声明一下就可以了，data-url是如何得到数据的。其他的属性也很容易理解。

具体有哪些属性，可以直接参考bootstrap table js的内容。我也只用了一点点，给自己留个备忘录吧，以后需要的时候再研究研究。

BootstrapTable.DEFAULTS = {        classes: 'table table-hover',        sortClass: undefined,        locale: undefined,        height: undefined,        undefinedText: '-',        sortName: undefined,        sortOrder: 'asc',        sortStable: false,        striped: false,        columns: [[]],        data: [],        totalField: 'total',        dataField: 'rows',        method: 'get',        url: undefined,        ajax: undefined,        cache: true,        contentType: 'application/json',        dataType: 'json',        ajaxOptions: {},        queryParams: function (params) {            return params;        },        queryParamsType: 'limit', // undefined        responseHandler: function (res) {            return res;        },        pagination: false,        onlyInfoPagination: false,        paginationLoop: true,        sidePagination: 'client', // client or server        totalRows: 0, // server side need to set        pageNumber: 1,        pageSize: 10,        pageList: [10, 25, 50, 100],        paginationHAlign: 'right', //right, left        paginationVAlign: 'bottom', //bottom, top, both        paginationDetailHAlign: 'left', //right, left        paginationPreText: '‹',        paginationNextText: '›',        search: false,        searchOnEnterKey: false,        strictSearch: false,        searchAlign: 'right',        selectItemName: 'btSelectItem',        showHeader: true,        showFooter: false,        showColumns: false,        showPaginationSwitch: false,        showRefresh: false,        showToggle: false,        buttonsAlign: 'right',        smartDisplay: true,        escape: false,        minimumCountColumns: 1,        idField: undefined,        uniqueId: undefined,        cardView: false,        detailView: false,        detailFormatter: function (index, row) {            return '';        },        trimOnSearch: true,        clickToSelect: false,        singleSelect: false,        toolbar: undefined,        toolbarAlign: 'left',        checkboxHeader: true,        sortable: true,        silentSort: true,        maintainSelected: false,        searchTimeOut: 500,        searchText: '',        iconSize: undefined,        buttonsClass: 'default',        iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)        icons: {            paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',            paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',            refresh: 'glyphicon-refresh icon-refresh',            toggle: 'glyphicon-list-alt icon-list-alt',            columns: 'glyphicon-th icon-th',            detailOpen: 'glyphicon-plus icon-plus',            detailClose: 'glyphicon-minus icon-minus'        },