首回选择Bootstrap-table那么些表格插件,记录一下运用进度中相遇的主题素材。

依据Bootstrap的轻量级表格插件Bootstrap
Table只需轻巧的布置,就足以具备强盛的支持固定表头、单/复选、排序、分页、搜索及自定义表头等效率,越来越好的压实费用效用和减少支出时间。

|引入CSS文件

1、插件描述:Bootstrap
Table显示数据表格格式,提供了丰盛的支撑,单选框、复选框、排序、分页等,插件下载。

|引进相关库

2、特点:

咱们要求引进Jquery库、bootstrap库、以至bootstrap-table.js文件

基于Bootstrap 3开发

|启用Bootstrap Table插件:

使用AJAX获取JSON数据

基于Bootstrap的轻量级表格插件Bootstrap,|引入相关库。官方文书档案中付出了我们有两种特别格局来启用bootstrap-table插件:

点击表头可总结的开展排序

1、通过data属性的艺术:

3、使用办法:

Item ID Item Name Item Price
1 Item 1 $1
2 Item 2 $2

1)、在html页面包车型大巴head标签中引进Bootstrap库和bootstrap-table.css。

//只需要HTML中写下table标签,并设置id

$.bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }]});

2)、在head标签恐怕在body标签闭合前引进jQuery库和Bootstrap库和bootstrap-table.js。

也得以通过url获取数据

3)、钦点数据源,这里有三种情势方式1:经过data属性标签在一个常常的表格中装置data-toggle=”table”能够在不写JavaScript的情状下启用Bootstrap
Table。

$.bootstrapTable({ url: 'data1.json', columns: [{ field: 'id', //与返回值的JSON数据的key值对应 title: 'Item ID' //列名 }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }, ]});

以上正是本文的全体内容,希望对大家的上学抱有助于,也愿意大家多多点拨脚本之家。

必威官网手机版,方式2:通过JavaScript设置数据源通过JavaScript来启用带有id属性的Table。

$.bootstrapTable;:

4、Bug描述:

用竹签属性方式设置字段formatter时,开掘未有效应,图形不知晓,我们能够一向下载实例进行研商,下载地址。如:

性别

1)、原因:bootstrap-table.js第399行,代码中只看清了formatter typeof
为function的情形2卡塔尔国、解决办法:修正第399行代码块:校勘前

if (typeof that.header.formatters[j] === 'function') { value = that.header.formatters[j];}

if (typeof that.header.formatters[j] === 'function') { value = that.header.formatters[j]; }else if(typeof that.header.formatters[j] === 'string') { if(typeof window[that.header.formatters[j]] === 'function') { value = window[that.header.formatters[j]]; } }

假若大家还想深远学习,能够点击这里实行学习,再为大家附3个能够的专项论题:

Bootstrap学习课程

Bootstrap实战教程

Bootstrap插件使用教程

以上正是为大家狼吞虎咽的Bootstrap Table使用办法,希望对我们熟识通晓Bootstrap
Table使用情势有所援救。

相关文章