Bootstrap Table的使用小結

1.Jquery中的一些東西學習一下子，補充完善一下，畢竟有些時候沒有使用到

這個方式很有用，在使用bootstrap table的時候，選擇當前已經選擇的節點的事件中的ID的值
當前rows中有很多的數據，但是我只需要id這一個值，這個時候進行操作就非常的簡單了。

$.map(data,function(item,index){return XXX})
使用的總結：
  把一個數組，按照新的方式進行組裝返回，和原來的數組不一樣。
  遍歷data數組中的每個元素，並按照return中的計算方式 形成一個新的元素，放入返回的數組中
  var b = $.map( [55,1,2], function( item,index )
  {  
       return { 
         "label": item,
          "value": index 
         }
   });
   alert(b[0].label +"  "+ b[0].value);  
   輸出爲  55 0   

2.後臺呢，我返回的數據和格式不是按照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
    }
}

主要是這裏我是用了統一的返回接口 ActionResult，這樣比較方便書寫格式，統一後端

**
 * 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) {//這個是設置查詢時候的參數，我直接在源碼中修改過，不喜歡offetset 我後臺用的                    是pageNo. 這樣處理就比較的滿足我的要求，其實也可以在後臺改，麻煩！
            return params;
        },
        queryParamsType: 'limit', // undefined (這裏是根據不同的參數，選擇不同的查詢的條件)
        responseHandler: function (res) {//這裏我查看源碼的，在ajax請求成功後，發放數據之前可以對返回的數據進行處理，返回什麼部分的數據，比如我的就需要進行整改的！
            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,//展示頁數的選擇？
        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,  //每頁顯示的記錄數
        pageNumber:1, //當前第幾頁
        pageList: [10, 15, 20, 25],  //記錄數可選列表
        search: false,  //是否啓用查詢
        showColumns: true,  //顯示下拉框勾選要顯示的列
        showRefresh: true,  //顯示刷新按鈕
        sidePagination: "server", //表示服務端請求
        //設置爲undefined可以獲取pageNumber，pageSize，searchText，sortName，sortOrder
        //設置爲limit可以獲取limit, offset, search, sort, order
        responseHandler:function(res){
          //遠程數據加載之前,處理程序響應數據格式,對象包含的參數: 我們可以對返回的數據格式進行處理
          //在ajax後我們可以在這裏進行一些事件的處理
          return res.data;
        },
        queryParamsType : "undefined",
        queryParams: function queryParams(params) {   //設置查詢參數
          var param = {
            //這裏是在ajax發送請求的時候設置一些參數 params有什麼東西，自己看看源碼就知道了
            pageNo: params.pageNumber,
            pageSize: params.pageSize
          };
          return param;
        },
        onLoadSuccess: function(data){  //加載成功時執行
          alert("加載成功"+data);
        },
        onLoadError: function(){  //加載失敗時執行
          layer.msg("加載數據失敗", {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 = ‘編輯 ‘;
var d = ‘刪除 ‘;
return e+d;
也可以這樣處理事件的
}
}–%