BootstrapTable用法

BootstrapTable使用实例
一、bootstrapTable简单使用：

</tr>
</thead>

adm-user：

[
    {
    	"id": 2018100701,
        "username": "user1",
        "fullname": "用户1",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
    	"id": 2018100702,
        "username": "user2",
        "fullname": "用户2",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
    	"id": 2018100703,
        "username": "user3",
        "fullname": "用户3",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
    	"id": 2018100704,
        "username": "user4",
        "fullname": "用户4",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
   	    "id": 2018100705,
        "username": "user5",
        "fullname": "用户5",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100706,
        "username": "user6",
        "fullname": "用户6",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100707,
        "username": "user7",
        "fullname": "用户7",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100708,
        "username": "user8",
        "fullname": "用户8",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100709,
        "username": "user9",
        "fullname": "用户9",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100710,
        "username": "user10",
        "fullname": "用户10",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    },
    {
        "id": 2018100711,
        "username": "user11",
        "fullname": "用户11",
        "status": "启用",
        "availableSpace": "10GB",
        "totalSpace": "20GB",
        "storageServer" : "nas1"
    }
]

二、 利用bootstrapTable来设置要隐藏和显示的列：

$(function () {
//初始化table
LoadingDataListOrderRealItems();
//隐藏列
$('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'GoodsId');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'OrderItemId');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'ShopName');
$('#tableOrderRealItems').bootstrapTable('hideColumn', 'SellerName');
});

三、 也可以直接使用hidden属性来设置：

columns: [
{
field: 'OrderId',
title: '#',
align: 'center',
}, {
field: 'OrderItemId',
title: 'OrderItemId',
align: 'left',
hidden:true,
}, {
field: 'GoodsId',
title: 'GoodsId',
align: 'left',
hidden:true,
}, {
field: 'OrderCode',
title: '订单编号',
align: 'left',
}
]

四、如何获取数据：

方式一：表格中配置

Title
id name price column1 column2 column3 column4

方式二：JavaScript配置

Title
id name price column1 column2 column3 column4

[
{
"id": 0,
"name": "Item 0",
"price": "$0",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 1,
"name": "Item 1",
"price": "$1",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 2,
"name": "Item 2",
"price": "$2",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 3,
"name": "Item 3",
"price": "$3",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 4,
"name": "Item 4",
"price": "$4",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 5,
"name": "Item 5",
"price": "$5",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 6,
"name": "Item 6",
"price": "$6",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 7,
"name": "Item 7",
"price": "$7",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 8,
"name": "Item 8",
"price": "$8",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 9,
"name": "Item 9",
"price": "$9",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 10,
"name": "Item 10",
"price": "$10",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 11,
"name": "Item 11",
"price": "$11",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 12,
"name": "Item 12",
"price": "$12",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 13,
"name": "Item 13",
"price": "$13",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 14,
"name": "Item 14",
"price": "$14",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 15,
"name": "Item 15",
"price": "$15",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 16,
"name": "Item 16",
"price": "$16",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 17,
"name": "Item 17",
"price": "$17",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 18,
"name": "Item 18",
"price": "$18",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 19,
"name": "Item 19",
"price": "$19",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
},
{
"id": 20,
"name": "Item 20",
"price": "$20",
"column1": "C 10",
"column2": "C 20",
"column3": "C 30",
"column4": "C 40"
}
]

五、BootstrapTable前后端完整实例（以ASP.NET为例）：

以一个基于BootstrapTable控件的图书列表查询功能为实例（如图1）。注意本实例使用了ASP.NET MVC。

​

页面代码：

@{
Layout = null;
ViewBag.Title = "基于BootstrapTable的简单应用";
}

查询条件

控制器代码：

///


/// 查询图书信息
///
///
///
public JsonResult SearchBookInfo(BookInfo param, int pageSize, int pageIndex){
//获取图书列表
List bookList = GetBookList();
//根据条件筛选数据
if (!String.IsNullOrEmpty(param.Title)) {
bookList = bookList.Where(a => a.Title.Contains(param.Title)).ToList();
}
if (!String.IsNullOrEmpty(param.Author)) {
bookList = bookList.Where(a => a.Author.Contains(param.Author)).ToList();
}
if (!String.IsNullOrEmpty(param.Publish)) {
bookList = bookList.Where(a => a.Publish.Contains(param.Publish)).ToList();
}
//BootstrapTable的返回结果
BootstrapTableResult result = new BootstrapTableResult();
result.total = bookList.Count;
result.rows = bookList;
return Json(result);
}

///


/// 获取图书列表
///
///
public List GetBookList(){
List bookList = new List();
BookInfo book1 = new BookInfo(){
BookId = 8,
Title = "ASP.NET MVC 5高级编程",
Author = "加洛韦",
Publish = "清华大学出版社",
PublishDate = new DateTime(2017, 08, 15),
Price = 29.99
};
bookList.Add(book1);
BookInfo book2 = new BookInfo() {
BookId = 9,
Title = "Java从入门到精通",
Author = "明日科技",
Publish = "清华大学出版社",
PublishDate = new DateTime(2015, 09, 28),
Price = 38.55
};
bookList.Add(book2);
BookInfo book3 = new BookInfo() {
BookId = 10,
Title = "Oracle从入门到精通",
Author = "秦靖",
Publish = "机械工业出版社",
PublishDate = new DateTime(2014, 10, 08),
Price = 38.55
};
bookList.Add(book3);
return bookList;
}

其他代码：

///


/// 图书信息实体类
///
public class BookInfo{
public int BookId { set; get; } //图书ID
public string Title { set; get; } //图书名称
public string Author { set; get; } //图书作者
public string Publish { set; get; } //出版社
public DateTime PublishDate { set; get; } //出版时间
public Double Price { set; get; } //销售价格
}

///


/// BootstrapTable返回结果类
///
public class BootstrapTableResult{
public int total { get; set; } //总记录数
public List rows { get; set;} //数据列表
}

六、Bootstrap table中toolbar新增条件查询及refresh参数使用方法：

我们想要在bootstrap-table中自定义查询条件如何实现呢？这些自定义的按钮、输入框是定义在哪个位置呢？在配置中有这样一个属性：

//工具按钮用哪个容器
toolbar: '#toolbar',

我们定义的查询条件就是放入到这个div中的，先看一下我们期望的效果：

​

要实现这样的效果，我们首先要新增查询表单：

产品线
消息类型
消息类型

在请求服务器中传递的参数中获取对应的值：

//请求服务器数据
queryParams: function queryParams(params){
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
sortName: params.sortName,
sortOrder: params.sortOrder,
searchText: $("#searchText").val(),
msgType: $("#msgType").val(),
productLine: $("#productLine").val()
};
return param;
}

最后是提交到服务端：

//查询
$(document).on('click', ".queryButton",function(){
$('#table').bootstrapTable('refresh');
});

这个refresh官方文档是这样描述的：

刷新远程服务器数据，可以设置{silent: true}以静默方式刷新数据，并设置{url: newUrl}更改URL。
要提供特定于此请求的查询参数，请设置{query: {foo: 'bar'}}。

posted on 2025-03-31 13:54  E-小草  阅读(65)  评论(0)    收藏  举报

导航