Learn some things in Jquery for a while and supplement and improve them. After all, sometimes they are not used.
This method is very useful. When using bootstrap table, select the value of the ID in the event of the currently selected node
In the current rows There is a lot of data, but I only need the value of id. At this time, the operation is very simple.

$.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. My backend is written using SpringMVC. During this period, I also encountered many problems. When performing paging processing
I used offline query, but I used execute( )In this method, the incoming session is the data of the proxy class and cannot be converted in the following method.
It caused an error. I searched on Baidu for a long time, and finally found out that it was caused by this problem.

/** * 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);
 ............................
 }

In the background, the data and format I return are slightly different from the format in BootStrap. They are different anyway

{
 "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
 }
}

The main thing is that I use the unified return interface ActionResult here, which makes it easier to write the format. Unify the backend

**
 * 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);
 }
 
 ............
 
}

Let’s see the effect of the front-end

The front-end page

<%@ 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>

Explanation of the more important JS code

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

below As for the rewriting of configuration files and some events, you can check the documentation, or take a look at your source code yourself
Here you can rewrite it~~, and extentd will re-cover it!

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: '?',
 paginationNextText: '?',
 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;
 }
 };

Looking at the above, I basically know how to go and write! In fact, I didn’t dare to play like this before, but my instructor taught me how to play during my previous internship, so I dared. I believe that I can play these things well!

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
}
]
});

The above footerFormatter and formatter are events that process the display of the current column. The document is as follows
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.
All are processed and displayed for the current column

The following is to add two buttons in a cell

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

It can also be found here Just add event processing

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

The official document says that processing events can be handled as follows

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 [ &#39;<a class="like" href="javascript:void(0)" title="Like">&#39;, &#39;<i class="glyphicon glyphicon-heart"></i>&#39;, &#39;</a> &#39;, &#39;<a class="remove" href="javascript:void(0)" title="Remove">&#39;, &#39;<i class="glyphicon glyphicon-remove"></i>&#39;, &#39;</a>&#39; ].join(&#39;&#39;);
}
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]
});
}
};

handles the processing of events existing in the system. The document says

$('#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.

handles some Methods, such as how many rows are currently selected, select all, etc.

//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.

....many, many things!
A delete button to delete all selected events! Isn’t it great!

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);
});