投稿
  1. 簡單一點首頁
  2. 投稿

bootstrap設計的精美網站推薦「bootstrap源碼使用」

投稿專員 • • 投稿

今天要做一個報表導入並預覽的功能，使用layui的文件上傳，獲取表格數據，接着把表格數據返回前台，使用bootstraptable展示，實現一個預覽表格數據的效果。通過後台處理後的數據bootstraptable加載數據，其實具體實現不難，今天要講的是在實現數據加載之後，我們出現了一些問題，我會附源碼講解問題的解決方案分享給大家

通過後台處理後的數據

// 數據經過處理後,真實數據已做修改
Data = [
	{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "企業職工基本養老保險",ZFNL: 22.1},
	{JJSRBY: 6666,JJSRBYLJ: 155666,JJZCBY: 777,JJZCBYLJ: 2266633,LJJY: 151515,NCYE: 121212,SZYEBY: 11111,SZYEBYLJ: -11559,XZ: "工傷保險",ZFNL: 22.1},
	...
];

bootstraptable加載數據

// field 需要和 Data中每個對象中的字段名對應。
// 
$('#previewTable').bootstrapTable({
	    data : Data,
	    //toolbar: '#toolBar', 
	    striped: true, //是否顯示行間隔色
	    cache: false, //是否使用緩存，默認為true，
	    //minimumCountColumns: 2, //最少允許的列數
	    clickToSelect: true, //是否啟用點擊選中行
	    columns: [
	   		[
	   	      {field : 'XZ', title: '險種', rowspan:2, align:"center"},
	   	      {field : 'NCYE', title: '年初餘額', rowspan:2,halign:"center",align:"right",
	   	    	formatter: function(value, row, index) {
	   	    		let num = row.NCYE;
	  				return num.toFixed(2);
	  			}
	   	      },
	   	      {title: '基金收入', colspan:2,align:"center"},
	   	      {title: '基金支出', colspan:2,align:"center"},
	   	      {title: '當年收支結餘', colspan:2,align:"center"},
	   	      {field : 'LJJY',title:'累計結餘', rowspan:2,halign:"center",align:"right",
	   	    	formatter: function(value, row, index) {
	   	    		let num = row.LJJY;
	  				return num.toFixed(2);
	  			}	
	   	      },
	   	      {field : 'ZFNL',title: '支付能力(月)', rowspan:2,halign:"center",align:"right",
	   	    	formatter: function(value, row, index) {
	   	    		let num = row.ZFNL;
	  				return num.toFixed(1);
	  			}
	   	      },
	   	    ],
	   	    [
	   	    	{field : 'JJSRBY',title:'本月', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.JJSRBY;
		  				return num.toFixed(2);
		  			}	
	   	    	},
	   	    	{field : 'JJSRBYLJ',title:'本月止累計', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.JJSRBYLJ;
		  				return num.toFixed(2);
		  			}	
	   	    	},
	   	    	{field : 'JJZCBY',title:'本月', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.JJZCBY;
		  				return num.toFixed(2);
		  			}	
	   	    	},
	   	    	{field : 'JJZCBYLJ',title:'本月止累計', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.JJZCBYLJ;
		  				return num.toFixed(2);
		  			}
	   	    	},
	   	    	{field : 'SZYEBY',title:'本月', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.SZYEBY;
		  				return num.toFixed(2);
		  			}	
	   	    	},
	   	    	{field : 'SZYEBYLJ',title:'本月止累計', colspan:1,halign:"center",align:"right",
	   	    		formatter: function(value, row, index) {
		   	    		let num = row.SZYEBYLJ;
		  				return num.toFixed(2);
		  			}	
	   	    	}
	   	    ]
	    ],
	    formatNoMatches : function() {
	    	return '<div style="color: #b8b8b8; height: 15px;"> 暫無數據 </div>';// 如果無數據則顯示這個
	    }
    });

這個實現其實不難，但是，沒想到的是，接下來的步驟出問題了，因為我們需要實現BootstrapTable重新加載，這種問題有以下兩種解決方案：

原始加載的表格

解決後加載表格

最重要的一點，寫在最前面：BootstrapTable一個頁面只能加載一次；想要重新加載，就必須先銷毀 ， 再重新初始化Bootstraptable。
銷毀的方法：

$(‘#id’).bootstrapTable(‘destroy’);

好了，接下來我們來看以以下具體實現方式

遇到此問題的情景

在table上方添加了文本輸入框，用於查詢過濾table中的數據，因此需要根據查詢條件，重新向後台向DAO層發送請求，返回新的結果。

解決辦法

原始加載的表格

這是一開始進入頁面加載的表格。

$('#infoList').bootstrapTable({
         url: '${pageContext.request.contextPath}/xx/xxx', //請求後台的URL（*）
         method: 'post', //請求方式（*）
         contentType: 'application/x-www-form-urlencoded',
         toolbar: '#toolbar', //工具按鈕用哪個容器
         striped: true, //是否顯示行間隔色
         cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
         pagination: true, //是否顯示分頁（*）
         sortable: false, //是否啟用排序
         sortOrder: "desc", //排序方式
         sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
         pageNumber: 1, //初始化加載第一頁，默認第一頁
         pageSize: 10, //每頁的記錄行數（*）
         pageList: [10, 50, 100], //可供選擇的每頁的行數（*）
         strictSearch: true,
         showColumns: false, //是否顯示所有的列
         showRefresh: false, //是否顯示刷新按鈕
         minimumCountColumns: 2, //最少允許的列數
         clickToSelect: true, //是否啟用點擊選中行
         //uniqueId: "aac147", //每一行的唯一標識，一般為主鍵列
         showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
         cardView: false, //是否顯示詳細視圖
         detailView: false, //是否顯示父子表
         queryParams: queryParams, //所需要的參數
       	 queryParamsType: "limit", //參數格式,發送標準的RESTFul類型的參數請求
         columns: myColumns,	// 列名這裡通過別處方法加載
         onClickRow: function (row, obj) {	//點擊事件
             ...
         },
         onLoadSuccess: function (data) {
         	...
         }
});

function queryParams(params) {  //配置參數
        var temp = {   //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            pageSize: params.limit,   //頁面大小
            pageNumber: (params.offset / params.limit) + 1,  //頁碼
        };
        return temp;
}
1234567891011121314151617181920212223242526272829303132333435363738394041

想要實現的效果：
此時我需要在表格上方，加上文本輸入框，並添加 查詢按鈕 ，點擊查詢按鈕，把輸入的條件加入到 表格參數 queryParams 中，通過數據庫的查詢 返回數據，並更改表格結構和內容，做到重新加載的效果。

但是失敗了。

解決後加載表格

需要在點擊查詢按鈕時，首先調用 表格銷毀方法

$('#infoList').bootstrapTable('destroy');

接着再重新加載新的表格：

$('#infoList').bootstrapTable({
url: '${pageContext.request.contextPath}/xx/xxx2', //請求後台的URL（*）
    method: 'post', //請求方式（*）
    contentType: 'application/x-www-form-urlencoded',
    toolbar: '#toolbar', //工具按鈕用哪個容器
    striped: true, //是否顯示行間隔色
    cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
    pagination: true, //是否顯示分頁（*）
    sortable: false, //是否啟用排序
    sortOrder: "desc", //排序方式
    sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pageSize: 10, //每頁的記錄行數（*）
    pageList: [10, 50 ,100], //可供選擇的每頁的行數（*）
    strictSearch: true,
    showColumns: false, //是否顯示所有的列
    showRefresh: false, //是否顯示刷新按鈕
    minimumCountColumns: 2, //最少允許的列數
    clickToSelect: true, //是否啟用點擊選中行
    showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕
    cardView: false, //是否顯示詳細視圖
    detailView: false, //是否顯示父子表
    queryParams: function(params){
    	return {
    		pageSize: params.limit,   //頁面大小
            pageNumber: (params.offset / params.limit) + 1,  //頁碼
            keyword: $("#search_json").val(),	// 關鍵詞
    	};
    },
    queryParamsType: "limit", //參數格式,發送標準的RESTFul類型的參數請求
    columns: myColumns,
    onClickRow: function (row, obj) {
        ...
    },
    onLoadSuccess: function (data) {
        ...
    }
});

function queryParams2(params) {  // 配置參數 有查詢條件用
	    var keyword = $("#search_json").val();
	    var temp = {   //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
	    pageSize: params.limit,   //頁面大小
	    pageNumber: (params.offset / params.limit) + 1,  //頁碼
        keyword: keyword	// 查詢關鍵詞
    };
	return temp;
}

注意：具體實現代碼太過龐大，所以以上代碼並不完整隻是提供思路。

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/268512.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
0 0
上一篇 2024-12-16 13:10
下一篇 2024-12-16 13:10

相關推薦

發表回復

登錄後才能評論