1. 表格
Bootstrap Table
- 支持 Bootstrap 3 和 Bootstrap 2
- 自適應(yīng)界面
- 固定表頭
- 非常豐富的配置參數(shù)
- 直接通過(guò)標(biāo)簽使用
- 顯示/隱藏列
- 顯示/隱藏表頭
- 通過(guò) AJAX 獲取 JSON 格式的數(shù)據(jù)
- 支持排序
- 格式化表格
- 支持單選或者多選
- 強(qiáng)大的分頁(yè)功能
- 支持卡片視圖
- 支持多語(yǔ)言
- 支持插件
例子：
$(function() {
var t = $("#table_server")
.bootstrapTable(
{
url : WWWROOT
+ '/disinfectSystem/signRecordAction!getSignRecordTodayGrid.do?time='
+ new Date(),
method : 'get',
dataType : "json",
showRefresh : "true",// 刷新按鈕
dataField : "data",// 這是返回的json數(shù)組的key.默認(rèn)好像是"rows".這里只有前后端約定好就行
striped : true,// 設(shè)置為 true 會(huì)有隔行變色效果
undefinedText : "空",// 當(dāng)數(shù)據(jù)為 undefined 時(shí)顯示的字符
pagination : true, // 分頁(yè)
// paginationLoop:true,//設(shè)置為 true 啟用分頁(yè)條無(wú)限循環(huán)的功能拔妥。
showColumns : "true",// 是否顯示 內(nèi)容列下拉框
pageNumber : 1,// 如果設(shè)置了分頁(yè)橱鹏，首頁(yè)頁(yè)碼
// showPaginationSwitch:true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
pageSize : 10,// 如果設(shè)置了分頁(yè)，頁(yè)面數(shù)據(jù)條數(shù)
pageList : [ 10, 30, 50 ], // 如果設(shè)置了分頁(yè)汁掠，設(shè)置可供選擇的頁(yè)面數(shù)據(jù)條數(shù)尖飞。設(shè)置為All
// 則顯示所有記錄惶看。
paginationPreText : '?',// 指定分頁(yè)條中上一頁(yè)按鈕的圖標(biāo)或文字,這里是<
paginationNextText : '?',// 指定分頁(yè)條中下一頁(yè)按鈕的圖標(biāo)或文字,這里是>
// singleSelect: false,//設(shè)置True 將禁止多選
search : true, // 顯示搜索框
data_local : "zh-US",// 表格漢化
sidePagination : "server", // 服務(wù)端處理分頁(yè)
responseHandler : responseHandler,
queryParams : function(params) {// 自定義參數(shù)
return {// 這里的params是table提供的
start : params.offset, // 從數(shù)據(jù)庫(kù)第幾條記錄開始
limit : params.limit, // 找多少條
keyword : params.search
};
},
idField : "id",// 指定主鍵列
columns : [
{
title : 'id',// 表的列名
field : 'id',// json數(shù)據(jù)中rows數(shù)組中的屬性名
align : 'center'// 水平居中
},
{
title : '簽收人',
field : 'signUserName',
align : 'center'
},
{
title : '簽收包數(shù)量',
field : 'signAmount',
align : 'center'
},
{
title : '生成記錄時(shí)間',
field : 'signDate',
align : 'center'
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {// 自定義顯示標(biāo)簽
return '<button type="button" onclick="printSignRecord(this,\''
+ row.id
+ '\')" class="btn btn-primary">打印</button>'
+ '<button type="button" onclick="changeTable(\''
+ row.id
+ '\')" class="btn btn-info btn-arrow-right">查看詳情</button> ';
}
}
]
});
t.on('load-success.bs.table', function(data) {// table加載成功后的監(jiān)聽函數(shù)
$(".pull-right").css("display", "block");
$('#table_server').bootstrapTable('hideColumn', 'id');// 隱藏ID
});
// 請(qǐng)求成功方法
function responseHandler(result) {
/*
* var errcode = result.errcode;//在此做了錯(cuò)誤代碼的判斷 if(errcode != 0){
* alert("錯(cuò)誤代碼" + errcode); return; }
*/
// 如果沒有錯(cuò)誤則返回?cái)?shù)據(jù)暂论，渲染表格
return {
total : result.totalCount, // 總頁(yè)數(shù),前面的key必須為"total"
data : result.data // 行數(shù)據(jù)，前面的key要與之前設(shè)置的dataField的值一致.
};
}
;
});
2. 懸停顯示
bootstrap popover ->文檔
- 在需要顯示的元素上加上data-toggle="popover"
<tr data-toggle="popover">
...
</tr>
- js渲染
$('[data-toggle="popover"]').each(function() {
var element = $(this);
var id = element.attr('id');
var txt = element.html();
element.popover({
trigger: 'manual',
placement: 'bottom', //top, bottom, left or right
title: txt,
html: 'true',
content: ContentMethod(txt),
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if(!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
});
- 自定義內(nèi)容
function ContentMethod(txt) {
return '<div class="alert alert-success"><strong></strong>自定義任何內(nèi)容</div>'
}
3. 下拉框組件
Bootstrap selectpicker ->文檔
- 多選
- 搜索
- 分組選中
- 自定義樣式
- 可配置option圖標(biāo)加文字
- 帶顏色的標(biāo)簽
- 全選和反選
- image
- image
- image
4. 使表格元素可編輯
- 引入額外的js文件
<link rel="stylesheet" >
<script src="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
- 在cshtml頁(yè)面定義表格時(shí)偶芍，添加兩個(gè)屬性
<table id="tb_departments">
<thead>
<tr>
<th data-field="Name" data-editable="true">部門名稱</th>
<th data-field="ParentName">上級(jí)部門</th>
<th data-field="Level" data-editable="true">部門級(jí)別</th>
<th data-field="Desc" data-editable="true">描述</th>
</tr>
</thead>
</table>
- 如果是在js里面初始化充择，寫法如下
{
field: "name",
title: "名稱",
editable:true
}
- 在js里渲染表格的時(shí)候，加上：
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("編輯成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
- 最終效果如下
image
5. 模態(tài)框 -（阻塞型）
<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態(tài)框</button>
<!-- 模態(tài)框（Modal） -->.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模態(tài)框（Modal）標(biāo)題</h4>
</div>
<div class="modal-body">在這里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
- 效果圖：
image
至于非阻塞的提示框匪蟀，Bootstarp里是沒有的椎麦，這里列出幾種供參考：
- overhang.js
- notyf.js
6 按鈕 Bootstarp Button ->文檔點(diǎn)這里
這個(gè)是額外引入的庫(kù)，比原生的好用
- 多種形狀和尺寸的按鈕樣式可供選擇
- 帶邊框和不帶邊框的按鈕
- 3D 按鈕
- 突起樣式的按鈕
- 光暈效果
- 帶下拉菜單的按鈕
引入
<!-- Buttons 庫(kù)的核心文件 -->
<link rel="stylesheet" href="css/buttons.css">
<!-- 當(dāng)需要使用帶下拉菜單的按鈕時(shí)才需要加載下面的 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
<!-- 只有使用字體圖標(biāo)時(shí)才需要加載 Font-Awesome -->
<link rel="stylesheet">
效果圖
image
