欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap Table的使用總結(jié)

 更新時間：2016年10月08日 11:19:04   作者：碼農(nóng)小汪  
這篇文章主要介紹了Bootstrap Table的使用小結(jié)，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧

Jquery中的一些東西學習一下子，補充完善一下，畢竟有些時候沒有使用到這個方式很有用，在使用bootstrap table的時候，選擇當前已經(jīng)選擇的節(jié)點的事件中的ID的值 當前rows中有很多的數(shù)據(jù)，但是我只需要id這一個值，這個時候進行操作就非常的簡單了。

$.map(data,function(item,index){return XXX})

使用的總結(jié)：

把一個數(shù)組，按照新的方式進行組裝返回，和原來的數(shù)組不一樣。

遍歷data數(shù)組中的每個元素，并按照return中的計算方式 形成一個新的元素，放入返回的數(shù)組中

var b = $.map( [55,1,2], function( item,index )
{ 
return { 
"label": item,
"value": index 
}
});
alert(b[0].label +" "+ b[0].value);

輸出為 55 0

2.我的后臺呢，是使用SpringMVC進行寫的，期間呢也是遇到了很多的問題 ，進行分頁處理的時候使用了離線查詢，但是呢，我使用的是execute()這個方法，傳入的session為代理類的數(shù)據(jù)，不能再下面這個方法中進行轉(zhuǎn)換導致錯誤了，我還百度了很久，最后才發(fā)現(xiàn)是這個問題導致的

/**
* Get an executable instance of <literal>Criteria</literal>,
* to actually run the query.
*/
public Criteria getExecutableCriteria(Session session) {
impl.setSession( ( SessionImplementor ) session );
return impl;
}
return (PageBean) getHibernateTemplate().executeWithNativeSession(new HibernateCallback() {
public Object doInHibernate(Session session) throws HibernateException {
Criteria criteria = detachedCriteria.getExecutableCriteria(session);
............................
}

后臺呢，我返回的數(shù)據(jù)和格式不是按照BootStrap中的格式有點差別吧，反正就是不一樣

{
"success": true,
"message": null,
"data": {
"pageSize": 15,
"rows": [
{
"userName": "333",
"userType": 333,
"password": "333",
"id": 11,
"indexcode": "333"
},
{
"userName": "3",
"userType": 333,
"password": "333",
"id": 5,
"indexcode": "33333"
}
.......
],
"total": 17,
"totalPage": 2,
"page": 0,
"hasPreviousPage": true,
"hasNextPage": true,
"lastPage": false,
"firstPage": false
}
}

主要是這里我是用了統(tǒng)一的返回接口 ActionResult，這樣比較方便書寫格式，統(tǒng)一后端

**
* Created by JetWang on 2016/10/1.
*/
public class ActionResult {
private boolean success;
private String message;
private Object data;
public ActionResult(){
}
public ActionResult(boolean success){
this(success, null, null);
}
............
}

來看看前端的效果吧

這里寫圖片描述

前端的頁面

<%@ include file="./common/common.jsp"%> //什么公用的bootstrapt ，JQuery啊之類的引用放進去處理了
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script>
<script src="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table-locale-all.js" type="text/javascript">
</script>
<link rel="stylesheet" href="<%=baseUrl%>/libs/bootstrap-table/dist/bootstrap-table.css" type="text/css">
//這里就是容器中放置table的
<div class="container">
<table id="table"
data-url="/cms/UserInfo/userInfoPage">//使用的路徑，后臺請求的URL
</table>
</div>

比較重要的JS代碼的說明

jQuery(document).ready(function() {
//這里你可以使用各種法師，也可以使用seajs前端模塊化工具
下面放置我們的js代碼就好了
});

下面的配置文件和一些事件的重寫呢，你可以查看文檔，或者自己去看看你源碼
這里你可以進行重寫哦~~ ，extentd進行重新的覆蓋！

BootstrapTable.DEFAULTS = {
classes: 'table table-hover',
locale: undefined,
height: undefined,
undefinedText: '-',
sortName: undefined,
sortOrder: 'asc',
sortStable: false,
striped: false,
columns: [[]],
data: [],
dataField: 'rows',
method: 'get',
url: undefined,
ajax: undefined,
cache: true,
contentType: 'application/json;charset=UTF-8',//這里我就加了個utf-8
dataType: 'json',
ajaxOptions: {},
queryParams: function (params) {//這個是設置查詢時候的參數(shù)，我直接在源碼中修改過，不喜歡offetset 我后臺用的 是pageNo. 這樣處理就比較的滿足我的要求，其實也可以在后臺改，麻煩！
return params;
},
queryParamsType: 'limit', // undefined (這里是根據(jù)不同的參數(shù)，選擇不同的查詢的條件)
responseHandler: function (res) {//這里我查看源碼的，在ajax請求成功后，發(fā)放數(shù)據(jù)之前可以對返回的數(shù)據(jù)進行處理，返回什么部分的數(shù)據(jù)，比如我的就需要進行整改的！
return res;
},
pagination: false,
onlyInfoPagination: false,
sidePagination: 'client', // client or server
totalRows: 0, // server side need to set
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '&lsaquo;',
paginationNextText: '&rsaquo;',
search: false,
searchOnEnterKey: false,
strictSearch: false,
searchAlign: 'right',
selectItemName: 'btSelectItem',
showHeader: true,
showFooter: false,
showColumns: false,
showPaginationSwitch: false,//展示頁數(shù)的選擇？
showRefresh: false,
showToggle: false,
buttonsAlign: 'right',
smartDisplay: true,
escape: false,
minimumCountColumns: 1,
idField: undefined,
uniqueId: undefined,
cardView: false,
detailView: false,
detailFormatter: function (index, row) {
return '';
},
trimOnSearch: true,
clickToSelect: false,
singleSelect: false,
toolbar: undefined,
toolbarAlign: 'left',
checkboxHeader: true,
sortable: true,
silentSort: true,
maintainSelected: false,
searchTimeOut: 500,
searchText: '',
iconSize: undefined,
buttonsClass: 'default',
iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
icons: {
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'
},
customSearch: $.noop,
customSort: $.noop,
rowStyle: function (row, index) {
return {};
},
rowAttributes: function (row, index) {
return {};
},
footerStyle: function (row, index) {
return {};
},
onAll: function (name, args) {
return false;
},
onClickCell: function (field, value, row, $element) {
return false;
},
onDblClickCell: function (field, value, row, $element) {
return false;
},
onClickRow: function (item, $element) {
return false;
},
onDblClickRow: function (item, $element) {
return false;
},
onSort: function (name, order) {
return false;
},
onCheck: function (row) {
return false;
},
onUncheck: function (row) {
return false;
},
onCheckAll: function (rows) {
return false;
},
onUncheckAll: function (rows) {
return false;
},
onCheckSome: function (rows) {
return false;
},
onUncheckSome: function (rows) {
return false;
},
onLoadSuccess: function (data) {
return false;
},
onLoadError: function (status) {
return false;
},
onColumnSwitch: function (field, checked) {
return false;
},
onPageChange: function (number, size) {
return false;
},
onSearch: function (text) {
return false;
},
onToggle: function (cardView) {
return false;
},
onPreBody: function (data) {
return false;
},
onPostBody: function () {
return false;
},
onPostHeader: function () {
return false;
},
onExpandRow: function (index, row, $detail) {
return false;
},
onCollapseRow: function (index, row) {
return false;
},
onRefreshOptions: function (options) {
return false;
},
onRefresh: function (params) {
return false;
},
onResetView: function () {
return false;
}
};

看看上面的自己也基本上曉得怎么去，書寫了！其實之前我根本不敢這么玩，只不過之前實習過程中導師教過我怎么去玩，所以我才敢，我相信，我可以好好的 玩好這些東西的！

function initTable() {
$table.bootstrapTable({
striped: true, //表格顯示條紋
pagination: true, //啟動分頁
pageSize: 15, //每頁顯示的記錄數(shù)
pageNumber:1, //當前第幾頁
pageList: [10, 15, 20, 25], //記錄數(shù)可選列表
search: false, //是否啟用查詢
showColumns: true, //顯示下拉框勾選要顯示的列
showRefresh: true, //顯示刷新按鈕
sidePagination: "server", //表示服務端請求
//設置為undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder
//設置為limit可以獲取limit, offset, search, sort, order
responseHandler:function(res){
//遠程數(shù)據(jù)加載之前,處理程序響應數(shù)據(jù)格式,對象包含的參數(shù): 我們可以對返回的數(shù)據(jù)格式進行處理
//在ajax后我們可以在這里進行一些事件的處理
return res.data;
},
queryParamsType : "undefined",
queryParams: function queryParams(params) { //設置查詢參數(shù)
var param = {
//這里是在ajax發(fā)送請求的時候設置一些參數(shù) params有什么東西，自己看看源碼就知道了
pageNo: params.pageNumber,
pageSize: params.pageSize
};
return param;
},
onLoadSuccess: function(data){ //加載成功時執(zhí)行
alert("加載成功"+data);
},
onLoadError: function(){ //加載失敗時執(zhí)行
layer.msg("加載數(shù)據(jù)失敗", {time : 1500, icon : 2});
},
height: getHeight(),
columns: [
{
field: 'state',
checkbox: true,
align: 'center',
valign: 'middle'
}, {
title: 'ID',
field: 'id',
align: 'center',
valign: 'middle'
},
{
field: 'userName',
title: 'UserName',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'userType',
title: 'UserType',
sortable: true,
align: 'center'
},
{
field: 'password',
title: 'UserPass',
sortable: true,
align: 'center'
},{
field: 'indexcode',
title: 'Indexcode',
sortable: true,
align: 'center'
},{
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
]
});

上面的 footerFormatter 和 formatter 都是對于當前列的顯示進行處理的事件，文檔中如下

formatter:

The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index. 
footerFormatter : 
The context (this) is the column Object. The function, take one parameter: 
data: Array of all the data rows. the function should return a string with the text to show in the footer cell.

都是對于當前列進行處理顯示

如下就是增加了兩個按鈕在一個單元格中

function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}

也可以在這里就增加事件的處理

<%--{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</a> ';
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</a> ';
return e+d;
也可以這樣處理事件的
}
}--%>

官方中文檔說的處理事件可以像下面這里處理

The cell events listener when you use formatter function, take four parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.

Example code:

{
field: 'operate',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};

處理系統(tǒng)中存在的事件的處理，文檔中有說

$('#table').bootstrapTable({
onEventName: function (arg1, arg2, ...) {
// ...
}
});
$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
// ...
});

這個名字文檔中很多!

onAll all.bs.table 
name, args 
Fires when all events trigger, the parameters contain: 
name: the event name, 
args: the event data.

處理一些方法，比如當前選擇了多少行，全選等等

The calling method syntax: $('#table').bootstrapTable('method', parameter);

1 當前選擇選的框框的id

getSelections none Return selected rows, when no record selected, an empty array will return.

2.全選

getAllSelections none Return all selected rows contain search or filter, when no record selected, an empty array will return.
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args);
});

3.刪除 前臺的數(shù)據(jù)，不需要從后臺重新加載

remove params Remove data from table, the params contains two properties: 
field: the field name of remove rows. 
values: the array of values for rows which should be removed.

.....很多很多的東西！

一個刪除的按鈕，刪除所有的選擇的事件！是不是很好呢！

function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
});
}
$remove.click(function () {
var ids = getIdSelections();
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
$remove.prop('disabled', true);
});

以上所述是小編給大家介紹的Bootstrap Table的使用總結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

最新評論