SNF快速開發平台MVC-表格儲存格合并組件

標籤：src   分頁   注意事項   菜單   table   click   blog   逗號   code   

1.   表格儲存格合并組件1.1.      效果展示1.1.1.    頁面展現表格合併儲存格

 

圖 4.1

 

1.1.2.    匯出excel合併儲存格

 

 

圖 4.2

1.2.      調用說明1.2.1.    表格合併儲存格調用說明

首先，要有一個在viewModel中綁定的表格，例如，我們有一個綁定對象為this.grid的表格

我們要在表格的onLoadSuccess事件中添加一個方法

snf.mergeCellsByParentField ("grid", "Code,Name,ApproveState");

此方法有兩個參數，第一個參數是需要進行合併儲存格的表格的id值；第二個參數為需要進行合并的列，用英文的逗號進行分隔。

如果第二個參數中包含多於一列，方法中會自動進行判斷，以第一列為主，只有第一列是合并狀態下，第二列才會合并，如果第一列的值不相同，沒有合并，那麼第二列中即使值相同也不會進行合并。如果有第三列，則以第二列為主，重複上述的方法，以此類推。

 

圖 4.3

4.3，81-86行資料中，81-84的編碼為MergeTestCode01，85-86行編碼為MergeTestCode02，那麼81-84和85-86會分別進行合并。81-83行的名稱都是MergeTestName01，所以也會進行合并，但是84-85行的名稱雖然相同，他們的編碼不同，而傳的參數中編碼（Code）在名稱（Name）之前，所以只要編碼不重複，名稱就不允許合并。後邊的狀態也是同理，83-86行雖然狀態都是審核中，卻不會合并。

1.2.2.    匯出excel合併儲存格調用說明

根據代碼產生器產生的程式碼，匯出預設調用this.downloadClick和this. downloadPageSizeClick事件，我們需要在viewModel中把這兩個方法進行重寫。

//05.下載

this.downloadClick = function (vm, event) {

    snf.exporter(self.grid).download($(event.currentTarget).attr("suffix"), "Code,Name,ApproveState");

};

 

this.downloadPageSizeClick = function () {

    var pageNumber = $(".pagination-num").val();

    var pageSize = $(".pagination-page-list").val();

    snf.exporter(this.grid).paging(pageNumber, pageSize).download("xls", "Code,Name,ApproveState"); //

};

self.grid為表格定義的對象，本例子中為self.grid，參數"Code,Name,ApproveState"為需要進行合并的列，原理同4.2.2完全相同。

1.2.3.    demo範例

程式路徑：/DEMO/ DemoSingleTableMerge/ DemoSingleTableMerge

可在程式中按照此路徑增加菜單查看

1.3.      注意事項

如果存在多個分頁的表格對象，需要進行分頁匯出功能時（即，匯出當前頁），重寫的方法要稍加改動

this.downloadPageSizeClick = function () {

    var pageNumber = $(".pagination-num").eq(0).val();

    var pageSize = $(".pagination-page-list").eq(0).val();

    snf.exporter(this.grid).paging(pageNumber, pageSize).download("xls", "Code,Name,ApproveState"); //

};

如上，需要加上.eq(0)或者.eq(1)或者.eq(...)，括弧中的整數0、1或者其他的，表示分頁表格是第幾個，要從0開始數，防止分頁標記混淆

 

SNF快速開發平台MVC-表格儲存格合并組件