bootstarp table 採坑專輯

首先bootstarp table 這個組件是由國人大牛 文翼 開發的，github地址 https://github.com/wenzhixin/...

咱們在一次項目開發中使用到了原生的php + html5的先後分離技術。 php接口設計如restful ，若是不知道restful那請百度把，返回的全部數據均爲json。

當涉及到分頁後由於前端頁面使用了bootstarp 爲了兼容問題，咱們繼續試用了bootstarp table插件來進行數據分頁
bootstarp 有兩種配置方法，寫法與應用相似 easyui這種老ui框架，不過我以爲easyui 是真的好用，而且easyui的異步tree 真的是太強了固然還有不少現成的tree組件，由於公司前端缺乏，咱們php兼職寫頁面，你懂得哈。

下面介紹bootstarp配置 ：js 配置

<table id ='std-list'></table>

<script>
$('#std-list').bootstrapTable({
                    url: 'controller/standard.php?op=query',
                    method: "post",  //使用post發送數據的時候 須要設置contenType否則後臺沒法接受數據
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    toolbar: '#toolbar1', // 對應你table裏面的工具欄
                    pagination: true, //打開分頁
                    pageSize: 10,//一頁放多少個數據
                    showRefresh: true,//現實刷新按鈕
                    showToggle: true,
                    pageList: [10, 20],//設置能夠每頁現實的數據量
                    strictSearch: true,
                    singleSelect: false,//單選多選
                    search: false,//搜索框（當前端分頁時候，搜索框能夠本身過濾數據，後端分頁無心義）
                    onCheck: function(row, $element) {},
                    queryParams: function(params) { //向後臺發送的參數均可以寫這裏
                        var temp = {
                            pageSize: params.limit, //頁面大小
                            pageNumber: params.offset, //頁碼
                            op: s,
                            conds: data
                        };
                        return temp;
                    },
                    rowStyle: function(row, index) { //改變行樣式。也可使用cellStyle改變單元格樣式
                        console.log(1);
                    },
                    sidePagination: 'server',
                    columns: [{
                            checkbox: true
                        }, {
                            field: 'StandardNumber',
                            title: '標準編號'
                        }, {
                            field: 'StandardName',
                            title: '標準名稱'
                        },

                        {
                            field: 'StandardLevel',
                            title: '標準類別'
                        },

                        {
                            field: 'QyStandardNumber',
                            title: '企標編號'
                        },
                        {
                            field: 'ReferStandardNumber',
                            title: '引用標準'
                        },
                        {
                            field: 'FileName',
                            title: '查看全文',
                            formatter: function(value, row, index) { //格式化你想要的數據
                                if(value) {
                                    var list = [];
                                    list.push(value);
                                    for(var i = 0; i < list.length; i++) {
                                        //console.log(list[i]);
                                        if(list[i] != null) {
                                            var str = list[i];
                                            var conds = str.indexOf('.');
                                            var type = str.substr(conds, str.length)
                                            if(type == ".pdf") {
                                                return '<img src="img/pdf.png" onClick="lookText(\'' + index + '\')">' + '</img>';
                                            } else if(type == ".txt") {
                                                return '<img src="img/txt.png" onClick="lookText(\'' + index + '\')">' + '</img>';
                                            } else if(type == ".docx" || type == ".doc") {
                                                return '<img src="img/doc.png" onClick="lookText(\'' + index + '\')">' + '</img>';
                                            } else if(type == ".png" || type == ".jpg") {
                                                return '<img src="img/img.png" onClick="lookText(\'' + index + '\')">' + '</img>';
                                            }
                                        }
                                    }
                                } else {
                                    return '';
                                }

                            }
                        },
                        {
                            field: 'IsCancel',
                            title: '是否做廢'
                        }
                    ],
                    rowStyle: function(value, row, index) {
                        if(value) {
                            var list = [];
                            list.push(value);
                            for(var i = 0; i < list.length; i++) {
                                console.log(list[i].IsCancel);
                                if(list[i].IsCancel == '是') {
                                    console.log(1);
                                    var style = {};
                                    style = {
                                        css: {
                                            'color': 'red'
                                        }
                                    };
                                    return style;
                                } else {
                                    var style = {};
                                    style = {
                                        css: {
                                            'color': ''
                                        }
                                    };
                                    return style;
                                }
                            }

                        }

                    }

                });



</script>

附上表格，以上分頁爲後臺分頁，後臺分頁返回的數據格式應爲 ｛total:'你的總數'，rows:'你的數據'｝前臺分頁只須要返回｛rows：rows｝便可
最後附上個人json格式
{

"total": "2",
"rows": [{
    "Id": "6",
    "StandardName": "1994",
    "StandardNumber": "GB-100-1994",
    "StandardLevel": "",
    "QyStandardNumber": "",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "否",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": null,
    "FileContent": null
}, {
    "Id": "4",
    "StandardName": "4",
    "StandardNumber": "4",
    "StandardLevel": "",
    "QyStandardNumber": "1",
    "ReferStandardNumber": "",
    "ReferLevel": "",
    "ClassNumber": "",
    "DraftUnit": "",
    "PublishDate": "",
    "ImplementDate": "",
    "InputDatabaseDate": "",
    "IsCancel": "是",
    "CancelDate": "",
    "StructureID": "",
    "OldStandardNumber": "",
    "OldStandardName": "",
    "StandardMemo": "",
    "UseDepartment": "",
    "FileName": "變電設備在線監測I2接口網絡通訊規-範.pdf",
    "FileContent": "{\"database\":\"m2018.php\",\"key\":\"4\"}"
}]

}

這裏我對html直接生成table 不作介紹了。詳細能夠查看文檔或者百度
在使用bootstarp table 中咱們有時候會涉及到更新頁面一個數據或者刪除一個數據的操做，刪除和更新的是指定行
須要獲取 index 下表
例以下面的updateRow 更新指定行

$('#std-list').bootstrapTable('updateRow', {
                            index: getRowIndex('#std-list', row[current]),
                            row: {
                                StandardName: StandardName,
                                StandardLevel: StandardLevel,
                                QyStandardNumber: QyStandardNumber,
                                ReferStandardNumber: ReferStandardNumber,
                                UseDepartment: UseDepartment,
                                ReferLevel: ReferLevel,
                                ClassNumber: ClassNumber,
                                StructureId: StructureId,
                                DraftUnit: DraftUnit,
                                PublishDate: PublishDate,
                                InputDatabaseDate: InputDatabaseDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                CancelDate: CancelDate,
                                OldStandardNumber: OldStandardNumber,
                                OldStandardName: OldStandardName,
                                StandardMemo: StandardMemo,
                                IsCancel: cancellation
                            }
                        });

我推薦使用這種方法獲取index（下標）

function getRowIndex(sel, row) {
        var data = $(sel).bootstrapTable('getData');
        for(var i = 0; i < data.length; i++) {
            if(row == data[i])
                return i;
        }
        return -1;
    }

前端分頁神器值得一用！