bootstarp table 采坑專輯

wwq0327 發布于2019-07-01 12:29 / 1211人閱讀

摘要：首先這個組件是由國人大牛文翼開發的，地址我們在一次項目開發中使用到了原生的的前后分離技術。接口設計如，如果不知道那請百度把，返回的所有數據均為。

首先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 配置

附上表格，以上分頁為后臺分頁，后臺分頁返回的數據格式應為｛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;
    }

前端分頁神器值得一用！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/30811.html

bootstarp table 采坑專輯

摘要：首先這個組件是由國人大牛文翼開發的，地址我們在一次項目開發中使用到了原生的的前后分離技術。接口設計如，如果不知道那請百度把，返回的所有數據均為。首先bootstarp table 這個組件是由國人大牛文翼開發的，github地址 https://github.com/wenzhixin/... 我們在一次項目開發中使用到了原生的php + html5的前后分離技術。 php接口設...

joyvw 2019-08-22 17:28 評論0 收藏0
bootstarp table 采坑專輯

摘要：首先這個組件是由國人大牛文翼開發的，地址我們在一次項目開發中使用到了原生的的前后分離技術。接口設計如，如果不知道那請百度把，返回的所有數據均為。首先bootstarp table 這個組件是由國人大牛文翼開發的，github地址 https://github.com/wenzhixin/... 我們在一次項目開發中使用到了原生的php + html5的前后分離技術。 php接口設...

googollee 2019-08-02 10:31 評論0 收藏0
電商系統設計之商品 (中)

摘要：我一直在說電商是一個既簡單又復雜的東西本章我們再一次深度解析電商系統商品設計的更多邏輯與實現。品牌無需關聯到內，道理很簡單，當前的是歸屬與蘋果公司，自然而然下面的規格都屬于蘋果了。 showImg(https://segmentfault.com/img/bVbdtuc?w=1824&h=1028); 電商大伙每天都在用，類似某貓，某狗等。電商系統設計看似復雜又很簡單，看似簡單又很復雜...

banana_pi 2019-07-01 10:17 評論0 收藏0
Bootstarp的安裝以及簡單的使用方法（pycharm中）

一.安裝首先打開Bootstarp的官網：https://v3.bootcss.com 下載完成后，解壓壓縮包，把解壓后的文件導入pycham中在HTML頁面中的style中導入bootstrap的css文件和js文件，建議導入min.css，體積更小以我的文件路徑為例：安裝完成二.更改pycharm的默認HTML頁面(可跳過) 在pycharm中創建一個新的HTML頁面，如果...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0