这篇文章将为大家详细讲解有关如何使用Bootstrap-Table实现满意的表格功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站是一家集网站建设,南沙企业网站建设,南沙品牌网站建设,网站定制,南沙网站建设报价,网络营销,网络优化,南沙网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
Bootstrap是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。
从项目名称就可以知道,这是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端几乎在工作中都有涉及过,Bootstrap Table 提供了快速的建表、查询、分页、排序等一系列功能。
项目地址:https://github.com/wenzhixin/bootstrap-table
可能 Bootstrap 和 jQuery 技术有些过时了,但如果因为历史的技术选型或者旧的项目还在用这两个库的话,那这个项目一定会让你的嘴角慢慢上扬,拿下表格展示方面的需求易如反掌!
Boostatrp Table 分为两种模式:客户端(client)模式、服务端(server)模式。
客户端:通过数据接口将服务器需要加载的数据一次性展现出来,然后装换成 json 然后生成 table。我们可以自己定义显示行数,分页等,此时就不再会向服务器发送请求了。
服务器:根据设定的每页记录数和当前显示页,发送数据到服务器进行查询。
Tips:解释说明均在代码中以注释方式展示,请大家注意阅读。
我们采用的是最简单的 cdn 引入方式,代码可直接运行。复制代码并将配置好 json 文件的路径即可看到效果。
注释中的星号表示该参数必写,话不多说上代码。示例代码:
Hello, Bootstrap Table! // 引入 css // 需要填充的表格
上面的代码展示通过基本 API 实现基础的功能,示例代码并没有罗列所有的 API。该库还有很多好玩的功能等着大家去发现,正所谓师父领进门修行靠个人~
下面对关键点进行阐述,为了更方便使用的小伙伴清楚插件的用法。
选择需要初始化表格。 $('#tb_departments').bootstrapTable({}) 这个就像table的入口一样。
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]
field json 中键值对中的 Key
title 是表格头显示的内容
formatter 是一个函数类型,当我们对数据内容需要修改时会用它。例:编码转换
events:operateEvents window.operateEvents = { 'click .download': function (e,value,row,index) { console.log(row); } }
因为很多时候我们需要针对表格进行处理,所以事件触发器是一个不错的选择。比如:它可以记录我们的行数据,可以利用触发器进行定制函数的执行等。
介绍几个扩展可以让我们便捷的实现更多的表格功能,而不需要自己造轮子让我们的工作更加高效(也可以进入官网查看扩展的具体使用方法,官方已经收集了大量的扩展)。老规矩直接上代码:
showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型,支持:'基本','全部','选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间(以秒为单位) autoRefreshSilent: true //设置为静默自动刷新
showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时,此分隔符将插入列值之间 copyNewline: '\n' //复制时,此换行符将插入行值之间
关于“如何使用Bootstrap-Table实现满意的表格功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。