bootstrap table表格使用方法詳解
更新時(shí)間：2017年04月26日 08:46:54 作者：sj2016
這篇文章主要為大家詳細(xì)介紹了bootstrap table表格使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap table表格的使用方法，供大家參考，具體內(nèi)容如下
1.進(jìn)入頁面，根據(jù)指定的URL加載數(shù)據(jù)(json格式)
2.加載成功，根據(jù)$table.bootstrapTable({options})顯示表格樣式。
感覺還是挺漂亮的哈，OK，下面貼代碼解釋功能。
開始之前，當(dāng)然要引用js啦
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
html代碼，一是指定table要使用的工具欄，而是寫一個(gè)空的table
<div class="row">
<div class="col-md-12">
<div class="btn-group" id="toobar" role="group" aria-label="...">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>新增
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>修改
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>刪除
</button>
</div>
<table id="myTable"></table>
</div>
</div>
js代碼，使用("#table").bootstraptable({options})填充table
$("#myTable").bootstrapTable({
url: '/BootstrapTable/GetTestData',
method: 'get',
toolbar: '#toobar',//工具列
striped: true,//隔行換色
cache: false,//禁用緩存
pagination: true,//啟動(dòng)分頁
sidePagination: 'client',//分頁方式
pageNumber: 1,//初始化table時(shí)顯示的頁碼
pageSize: 10,//每頁條目
showFooter: false,//是否顯示列腳
showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
sortable: false,//排序
search: true,//啟用搜索
showColumns: true,//是否顯示 內(nèi)容列下拉框
showRefresh: true,//顯示刷新按鈕
idField: 'SystemCode',//key值欄位
clickToSelect: true,//點(diǎn)擊選中checkbox
singleSelect: true,//啟用單行選中
columns: [{
checkbox: true
},
{
field: 'SystemCode',
title: '系統(tǒng)代碼',
titleTooltip: 'young for you'
},
{
field: 'SystemDesc',
title: '系統(tǒng)名稱'
},
{
field: 'Isvalid',
title: '是否有效'
},
{
field: 'UUser',
title: '更新人'
},
{
field: 'UDate',
title: '更新時(shí)間'
}],
onClickCell: function (field, value, row, $element) {
//alert(row.SystemDesc);
}
});
其中URL是table 數(shù)據(jù)源地址，如果table啟動(dòng)了分頁功能，后臺(tái)取數(shù)據(jù)的方法要加上limit、offset兩個(gè)int類型的參數(shù)，這里把后臺(tái)代碼也貼一下。
public JsonResult GetTestData(int limit, int offset)
{
BugzillaModelContainer db = new BugzillaModelContainer();
List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList();
for (int i = 0; i < 20; i++)
{
B_SystemInfo tempSystem = new B_SystemInfo();
tempSystem.SystemCode = (i + 1).ToString();
tempSystem.SystemDesc = "測試系統(tǒng)" + (i + 1).ToString();
tempSystem.Isvalid = "Y";
tempSystem.UUser = "result_for" + (i + 1).ToString();
tempSystem.UDate = System.DateTime.Now.ToShortDateString();
systemInfo.Add(tempSystem);
}
var total = systemInfo.Count();
var rows = systemInfo.Skip(offset).Take(limit).ToList();
return Json(systemInfo, JsonRequestBehavior.AllowGet);
}
offset表示從多少條數(shù)據(jù)開始取，limit表示取多少條數(shù)據(jù)。
客戶端搜索只要設(shè)置search=true即可。
服務(wù)端搜索，需要設(shè)置參數(shù)。
首先設(shè)置
("#table").bootstraptable({queryParams: oTableInit.queryParams}),//傳遞參數(shù)（*）
然后獲取查詢的參數(shù)
//得到查詢的參數(shù)
oTableInit.queryParams = function (params) {
var temp = {
//這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
limit: params.limit, //頁面大小
offset: params.offset, //頁碼
systemcode: $("#systemcode").val(),
};
return temp;
};
通過button事件刷新table，重新獲取數(shù)據(jù)源，即可。
$("#btnQuery").click(function () {
$table.bootstrapTable('refresh');
});
最后貼上全部html代碼~
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group" id="toobar" role="group" aria-label="...">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>新增
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-edit"></span>修改
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>刪除
</button>
</div>
<table id="myTable"></table>
</div>
</div>
</div>
<script>
$(function () {
var itable = TableInit();
itable.Init();
});
var TableInit = function () {
var myTableInit = new Object();
myTableInit.Init = function () {
$("#myTable").bootstrapTable({
url: '/BootstrapTable/GetTestData',
method: 'get',
toolbar: '#toobar',//工具列
striped: true,//隔行換色
cache: false,//禁用緩存
pagination: true,//啟動(dòng)分頁
sidePagination: 'client',//分頁方式
pageNumber: 1,//初始化table時(shí)顯示的頁碼
pageSize: 10,//每頁條目
showFooter: false,//是否顯示列腳
showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
sortable: false,//排序
search: true,//啟用搜索
showColumns: true,//是否顯示 內(nèi)容列下拉框
showRefresh: true,//顯示刷新按鈕
idField: 'SystemCode',//key值欄位
clickToSelect: true,//點(diǎn)擊選中checkbox
singleSelect: true,//啟用單行選中
columns: [{
checkbox: true
},
{
field: 'SystemCode',
title: '系統(tǒng)代碼',
titleTooltip: 'young for you'
},
{
field: 'SystemDesc',
title: '系統(tǒng)名稱'
},
{
field: 'Isvalid',
title: '是否有效'
},
{
field: 'UUser',
title: '更新人'
},
{
field: 'UDate',
title: '更新時(shí)間'
}],
onClickCell: function (field, value, row, $element) {
//alert(row.SystemDesc);
}
});
};
return myTableInit;
};
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js獲取UserControl內(nèi)容為拼html時(shí)提供方便
js獲取UserControl內(nèi)容時(shí)無法測試通過，原來是繼承了Page 然后使用VerifyRenderingInServerForm驗(yàn)證2014-11-11
Ethers.js則是一個(gè)輕量級(jí)的web3.js替代品，在本文中，我們將學(xué)習(xí)使用ethers.js部署Solidity智能合約的方法，感興趣的朋友一起看看吧2021-10-10
收藏，對(duì)比功能的JS部分實(shí)現(xiàn)代碼
非常不錯(cuò)的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實(shí)，實(shí)現(xiàn)對(duì)比2008-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)身份證輸入框的輸入效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-08-08
返回上一頁并自動(dòng)刷新，JavaScript一般的使用history.go(-1)和history.back()等,需要的朋友可以參考下2014-02-02
Js之軟鍵盤實(shí)現(xiàn)(js源碼)...2007-01-01
純前端JavaScript實(shí)現(xiàn)Excel IO案例分享
這篇文章主要為大家詳細(xì)介紹了純前端JavaScript實(shí)現(xiàn)Excel IO案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和
這篇文章主要介紹了TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和，MD5校驗(yàn)和可以用于驗(yàn)證網(wǎng)絡(luò)文件傳輸?shù)耐暾砸约胺乐刮募蝗舜鄹?。下文我們就一起來學(xué)習(xí)TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和_MD5校驗(yàn),需要的朋友可以參考一下2022-02-02
javascript中對(duì)對(duì)層的控制...2006-12-12
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層...2007-05-05