[轉]bootstrap table本地數據使用方法

原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136

data對應columns進行組合

var columns = [
            {
                field: 'fid',
                title: '編號',
                align: 'center',
                halign: 'center',
                valign: 'middle',
                width: '50%'
            }, {
                field: 'realval',
                title: '施工狀態',
                formatter: function (index, row) {
                    var d = row['realval'];
                    if (d == 1.0) {
                        return '完工'
                    }
                    return '未完工';
                },
                align: 'center',
                halign: 'center',
                valign: 'middle',
                width: '50%'
            }
        ];
$('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
            data: data,
            classes: 'table table-hover',
            //height: 400,
            //url: queryUrl,                      //請求後臺的URL（*）
            //method: 'GET',                      //請求方式（*）
            //toolbar: '#toolbar',              //工具按鈕用哪一個容器
            striped: true,                      //是否顯示行間隔色
            //cache: false,                       //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
            //pagination: true,                   //是否顯示分頁（*）
            //sortable: true,                     //是否啓用排序
            //sortOrder: "asc",                   //排序方式
            //sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            //pageNumber: 1,                      //初始化加載第一頁，默認第一頁,並記錄
            //pageSize: rows,                     //每頁的記錄行數（*）
            //pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
            search: false,                      //是否顯示錶格搜索
            strictSearch: false,
            showColumns: false,                  //是否顯示全部的列（選擇顯示的列）
            //showRefresh: true,                  //是否顯示刷新按鈕
            //minimumCountColumns: 2,             //最少容許的列數
            clickToSelect: true,                //是否啓用點擊選中行
            uniqueId: "fid",                     //每一行的惟一標識，通常爲主鍵列
            showToggle: false,                   //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                  //是否顯示父子表
            //獲得查詢的參數
            //queryParams: function (params) {
            //    //這裏的鍵的名字和控制器的變量名必須一致，這邊改動，控制器也須要改爲同樣的
            //    var temp = {
            //        rows: params.limit,                         //頁面大小
            //        page: (params.offset / params.limit) + 1,   //頁碼
            //        sort: params.sort,      //排序列名
            //        sortOrder: params.order //排位命令（desc，asc）
            //    };
            //    return temp;
            //},
            columns: columns,
            onLoadSuccess: function () {
            },
            onLoadError: function () {
                showTips("數據加載失敗！");
            },
            onClickRow: function (row, $element) {
                return;
                var featureid = row.fid;
                var realval = row.realval;
                if (realval == 1) {
                    realval = 0;
                } else {
                    realval = 1;
                }
                updatePlanVal(featureid, realval);
            },
            onDblClickRow: function (row, $element) {
                var id = row.ID;
                EditViewById(id, 'view');
            }
        });
        $('#table').on('post-body.bs.table', function (e) {//渲染完成，從新設置高度
            var h = $('#table').height();
            if (h > 500) {
                $('#table').bootstrapTable('resetView', { 'height': 300 });
            }
        });

###獲取bootstraptable數據

var data = $('#table').bootstrapTable('getData');

###從新設置bootstraptable數據

$('#table').bootstrapTable('load', newData);