1. 表格
Bootstrap Table
- 支持 Bootstrap 3 和 Bootstrap 2
- 自適應界面
- 固定表頭
- 非常豐富的配置參數
- 直接通過標簽使用
- 顯示/隱藏列
- 顯示/隱藏表頭
- 通過 AJAX 獲取 JSON 格式的數據
- 支持排序
- 格式化表格
- 支持單選或者多選
- 強大的分頁功能
- 支持卡片視圖
- 支持多語言
- 支持插件
例子：
$(function() {
var t = $("#table_server")
.bootstrapTable(
{
url : WWWROOT
+ '/disinfectSystem/signRecordAction!getSignRecordTodayGrid.do?time='
+ new Date(),
method : 'get',
dataType : "json",
showRefresh : "true",// 刷新按鈕
dataField : "data",// 這是返回的json數組的key.默認好像是"rows".這里只有前后端約定好就行
striped : true,// 設置為 true 會有隔行變色效果
undefinedText : "空",// 當數據為 undefined 時顯示的字符
pagination : true, // 分頁
// paginationLoop:true,//設置為 true 啟用分頁條無限循環(huán)的功能。
showColumns : "true",// 是否顯示 內容列下拉框
pageNumber : 1,// 如果設置了分頁，首頁頁碼
// showPaginationSwitch:true,//是否顯示 數據條數選擇框
pageSize : 10,// 如果設置了分頁，頁面數據條數
pageList : [ 10, 30, 50 ], // 如果設置了分頁，設置可供選擇的頁面數據條數。設置為All
// 則顯示所有記錄。
paginationPreText : '?',// 指定分頁條中上一頁按鈕的圖標或文字,這里是<
paginationNextText : '?',// 指定分頁條中下一頁按鈕的圖標或文字,這里是>
// singleSelect: false,//設置True 將禁止多選
search : true, // 顯示搜索框
data_local : "zh-US",// 表格漢化
sidePagination : "server", // 服務端處理分頁
responseHandler : responseHandler,
queryParams : function(params) {// 自定義參數
return {// 這里的params是table提供的
start : params.offset, // 從數據庫第幾條記錄開始
limit : params.limit, // 找多少條
keyword : params.search
};
},
idField : "id",// 指定主鍵列
columns : [
{
title : 'id',// 表的列名
field : 'id',// json數據中rows數組中的屬性名
align : 'center'// 水平居中
},
{
title : '簽收人',
field : 'signUserName',
align : 'center'
},
{
title : '簽收包數量',
field : 'signAmount',
align : 'center'
},
{
title : '生成記錄時間',
field : 'signDate',
align : 'center'
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {// 自定義顯示標簽
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)聽函數
$(".pull-right").css("display", "block");
$('#table_server').bootstrapTable('hideColumn', 'id');// 隱藏ID
});
// 請求成功方法
function responseHandler(result) {
/*
* var errcode = result.errcode;//在此做了錯誤代碼的判斷 if(errcode != 0){
* alert("錯誤代碼" + errcode); return; }
*/
// 如果沒有錯誤則返回數據，渲染表格
return {
total : result.totalCount, // 總頁數,前面的key必須為"total"
data : result.data // 行數據，前面的key要與之前設置的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);
});
});
- 自定義內容
function ContentMethod(txt) {
return '<div class="alert alert-success"><strong></strong>自定義任何內容</div>'
}
3. 下拉框組件
Bootstrap selectpicker ->文檔
- 多選
- 搜索
- 分組選中
- 自定義樣式
- 可配置option圖標加文字
- 帶顏色的標簽
- 全選和反選
- 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頁面定義表格時，添加兩個屬性
<table id="tb_departments">
<thead>
<tr>
<th data-field="Name" data-editable="true">部門名稱</th>
<th data-field="ParentName">上級部門</th>
<th data-field="Level" data-editable="true">部門級別</th>
<th data-field="Desc" data-editable="true">描述</th>
</tr>
</thead>
</table>
- 如果是在js里面初始化，寫法如下
{
field: "name",
title: "名稱",
editable:true
}
- 在js里渲染表格的時候，加上：
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）標題</h4>
</div>
<div class="modal-body">在這里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</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 ->文檔點這里
這個是額外引入的庫，比原生的好用
- 多種形狀和尺寸的按鈕樣式可供選擇
- 帶邊框和不帶邊框的按鈕
- 3D 按鈕
- 突起樣式的按鈕
- 光暈效果
- 帶下拉菜單的按鈕
引入
<!-- Buttons 庫的核心文件 -->
<link rel="stylesheet" href="css/buttons.css">
<!-- 當需要使用帶下拉菜單的按鈕時才需要加載下面的 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>
<!-- 只有使用字體圖標時才需要加載 Font-Awesome -->
<link rel="stylesheet">
效果圖
image
