jQuery LigerUI 使用教程表格篇(3) 復選框、多表頭、分組、匯總和明細

閱讀目錄

• 復選框
• 多表頭
• 分組
• 匯總
• 明細

復選框

grid可以設置復選框模式進行多選，只需要簡單的配置

checked:true

獲取選中行

如果要獲取選中的行，可以用getSelecteds方法：

var rows = g.getSelecteds();
alert(rows.length);

默認選中

有的時候我們想讓某一些行初始化的時候就選中，可以用isChecked參數，這是一個函數，使用例子：

 $("#maingrid4").ligerGrid({
                checkbox: true,
                columns: [
                { display: '主鍵', name: 'CustomerID', align: 'left', width: 120 },
                { display: '公司名', name: 'CompanyName', minWidth: 60 },
                { display: '聯系名', name: 'ContactName', width: 50,align:'left' } 
                { display: '城市', name: 'City' }
                ],  pageSize:30,
                data: CustomersData,  
                width: '100%', height: '100%', isChecked: f_isChecked
            }); 

 function f_isChecked(rowdata)
        {
            if (rowdata.CustomerID.indexOf('AN') == 0) 
                return true;
            return false;
        }

鎖定列

如果啟動了固定列功能，frozen:true。那么復選框列默認是鎖定的，可以通過設置frozenCheckbox參數來解除

frozenCheckbox:false

相關事件

如果你不知道事件如何使用，可以參考

jQuery LigerUI 使用教程入門篇

jQuery LigerUI 使用教程表格篇(1)

多表頭

將columns配置為樹的格式就可以變成多表頭。比如:

columns: [
                { display: '公司信息', columns:
                [
                    
                    { display: '公司名', name: 'CompanyName', minWidth: 60,width:300  } 
                ]
                },
                { display: '個人信息', columns:
                [
                    { display: '主鍵', name: 'CustomerID', align: 'left', width: 120 }, 
                    { display: '聯系名', name: 'ContactName', width: 50, align: 'left' },
                    { display: '城市', name: 'City', headerText: '44444' }
                ]
                }
                ]

columns可以無限級擴展，也就是說可以三級多表頭，也可以是四級多表頭，只要你願意。

分組

分組只需要簡單得配置一個參數groupColumnName，插件就可以自動完成。配置groupColumnDisplay可以用於顯示分組時的名字：

也可以自定義分組顯示的格式：

匯總

匯總有兩種方式，一種是針對全部數據的匯總，一直是針對當前頁進行匯總

1，全部數據的匯總： 一般你綁定的表格數據有Rows和Total屬性，你可以增加其他的屬性，用於統計使用，比如加上 SumAmount。

totalRender: f_totalRender

function f_totalRender(data, currentPageData)
 {
        return "總金額數量:"+data.SumAmount; 
 }

2，當前頁數據/分組數據的匯總，針對某一列進行配置，只需要設置totalSummary的type：

也可以自定義匯總單元格的格式：

可以和分組一起工作，只匯總分組的數據：

明細

明細的工作原理很簡單，就是在點擊明細展開/收縮按鈕的時候，會創建一個空白的行(下圖代碼中得detailPanel)，並獲取當前行的數據。我們會根據當前行數據進行一些工作，比如獲取明細表的數據，或者是展開當前列表並未列出的一些信息，像圖片之類的，也可以展開當前行的編輯行。

明細編輯行：