943
技術社區[雲棲]
Bootstrap Table總結
一.使用
導包：
1.Jquery
2.bootstrap組件（js+css）
3.bootstrap table組件及中文包（js+css+js）
代碼：
例一：
<table ></table>
<script>
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的點擊事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table').bootstrapTable({
url: '/Home/GetDepartment', //請求後台的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber:1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部門名稱',
align: 'center',
valign: 'middle',
width: '100px',
}, {
field: 'ParentName',
title: '上級部門',
}, {
field: 'Level',
title: '部門級別'
}, {
field: 'Desc',
title: '描述'
}, ]
});
};
//得到查詢的參數
oTableInit.queryParams = function (params) {
var temp = { //這裏的鍵的名字和控製器的變量名必須一直，這邊改動，控製器也需要改成一樣的
limit: params.limit, //頁麵大小
offset: params.offset, //頁碼
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁麵上麵的按鈕事件
};
return oInit;
};
</script>例二：
<table ></table>
<style>
#table{
table-layout: fixed;
}
</style>
<script type="text/javascript">
var $table = $("#table");
var selections = [];
window.lockEvents = {
'click .lock':function (e, value, row, index) {
$.ajax({
type:"post",
url:"/copartner/trade/supplier/lock.do",
async:true,
dataType:"json",
data:{
id: row.id,
isEnable : row.isEnable
},
success: function(data) {
if(data.msg != null) {
alert(data.msg);
}
},
error:function(jqXHR){
alert(jqXHR.status);
}
});
initTable();
}
};
function initTable() {
$table.bootstrapTable('destroy');
$table.bootstrapTable({
height: getHeight(),
toolbar: "#toolbar",
//search: true,
//searchAlign: "left",
//showRefresh: true,
//showToggle: true,
showColumns: true,
//showExport: true,
//exportDataType: "all",
//detailView: true,
//detailFormatter: detailFormatter,
//minimumCountColumns: 2,
idField: 'id',
showFooter: false,
/*與後台交互*/
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false,
striped: true,
pagination: true,
//showPaginationSwitch: true,
pageNumber: 1,
pageSize: 20,
pageList: [10, 20, 50, 100],
url: "/copartner/tradeOrderInfo/list.do",
//dataField: "rows",
clickToSelect: true,
queryParamsType: '',
queryParams: function queryParams(params) {
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
vagueInfo: $(".vagueInput").val(),
}
return param;
},
sidePagination: "server",//client
/* onLoadSuccess: function(data){ //加載成功時執行
alert("加載成功"+data);
},
onLoadError: function(){ //加載失敗時執行
alert("加載失敗"+data);
}, */
/*列*/
columns: [
{
checkbox: true,
align: 'center',
valign: 'middle'
}, {
title: 'id',
field: 'id',
align: 'center',
valign: 'middle',
//sortable: true
width: '100px'
}, {
title: '訂單編號',
field: 'alias',
align: 'center',
valign: 'middle',
width: '100px',
formatter: openFormatter
}, {
title: '電話',
field: 'phone',
align: 'center',
valign: 'middle',
width: '100px',
formatter: function (value, row, index) {
return "<a class=\"editPhone\" href=\"\" name=\"phone\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"電話\">" + value + "</a>";
}
}, {
title: '是否售後',
field: 'isAftersales',
align: 'center',
valign: 'middle',
width: '100px',
formatter: afterSalesFormatter
}, {
title: '操作',
field: 'detail',
align: 'center',
valign: 'middle',
width: '100px',
formatter: detailFormatter
}, {
title: '是否啟用',
field: 'isEnable',
align: 'center',
valign: 'middle',
width: '100px',
events: lockEvents,
formatter: lockFormatter
}
],
onClickRow: function (row, $element) {
curRow = row;
}
onLoadSuccess: function (aa, bb, cc) {
$("#table .rowEditable").editable({
url: function (params) {
var column = $(this).attr("name");
curRow[column] = params.value;
},
type: 'text'
});
$("#table .editPhone").editable({
url: function (params) {
var sPhone = $(this).attr("name");
curRow[sPhone] = params.value;
$.ajax({
type: 'POST',
url: "/copartner/trade/supplier/editPhone.do",
data: curRow,
dataType: 'JSON',
success: function (data, textStatus, jqXHR) {
initTable();
if(data.msg != null) {
alert(data.msg);
}
},
error:function(jqXHR){
alert(jqXHR.status);
}
});
},
type: 'text'
});
}
});
$table.bootstrapTable('hideColumn', 'id');
function afterSalesFormatter(value, row, index) {
var state = '';
var color = '#000';
var color_red = '#c00';
var color_blue = '#0066ff';
var color_green = '#5cb85c';
if(value == 0) {
state = '否';
color = color;
} else if(value == 1) {
state = "是";
color = color_green;
}
return [
'<span >' + state + '</span>'
].join('');
}
function openFormatter(value, row, index) {
return value;
}
function detailFormatter(value, row, index) {
return [
'<a href="orderDetailInfoNew.html?id=' + row.id + '" title="進入明細">',
'<span >詳情</span>',
'</a>'
].join('');
}
function lockFormatter(value, row, index) {
var state = '--';
var color = '#000';
var color_red = '#c00';
var color_blue = '#0066ff';
if(value == 0) {
state = '已關閉';
color = color_red;
} else if(value == 1) {
state = "已啟用";
color = color_blue;
}
return [
'<a href="javascript:void(0)" title="切換狀態">',
'<span >' + state + '</span>',
'</a>'
].join('');
}
function editReturnCountFormatter(value, row, index) {
return "<a class=\"rowEditable\" href=\"\" name=\"returnCount\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投訴數量\">" + value + "</a>";
}
function editReturnPriceFormatter(value, row, index) {
return "<a class=\"rowEditable\" href=\"\" name=\"returnPrice\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"投訴金額\">" + value + "</a>";
}
function editReturnReasonFormatter(value, row, index) {
return "<a class=\"rowEditable\" href=\"\" name=\"returnReason\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"售後原因\">" + value + "</a>";
}
// sometimes footer render error
/*setTimeout(function() {
$table.bootstrapTable('resetView');
}, 200);*/
/*$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
// save your data, here just save the current page
selections = getIdSelections();
// push or splice the selections if you want to save all data selections
});
$table.on('expand-row.bs.table', function (e, index, row, $detail) {
if (index % 2 == 1) {
$detail.html('Loading from ajax request...');
$.get('LICENSE', function (res) {
$detail.html(res.replace(/\n/g, '<br>'));
});
}
});
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args);
});*/
$(window).resize(function(){
$table.bootstrapTable('resetView',{
height: getHeight()
});
});
}
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
}
function getData() {
return $.map($table.bootstrapTable('getData'), function (row) {
return row.id+"---"+row.returnCount+"---"+row.returnPrice+"---"+row.returnReason+"---"+row.saleCount;
});
}
function getHeight() {
return document.body.clientHeight*0.88;
}
/*function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}*/
$(document).ready(function() {
initTable();
});
</script>二.擴展
行內編輯 Table Editable
表格導出 Table Export
最後更新：2017-06-21 19:58:37
上一篇： CDN緩存不命中排查
下一篇： 《數據驅動安全：數據安全分析、可視化和儀表盤》一導讀
- 常見 mysql innodb 表錯誤
- 學習筆記TF062:TensorFlow線性代數編譯框架XLA
- PHPSTORM 中文版/漢化 即常用快捷鍵和配置
- 如何在 Linux 和 Windows 之間共享 Steam 的遊戲文件
- Android開發7——android.database.CursorIndexOutOfBoundsException:Index -1 requested, with a size of 1
- 阿裏智能音箱發布前夕，首次公布自然語言處理成果
- Openlayers中layer介紹
- struts2中使用ajax之一
- 什麼叫工作到位？
- 《Java 本地接口規範》- JNI 函數（二）