1. 程式人生 > >bootstrapTable外掛簡單用法

bootstrapTable外掛簡單用法


 $('#matterLsit').bootstrapTable({//當前table標籤Id
    method: 'post',
    contentType: "application/x-www-form-urlencoded",
    url: '',
//  idField: "projectId",
    striped: true, //是否顯示行間隔色
    pagination: true, //設定為 true 會在表格底部顯示分頁條
    pageList: [8, 15, 20], //如果設定了分頁,設定可供選擇的頁面資料條數。設定為All 則顯示所有記錄。
    pageSize: 8
, //如果設定了分頁,頁面資料條數 pageNumber: 1, //如果設定了分頁,首頁頁碼 sidePagination: 'server', //設定在哪裡進行分頁,可選值為 'client' 或者 'server'。設定 'server'時,必須設定 伺服器資料地址(url)或者重寫ajax方法 silent: true, sortable: true, //設定為false 將禁止所有列的排序 sortOrder: "desc", //預設排序方式 silentSort: true, //設定為 false 將在點選分頁按鈕時,自動記住排序項 singleSelect: false
, //設定True 將禁止多選 clickToSelect: true, //設定true 將在點選行時,自動選擇rediobox 和 checkbox search: false, //是否啟用搜索框 strictSearch: false, //設定為 true啟用 全匹配搜尋,否則為模糊搜尋 showColumns: false, //是否顯示 內容列下拉框 showRefresh: false, //是否顯示 重新整理按鈕 showToggle: false, //是否顯示 切換試圖(table/card)按鈕 cardView: false, //設定為 true將顯示card檢視,適用於移動裝置。否則為table試圖,適用於pc
toolbar: "#toolbar", queryParams: getMatterData,//重新整理列表傳遞引數 queryParamsType: "limit",//分頁 columns: [{ checkbox: true }, { title: '序號', width:50, formatter: function(value, row, index) { return getPageSize * (getPageNub - 1) + index + 1; } }, { field: 'name', title: '所屬部門', sortable: false } ] ,onDblClickRow:addAlreadyRow//回撥函式雙擊事件 });

回撥函式

// 提交時傳遞引數
 var getPageNub = "";
 var getPageSize = "";
 var rows = "";
 var nowpage = "";
 function getMatterData(params){
     var queryDate = {
             "rows": params.limit,
                "nowpage": params.pageNumber,
                "departmentId": $("#searchDepartment").val(),
                "directoryNameSearch": $("#searchProjectName").val(),
                "projectClassifySearch": $("#searchProClassify").val(),
                "sortOrder": params.order,
                "searchText": params.search,
                "sortName": params.sort,
            };
            getPageNub = params.pageNumber;
            getPageSize = params.limit;
            rows = params.limit;
            nowpage = params.pageNumber;
            sortOrder = params.order;
            return queryDate;
 }

行雙擊事件

//row當前行,通過呼叫類屬性取值
 function addAlreadyRow(row){
     var str = "<tr ondblclick='removeThisRow(this);'>";
        str ="<td>"+row.name+"</td>"+"</tr>";
     $("#alreadyMatter").append(str);
 }

增加查詢按鈕

 將所需要傳遞引數放入queryParams的引數中,點選查詢呼叫table重新整理即可
$("#searchBtn").click(function() {
    $("#table").bootstrapTable('refresh');
});