成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

bootstarp table 采坑專輯

googollee / 973人閱讀

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

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

我們在一次項(xiàng)目開發(fā)中使用到了原生的php + html5的前后分離技術(shù)。 php接口設(shè)計(jì)如restful ，如果不知道restful那請百度把，返回的所有數(shù)據(jù)均為json。

當(dāng)涉及到分頁后因?yàn)榍岸隧撁媸褂昧薭ootstarp 為了兼容問題，我們繼續(xù)試用了bootstarp table插件來進(jìn)行數(shù)據(jù)分頁
bootstarp 有兩種配置方法，寫法與應(yīng)用類似 easyui這種老ui框架，不過我覺得easyui 是真的好用，并且easyui的異步tree 真的是太強(qiáng)了當(dāng)然還有很多現(xiàn)成的tree組件，因?yàn)楣厩岸巳鄙?，我們php兼職寫頁面，你懂得哈。

下面介紹bootstarp配置 ：js 配置

附上表格，以上分頁為后臺分頁，后臺分頁返回的數(shù)據(jù)格式應(yīng)為 ｛total:"你的總數(shù)"，rows:"你的數(shù)據(jù)"｝前臺分頁只需要返回｛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": "變電設(shè)備在線監(jiān)測I2接口網(wǎng)絡(luò)通信規(guī)-范.pdf",
    "FileContent": "{"database":"m2018.php","key":"4"}"
}]

}

這里我對html直接生成table 不做介紹了。詳細(xì)可以查看文檔或者百度
在使用bootstarp table 中我們有時候會涉及到更新頁面一個數(shù)據(jù)或者刪除一個數(shù)據(jù)的操作，刪除和更新的是指定行
需要獲取 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（下標(biāo)）

    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;
    }

前端分頁神器值得一用！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52410.html

相關(guān)文章

  • bootstarp table 采坑專輯

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

    wwq0327 評論0 收藏0

  • bootstarp table 采坑專輯

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

    joyvw 評論0 收藏0

  • 電商系統(tǒng)設(shè)計(jì)之商品 (中)

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

    banana_pi 評論0 收藏0

  • Bootstarp的安裝以及簡單的使用方法（pycharm中）

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

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<