原博主鏈接：http://blog.csdn.net/dreamstar613/article/details/54616503
jqGrid多級表格（可N級）
主要用的方法：
subGridRowExpanded ：當點擊“+”(我的是向右的箭頭)展開子表格時，將觸發此選項定義的事件方法；這時會自動創建一個div,在這個方法中可以獲取到這個div的id和表格中該行的id
subGridRowColapsed ：當點擊“-”(我的是向下的箭頭)收起子表格時，將觸發此選項定義的事件方法；
在點擊“-”時，子表格的div自動清除
在點擊”+”時，也可以不去添加子表格，而去做別的自己需要的操作
html代碼：
1 <div class="gridPanel"> 2 <table id="gridList"></table> 3 <div id="gridPager"></div> 4 </div>
第一個js代碼：主要就是設置subGrid:true和subGridRowExpanded
1 function gridList() { 2 var $gridList = $("#gridList"); 3 $gridList.dataGrid({ 4 url: "/PPR/BasicInformation/GetPPRModels", 5 height: $(window).height() - 128, 6 colModel: [ 7 { label: '主鍵', name: 'Id', hidden: true }, 8 { label: '工藝編碼', name: 'Code', width: 80, align: 'left' }, 9 { label: '工藝名稱', name: 'Name', width: 120, align: 'left' }, 10 { label: '產品編碼', name: 'MMCode', width: 80, align: 'left' }, 11 { label: '產品名稱', name: 'MMName', width: 80, align: 'left' }, 12 { label: '版本號', name: 'Version', width: 80, align: 'left' }, 13 { label: 'status', name: 'Status', hidden: true }, 14 { label: '狀態', name: 'StatusName', width: 80, align: 'left' }, 15 { label: '描述', name: 'Describe', width: 80, align: 'left' } 16 ], 17 pager: "#gridPager", 18 sortname: 'CreationTime desc', 19 viewrecords: true, 20 subGrid: true,//開啟子表格支持 21 //子表格的id；當子表格展開的時候，在主表格中會創建一個div元素用來容納子表格，subgrid_id就是這個div的id 22 subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展開子表格的行id 23 bindSubGrid(subgrid_id, row_id); 24 },28 onCellSelect: function (rowid, index, contents, event) { 29 onCell();//是一個控制按鈕顯示隱藏的方法 30 } 31 }); 32 $("#btn_search").click(function () { 33 $gridList.jqGrid('setGridParam', { 34 postData: { PPRCode: $("#PPRCode").val() } 35 }).trigger('reloadGrid'); 36 }); 37 }
第二個js代碼:是第一個js代碼中bindSubGrid()方法的具體內容
1 function bindSubGrid(subgrid_id, collectLineId) { 2 onCell(); 3 var PPRCode = $("#gridList").jqGrid('getRowData', collectLineId).Code; 4 var status = $("#gridList").jqGrid('getRowData', collectLineId).StatusName; 5 subgrid_table_id = subgrid_id + "_t";//最終子表格的div的id是加了"_t"的 subgrid_table_id是全局變量：var subgrid_table_id; 6 $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");//這里是添加子表格div,id為subgrid_table_id 7 $("#" + subgrid_table_id).jqGrid( 8 { 9 url: "/PPR/BasicInformation/GetPSModels?PPRCode=" + PPRCode, 10 datatype: "json", 11 height: "auto", 12 colModel: [ 13 { label: '主鍵', name: 'Id', hidden: true }, 14 { label: '工藝編碼', name: 'PPRCode', hidden: true }, 15 { label: '工序編碼', name: 'Code', width: 80, align: 'left' }, 16 { label: '工序名稱', name: 'Name', width: 80, align: 'left' }, 17 { label: '是否剔除', name: 'IsRemoved', width: 80, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "是:否" } }, 18 { label: '序列號', name: 'OrderIndex', width: 80, align: 'left', editable: true, editrules: { edithidden: true, required: true, number: true } }, 19 { label: '備注', name: 'Describe', width: 200, align: 'left' } 20 ], 21 rowNum: 200, 22 mtype: "post", 23 viewrecord: true, 24 subGrid: true,//開啟子表格支持 25 //子表格的id；當子表格展開的時候，在主表格中會創建一個div元素用來容納子表格，subgrid_id就是這個div的id 26 subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展開子表格的行id 27 bindSubGrid2(subgrid_id, row_id); 28 }, 29 onCellSelect: function (rowid, index, contents, event) { 30 $("#gridList").jqGrid('setSelection', collectLineId);//該工序的工藝選中 31 subgrid_table_id = subgrid_id + "_t"; 32 $(".operate").animate({ "left": 0 }, 200); 33 $("#NF-edit").hide(); 34 $("#NF-delete").hide(); 35 $("#NF-start").hide(); 36 $("#NF-stop").hide(); 37 $("#NF-process").hide(); 38 $("#NF-copy").hide(); 39 $("#NF-step").show(); 40 $("#NF-material").hide(); 41 $("#NF-measure").hide(); 42 setTimeout(function () { 43 if (status == "新建") { 44 $("#NF-step").attr("onclick", "btn_step();"); 45 $("#NF-step").css("color", "#333333 "); 46 } else { 47 $("#NF-step").removeAttr("onclick"); 48 $("#NF-step").css("color", "#CFCFCF "); 49 } 50 }, 30); 51 } 52 }); 53 }
若要再添加子表格只需要在bindSubGrid中繼續設置subGrid:true和subGridRowExpanded（上面第二個js代碼中有）
我項目中共4級，其余的js代碼如下：
第三個js代碼：
1 function bindSubGrid2(subgrid_id, collectLineId) { 2 listId = subgrid_id.substring(0, 12); 3 var listRootId = subgrid_id.substring(9, 10); 4 var PSCode = $("#" + listId).jqGrid('getRowData', collectLineId).Code; 5 var PPRCode = $("#" + listId).jqGrid('getRowData', collectLineId).PPRCode; 6 var status = $("#gridList").jqGrid('getRowData', listRootId).StatusName; 7 subgrid_table_id = subgrid_id + "_t"; 8 $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); 9 $("#" + subgrid_table_id).jqGrid( 10 { 11 url: "/PPR/BasicInformation/GetStepModels?PPRCode=" + PPRCode + "&PSCode=" + PSCode, 12 datatype: "json", 13 height: "auto", 14 colModel: [ 15 { label: '主鍵', name: 'Id', hidden: true }, 16 { label: '工藝編碼', name: 'PPRCode', hidden: true }, 17 { label: '工序編碼', name: 'PSCode', hidden: true }, 18 { label: '工步編碼', name: 'Code', width: 80, align: 'left' }, 19 { label: '工步名稱', name: 'Name', width: 80, align: 'left' }, 20 { label: '工步類型', name: 'TypeName', width: 80, align: 'left' }, 21 { label: '最大測量次數', name: 'MaxCycles', width: 80, align: 'left' }, 22 { label: '程序編碼', name: 'ProgNum', width: 80, align: 'left' }, 23 { label: '序列號', name: 'OrderIndex', width: 80, align: 'left', editable: true }, 24 { label: '備注', name: 'Describe', width: 200, align: 'left' } 25 ], 26 rowNum: 200, 27 mtype: "post", 28 viewrecord: true, 29 subGrid: true,//開啟子表格支持 30 //子表格的id；當子表格展開的時候，在主表格中會創建一個div元素用來容納子表格，subgrid_id就是這個div的id 31 subGridRowExpanded: function (subgrid_id, row_id) {//子表格容器的id和需要展開子表格的行id 32 bindSubGrid3(subgrid_id, row_id); 33 }, 34 onCellSelect: function (rowid, index, contents, event) { 35 listId = subgrid_id.substring(0, 12);//gridlist_3_t_1 36 gridListRowId = subgrid_id.substring(9, 10);//3 37 $("#gridList").jqGrid('setSelection', gridListRowId);//該工序的工藝選中 38 $("#" + listId).jqGrid('setSelection', collectLineId);//該工步的工序選中 39 MMCode = $("#gridList").jqGrid('getRowData', gridListRowId).MMCode;//該工藝的物料編碼 40 $(".operate").animate({ "left": 0 }, 200); 41 $("#NF-edit").hide(); 42 $("#NF-delete").hide(); 43 $("#NF-start").hide(); 44 $("#NF-stop").hide(); 45 $("#NF-process").hide(); 46 $("#NF-copy").hide(); 47 $("#NF-step").hide(); 48 $("#NF-material").show(); 49 $("#NF-measure").show(); 50 setTimeout(function () { 51 var type = $("#" + subgrid_table_id).jqGridRowValue().TypeName; 52 if (status == "新建") { 53 if (type == "裝配") { 54 $("#NF-material").attr("onclick", "btn_material();"); 55 $("#NF-material").css("color", "#333333 "); 56 $("#NF-measure").removeAttr("onclick"); 57 $("#NF-measure").css("color", "#CFCFCF "); 58 } else { 59 $("#NF-material").removeAttr("onclick"); 60 $("#NF-material").css("color", "#CFCFCF "); 61 $("#NF-measure").attr("onclick", "btn_measure();"); 62 $("#NF-measure").css("color", "#333333 "); 63 } 64 } else { 65 $("#NF-material").removeAttr("onclick"); 66 $("#NF-material").css("color", "#CFCFCF "); 67 $("#NF-measure").removeAttr("onclick"); 68 $("#NF-measure").css("color", "#CFCFCF "); 69 } 70 }, 30); 71 } 72 }); 73 74 }
第四個js代碼：下面if...else...中的內容實際需不一樣的，自己寫需要做的處理即可
1 function bindSubGrid3(subgrid_id, collectLineId) { 2 //alert(subgrid_id + " : " + collectLineId); 3 listId = subgrid_id.substring(0, 16); 4 //alert(listId); 5 var listRootId = subgrid_id.substring(9, 10); 6 var StepCode = $("#" + listId).jqGrid('getRowData', collectLineId).Code; 7 var PPRCode = $("#" + listId).jqGrid('getRowData', collectLineId).PPRCode; 8 var PSCode = $("#" + listId).jqGrid('getRowData', collectLineId).PSCode; 9 var TypeName = $("#" + listId).jqGrid('getRowData', collectLineId).TypeName; 10 var status = $("#gridList").jqGrid('getRowData', listRootId).StatusName; 11 //alert(StepCode + " " + PPRCode + " " + PSCode + " " + TypeName + " " + status); 12 subgrid_table_id = subgrid_id + "_t"; 13 $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); 14 if (TypeName == "裝配") { 15 $("#" + subgrid_table_id).jqGrid( 16 { 17 url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode, 18 datatype: "json", 19 height: "auto", 20 colModel: [ 21 { label: '主鍵', name: 'Id', hidden: true }, 22 { label: '工藝編碼', name: 'PPRCode', hidden: true }, 23 { label: '工序編碼', name: 'PSCode', hidden: true }, 24 { label: '工步編碼', name: 'STEPCode', hidden: true }, 25 { label: '物料編碼', name: 'MMCode', width: 80, align: 'left' }, 26 { label: '物料名稱', name: 'MMName', width: 80, align: 'center' }, 27 { label: '數量', name: 'Quantity', width: 60, align: 'center' }, 28 { label: '型號', name: 'ModelNumber', width: 80, align: 'center' }, 29 { label: '類型', name: 'TypeNameCN', width: 60, align: 'center' }, 30 { label: '單位', name: 'Uom', width: 60, align: 'center' }, 31 { label: '備注', name: 'Describe', width: 80, align: 'left' } 32 ], 33 rowNum: 200, 34 mtype: "post", 35 viewrecord: true, 36 onCellSelect: function (rowid, index, contents, event) { 37 PPRRowId = subgrid_id.substring(9, 10);//gridList為工藝所在Id，gridList_2后面的2為第幾個工藝，也就是行號 38 $("#gridList").jqGrid('setSelection', PPRRowId);//工藝選中 39 PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t為工序所在Id,gridList_2_t_1后面的1為第幾個工序，也就是行號 40 PSRowId = subgrid_id.substring(13, 14);//1 41 $("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序選中 42 StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t為工步所在Id,gridList_2_t_1_t_2后面的2為第幾個工步，也就是行號 43 StepRowId = subgrid_id.substring(17, 18);//2 44 $("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步選中 45 //MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//該工藝的物料編碼 46 //$(".operate").animate({ "left": '-100.1%' }, 200); 47 //$(".operate").animate({ "left": 0 }, 200); 48 $("#NF-edit").hide(); 49 $("#NF-delete").hide(); 50 $("#NF-start").hide(); 51 $("#NF-stop").hide(); 52 $("#NF-process").hide(); 53 $("#NF-copy").hide(); 54 $("#NF-step").hide(); 55 $("#NF-material").hide(); 56 $("#NF-measure").hide(); 57 } 58 }); 59 } else if (TypeName == "控制測量") { 60 $("#" + subgrid_table_id).jqGrid( 61 { 62 url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode, 63 datatype: "json", 64 height: "auto", 65 colModel: [ 66 { label: '主鍵', name: 'Id', hidden: true }, 67 { label: '工藝編碼', name: 'PPRCode', hidden: true }, 68 { label: '工序編碼', name: 'PSCode', hidden: true }, 69 { label: '工步編碼', name: 'STEPCode', hidden: true }, 70 { label: '物料編碼', name: 'MMCode', width: 80, align: 'left' }, 71 { label: '物料名稱', name: 'MMName', width: 80, align: 'center' }, 72 { label: '數量', name: 'Quantity', width: 60, align: 'center' }, 73 { label: '型號', name: 'ModelNumber', width: 80, align: 'center' }, 74 { label: '類型', name: 'TypeNameCN', width: 60, align: 'center' }, 75 { label: '單位', name: 'Uom', width: 60, align: 'center' }, 76 { label: '備注', name: 'Describe', width: 80, align: 'left' } 77 ], 78 rowNum: 200, 79 mtype: "post", 80 viewrecord: true, 81 onCellSelect: function (rowid, index, contents, event) { 82 PPRRowId = subgrid_id.substring(9, 10);//gridList為工藝所在Id，gridList_2后面的2為第幾個工藝，也就是行號 83 $("#gridList").jqGrid('setSelection', PPRRowId);//工藝選中 84 PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t為工序所在Id,gridList_2_t_1后面的1為第幾個工序，也就是行號 85 PSRowId = subgrid_id.substring(13, 14);//1 86 $("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序選中 87 StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t為工步所在Id,gridList_2_t_1_t_2后面的2為第幾個工步，也就是行號 88 StepRowId = subgrid_id.substring(17, 18);//2 89 $("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步選中 90 //MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//該工藝的物料編碼 91 //$(".operate").animate({ "left": '-100.1%' }, 200); 92 //$(".operate").animate({ "left": 0 }, 200); 93 $("#NF-edit").hide(); 94 $("#NF-delete").hide(); 95 $("#NF-start").hide(); 96 $("#NF-stop").hide(); 97 $("#NF-process").hide(); 98 $("#NF-copy").hide(); 99 $("#NF-step").hide(); 100 $("#NF-material").hide(); 101 $("#NF-measure").hide(); 102 } 103 }); 104 } else { 105 $("#" + subgrid_table_id).jqGrid( 106 { 107 url: "/PPR/BasicInformation/GetMaterialModels?pPRCode=" + PPRCode + "&pSCode=" + PSCode + "&stepCode=" + StepCode, 108 datatype: "json", 109 height: "auto", 110 colModel: [ 111 { label: '主鍵', name: 'Id', hidden: true }, 112 { label: '工藝編碼', name: 'PPRCode', hidden: true }, 113 { label: '工序編碼', name: 'PSCode', hidden: true }, 114 { label: '工步編碼', name: 'STEPCode', hidden: true }, 115 { label: '物料編碼', name: 'MMCode', width: 80, align: 'left' }, 116 { label: '物料名稱', name: 'MMName', width: 80, align: 'center' }, 117 { label: '數量', name: 'Quantity', width: 60, align: 'center' }, 118 { label: '型號', name: 'ModelNumber', width: 80, align: 'center' }, 119 { label: '類型', name: 'TypeNameCN', width: 60, align: 'center' }, 120 { label: '單位', name: 'Uom', width: 60, align: 'center' }, 121 { label: '備注', name: 'Describe', width: 80, align: 'left' } 122 ], 123 rowNum: 200, 124 mtype: "post", 125 viewrecord: true, 126 onCellSelect: function (rowid, index, contents, event) { 127 PPRRowId = subgrid_id.substring(9, 10);//gridList為工藝所在Id，gridList_2后面的2為第幾個工藝，也就是行號 128 $("#gridList").jqGrid('setSelection', PPRRowId);//工藝選中 129 PSGridListId = subgrid_id.substring(0, 12);//gridList_2_t為工序所在Id,gridList_2_t_1后面的1為第幾個工序，也就是行號 130 PSRowId = subgrid_id.substring(13, 14);//1 131 $("#" + PSGridListId).jqGrid('setSelection', PSRowId);//工序選中 132 StepGridListId = subgrid_id.substring(0, 16);//gridList_2_t_1_t為工步所在Id,gridList_2_t_1_t_2后面的2為第幾個工步，也就是行號 133 StepRowId = subgrid_id.substring(17, 18);//2 134 $("#" + StepGridListId).jqGrid('setSelection', StepRowId);//工步選中 135 //MMCode = $("#gridList").jqGrid('getRowData', PPRRowId).MMCode;//該工藝的物料編碼 136 //$(".operate").animate({ "left": '-100.1%' }, 200); 137 //$(".operate").animate({ "left": 0 }, 200); 138 $("#NF-edit").hide(); 139 $("#NF-delete").hide(); 140 $("#NF-start").hide(); 141 $("#NF-stop").hide(); 142 $("#NF-process").hide(); 143 $("#NF-copy").hide(); 144 $("#NF-step").hide(); 145 $("#NF-material").hide(); 146 $("#NF-measure").hide(); 147 } 148 }); 149 } 150 }
用多級表格遇到的問題：
因為項目中不是簡單的多級顯示內容，還有當選中某一級中某一行數據后，還要做些其他的操作，比如選中某一工藝需要對其做配置工序的操作，選中某一工序需要對其做配置工步的操作；工步是分類型的，有裝配類型，控制測量類型，非控制測量類型三種類型，選中某一工步需要對其配置投料或者配置測量參數；最后一層也就是最深的一層只有展開顯示的功能，選中某一工步按類型展示不同內容。
下圖是我項目的一個展示頁面：
