bootstarp table 采坑專輯

wwq0327 發(fā)布于2019-07-01 12:29 / 1224人閱讀

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

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

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

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

下面介紹bootstarp配置：js 配置

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

}

這里我對(duì)html直接生成table 不做介紹了。詳細(xì)可以查看文檔或者百度
在使用bootstarp table 中我們有時(shí)候會(huì)涉及到更新頁(yè)面一個(gè)數(shù)據(jù)或者刪除一個(gè)數(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;
    }

前端分頁(yè)神器值得一用！

GPU云服務(wù)器云服務(wù)器 bootstarp 采坑記優(yōu)酷專輯音樂(lè)專輯

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wwq0327

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow-lite

閱讀 1553·2023-04-25 18:56
單片機(jī)的一些入門(mén)知識(shí)與學(xué)習(xí)資料

閱讀 1499·2021-09-29 09:34
手機(jī)怎么登錄云主機(jī)名-云主機(jī)怎么使用？

閱讀 1717·2021-09-22 15:51
CubeCloud：中秋國(guó)慶促銷，全站88折優(yōu)惠，洛杉磯聯(lián)通AS4837線路云服務(wù)器限時(shí)優(yōu)惠30元/

閱讀 3520·2021-09-14 18:03
ZJI新上韓國(guó)BGP+CN2服務(wù)器,8折月付440元起

閱讀 1173·2021-07-23 17:54
transform導(dǎo)致的border-radius失效

閱讀 2030·2019-08-29 18:38
ie9下line-height失效

閱讀 2910·2019-08-29 12:38
ES6入門(mén)之let、cont

閱讀 619·2019-08-26 13:41

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

bootstarp table 采坑專輯

相關(guān)文章