bootstarp table 采坑专辑

googollee 发布于2019-08-02 10:31 / 962人阅读

摘要：首先这个组件是由国人大牛文翼开发的，地址我们在一次项目开发中使用到了原生的的前后分离技术。接口设计如，如果不知道那请百度把，返回的所有数据均为。

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

前端分页神器值得一用！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52410.html

bootstarp table 采坑专辑

摘要：首先这个组件是由国人大牛文翼开发的，地址我们在一次项目开发中使用到了原生的的前后分离技术。接口设计如，如果不知道那请百度把，返回的所有数据均为。首先bootstarp table 这个组件是由国人大牛文翼开发的，github地址 https://github.com/wenzhixin/... 我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设...

wwq0327 2019-07-01 12:29 评论0 收藏0
bootstarp table 采坑专辑

摘要：首先这个组件是由国人大牛文翼开发的，地址我们在一次项目开发中使用到了原生的的前后分离技术。接口设计如，如果不知道那请百度把，返回的所有数据均为。首先bootstarp table 这个组件是由国人大牛文翼开发的，github地址 https://github.com/wenzhixin/... 我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设...

joyvw 2019-08-22 17:28 评论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