1. 程式人生 > >bootstraptable擴充套件外掛(bootstrap-table-export.js)增加表格匯出功能

bootstraptable擴充套件外掛(bootstrap-table-export.js)增加表格匯出功能

原始碼 $(function() { //初始化bootstrapTable
    var oTableInter = new TableInitInterface();
    oTableInter.Init();
  });
  var TableInitInterface = function() {
    var oTableInit = new Object();
    oTableInit.Init = function() {
      $stockTable.bootstrapTable({
        //url: '/Home/GetDepartment', //請求後臺的URL(*)
        //method: 'get', //請求方式(*)
        //toolbar: '#toolbar', //工具按鈕用哪個容器
        striped: true, //是否顯示行間隔色
        cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
        pagination: true, //是否顯示分頁(*)
        sortable: true, //是否啟用排序
        sortOrder: "desc", //排序方式
        showExport: true,  //是否顯示匯出按鈕

        buttonsAlign:"right",  //按鈕位置
        exportTypes:['excel'],  //匯出檔案型別
        Icons:'glyphicon-export',
        //queryParams: oTableInit.queryParams, //傳遞引數(*)
        sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*)
        pageNumber: 1, //初始化載入第一頁,預設第一頁
        pageSize: 5, //每頁的記錄行數(*)
        pageList: [5, 10, 15, 20], //可供選擇的每頁的行數(*)
        search: false, //是否顯示錶格搜尋,此搜尋是客戶端搜尋,不會進服務端,所以,個人感覺意義不大
        strictSearch: true,
        showColumns: true, //是否顯示所有的列
        showRefresh: false, //是否顯示重新整理按鈕
        minimumCountColumns: 2, //最少允許的列數
        clickToSelect: true, //是否啟用點選選中行
        //height: 500, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
        uniqueId: "collateralNum", //每一行的唯一標識,一般為主鍵列
        showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕
        cardView: false, //是否顯示詳細檢視
        detailView: false, //是否顯示父子表
        data: dataInterface,
        columns: [
          {
          field: 'id',
          title: '操作',
          width: '160px',
          align: "center",
          valign: 'middle', // 上下居中
          checkbox:true,
          },
          {
            field: 'collateralNum',
            title: '押品編號',
            align: "center",
            valign: 'middle', // 上下居中
            visible: true
          },
          {
            field: 'borrower',
            title: '借款人',
            align: "center",
            valign: 'middle', // 上下居中
            visible: true
          },] })

要匯入的js

$(function() { //初始化bootstrapTable
    var oTableInter = new TableInitInterface();
    oTableInter.Init();
  });
  var TableInitInterface = function() {
    var oTableInit = new Object();
    oTableInit.Init = function() {
      $stockTable.bootstrapTable({
        //url: '/Home/GetDepartment', //請求後臺的URL(*)
        //method: 'get', //請求方式(*)
        //toolbar: '#toolbar', //工具按鈕用哪個容器
        striped: true, //是否顯示行間隔色
        cache: false, //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
        pagination: true, //是否顯示分頁(*)
        sortable: true, //是否啟用排序
        sortOrder: "desc", //排序方式
        showExport: true,  //是否顯示匯出按鈕
        buttonsAlign:"right",  //按鈕位置
        exportTypes:['excel'],  //匯出檔案型別
        Icons:'glyphicon-export',
        //queryParams: oTableInit.queryParams, //傳遞引數(*)
        sidePagination: "client", //分頁方式:client客戶端分頁,server服務端分頁(*)
        pageNumber: 1, //初始化載入第一頁,預設第一頁
        pageSize: 5, //每頁的記錄行數(*)
        pageList: [5, 10, 15, 20], //可供選擇的每頁的行數(*)
        search: false, //是否顯示錶格搜尋,此搜尋是客戶端搜尋,不會進服務端,所以,個人感覺意義不大
        strictSearch: true,
        showColumns: true, //是否顯示所有的列
        showRefresh: false, //是否顯示重新整理按鈕
        minimumCountColumns: 2, //最少允許的列數
        clickToSelect: true, //是否啟用點選選中行
        //height: 500, //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
        uniqueId: "collateralNum", //每一行的唯一標識,一般為主鍵列
        showToggle: true, //是否顯示詳細檢視和列表檢視的切換按鈕
        cardView: false, //是否顯示詳細檢視
        detailView: false, //是否顯示父子表
        data: dataInterface,
        columns: [
          {
          field: 'id',
          title: '操作',
          width: '160px',
          align: "center",
          valign: 'middle', // 上下居中
          checkbox:true,
          },
          {
            field: 'collateralNum',
            title: '押品編號',
            align: "center",
            valign: 'middle', // 上下居中
            visible: true
          },
          {
            field: 'borrower',
            title: '借款人',
            align: "center",
            valign: 'middle', // 上下居中
            visible: true
          }, 要匯入的js的包:https://blog.csdn.net/ning521513/article/details/60744749