蓝戒的博客


jquery插件Bootstrap Table使用方法详解

一、概述

bootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。
基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

Bootstrap table 通过简单的设置,就可以拥有强大的功能,大大提高工作效率,减少开发时间。

git项目地址:https://github.com/wenzhixin/bootstrap-table

主要功能:

  • 支持 Bootstrap 3 和 Bootstrap 2
  • 自适应界面
  • 固定表头
  • 非常丰富的配置参数
  • 直接通过标签使用
  • 显示/隐藏列
  • 显示/隐藏表头
  • 通过 AJAX 获取 JSON 格式的数据
  • 支持排序
  • 格式化表格
  • 支持单选或者多选
  • 强大的分页功能
  • 支持卡片视图
  • 支持多语言
  • 支持插件

二、使用方法

1.引入js、css

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2.table数据填充
bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据。
html

<table id="table" data-toggle="table"></table>

js
local本地数据:

$('#table').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'
}]
});

remote远程数据:

可以通过设置远程的 url 如 url: 'data1.json' 来加载数据。

<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>

实例代码片段:

getTable:function(url){
var $table = $("#bTable");
$table.bootstrapTable({
url: url,
sidePagination: 'server', //服务端分页
pagination: true,
pageSize: 10,
pageList: [5, 10, 20],
columns: [
{field: 'houseUserId', title: 'houseUserId',visible:false},
{field: 'id', title: '序号', formatter: rowIndex},
{field: 'houseName', title: '房产'},
{field: 'userName', title: '客户名称'},
{field: 'userPhone', title: '联系电话'},
{field: 'emeUserName', title: '紧急联系人'},
{field: 'emeUserPhone', title: '紧急联系人电话'}
],
responseHandler: function (res) {
ownerList.OWNERLISTcurrentPage = res.currentPage;
if (res.code) {
res = {"totalCount": 0, "recordList": []

};
return res;
}
return res;
}

});

//表格序号
function rowIndex(value, row, index) {
return (ownerList.OWNERLISTcurrentPage-1)*10+index+1;
}

更多api查阅文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

本文固定链接: http://www.webzsky.com/?p=984 | 蓝戒的博客

cywcd
该日志由 cywcd 于2016年09月27日发表在 javascript, Jquery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jquery插件Bootstrap Table使用方法详解 | 蓝戒的博客
关键字: , ,

jquery插件Bootstrap Table使用方法详解:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×