jqGrid的subGrid子表格

使用完整jqGrid作為子表格 

使用子表格，涉及到jqGrid的三個選項：

• subGrid ：首先必須將jqGrid的subGrid選項設置為true，默認為false；當此項設為true的時候，Grid表格的最左邊將會添加一列，里面有一個“+”圖標，用於展開子格；
• subGridRowExpanded ：當點擊“+”展開子表格時，將觸發此選項定義的事件方法；
• subGridRowColapsed ：當點擊“-”收起子表格時，將觸發此選項定義的事件方法；

注1 ：subGridRowExpanded定義的事件方法函數將會得到兩個參數：

• subgrid_id ：子表格的id；當子表格展開的時候，在主表格中會創建一個div元素用來容納子表格，subgrid_id就是這個div的id。
• row_id ：主表格中所要展開子表格的行的id。

注2 ：在subGridRowExpanded定義的事件方法函數中，即可根據以上兩個參數，創建新的jqGrid對象，其中的options選項可參考主表格的jqGrid選項來運用。可以理解為在主表格中在嵌套一個新的jqGrid對象。當然，在subGridRowExpanded定義的事件函數中，也不一定非得嵌套一個新的jqGrid到主表格，可以將其放置於任何自己希望的位置，甚至做些別的操作，根本不去里理會子表格，比如使用$.ajax()向Server發送ajax請求，並根據返回的json，做些自定義的操作。

注3 ：應當注意subGridRowColapsed的拼寫並太符合規范，但卻不得不遵循這個拼寫。哈哈~

注4 ：相對於subGridRowExpanded必須定義事件函數來完成操作，subGridRowColapsed不用刻意定義對應的事件函數；因為當行收起的時候，上面提到的那個動態創建用來容納子表格的div，其里面的內容將會被自動移除(removed)。

現在來看看代碼中到底多了哪些內容。

$(function(){  
    // 配置jqGrid組件   
    $("#gridTable").jqGrid({  
        url: "jqGrid05.action",  
        datatype: "json",  
        mtype: "GET",  
        height: 350,  
        width: 600,  
        colModel: [  
              {name:"id",index:"id",label:"編碼",width:40},    
              {name:"lastName",index:"lastName",label:"姓",width:80},  
              {name:"firstName",index:"firstName",label:"名",width:80},  
              {name:"email",index:"email",label:"電子郵箱",width:160,sortable:false},  
              {name:"telNo",index:"telNo",label:"電話",width:120,sortable:false}  
        ],  
        viewrecords: true,  
        rowNum: 15,  
        rowList: [15,50,100],  
        prmNames: {search: "search"},  
        jsonReader: {  
            root:"gridModel",  
            records: "record",  
            repeatitems : false,  
        },  
        pager: "#gridPager",  
        caption: "聯系人列表",  
        hidegrid: false,  
        shrikToFit: true,  
        subGrid: true,  // (1)開啟子表格支持  
        subGridRowExpanded: function(subgrid_id, row_id) {  // (2)子表格容器的id和需要展開子表格的行id，將傳入此事件函數  
            var subgrid_table_id;  
            subgrid_table_id = subgrid_id + "_t";   // (3)根據subgrid_id定義對應的子表格的table的id  
              
            var subgrid_pager_id;  
            subgrid_pager_id = subgrid_id + "_pgr"  // (4)根據subgrid_id定義對應的子表格的pager的id  
              
            // (5)動態添加子報表的table和pager   
            $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");  
              
            // (6)創建jqGrid對象   
            $("#" + subgrid_table_id).jqGrid({  
                url: "fetchPatentCases.action?contact.id="+row_id,  // (7)子表格數據對應的url，注意傳入的contact.id參數  
                datatype: "json",  
                colNames: ['編號','內部編碼','名稱','申請號'],  
                colModel: [  
                    {name:"id",index:"id",width:80,key:true},  
                    {name:"internalNo",index:"internalNo",width:130},  
                    {name:"name",index:"name",width:80,align:"right"},  
                    {name:"applicationNo",index:"applicationNo",width:80,align:"right"}  
                ],  
                jsonReader: {   // (8)針對子表格的jsonReader設置  
                    root:"gridModel",  
                    records: "record",  
                    repeatitems : false  
                },  
                prmNames: {search: "search"},  
                pager: subgrid_pager_id,  
                viewrecords: true,  
                height: "100%",  
                rowNum: 5  
           });  
       }  
    });  
      
});