这次给大家带来bootstarp+table使用方法分析，bootstarp+table使用的注意事项有哪些，下面就是实战案例，一起来看一下。
我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设计如restful ，如果不知道restful那请百度把，返回的所有数据均为json。
当涉及到分页后因为前端页面使用了bootstarp 为了兼容问题，我们继续试用了bootstarp table插件来进行数据分页
bootstarp 有两种配置方法，写法与应用类似 easyui这种老ui框架，不过我觉得easyui 是真的好用，并且easyui的异步tree 真的是太强了当然还有很多现成的tree组件，因为公司前端缺少，我们php兼职写页面，你懂得哈。
下面介绍bootstarp配置 ：js 配置
' + ''; } else if(type == ".txt") { return '
' + ''; } else if(type == ".docx" || type == ".doc") { return '
' + ''; } else if(type == ".png" || type == ".jpg") { return '
' + ''; } } } } 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; } } } } });
登录后复制
附上表格，以上分页为后台分页，后台分页返回的数据格式应为 ｛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; }
登录后复制
前端分页神器值得一用！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
PromiseA+的实现步骤详解
EasyCanvas绘图库在Pixeler项目开发中使用实战总结
以上就是bootstarp+table使用方法分析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2758155.html
