SubGridRowExpandedとsubGridRowColapsedを使用してサブグリッドを構築すると、展開された行に基づいて完全に異なるサブグリッドを生成できることがわかりました。
以下に、 JQGridのGridAsSubGridの例の変更を含めました。 ここでは、展開されている行のIDを確認し、特殊なケース(id = 12345)の場合は特殊なグリッドを表示します。生徒のタイプに基づいてフィルタリングし、それに応じてグリッドを表示することができます。
addRowDataを使用して情報を追加していますが、他のデータバインディングメソッドはテストしていません。
<script type="text/javascript">
var lastsel2;
$(document).ready(function(){
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
jQuery('#rowed5').jqGrid('editRow',id,true);
lastsel2=id;
}
},
editurl: "server.php",
caption: "Input Types",
multiselect: false,
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id){
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'>");
if(row_id != "12345") {
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['No','Item','Qty','Unit','Line Total'],
colModel: [
{name:"num",index:"num",width:80},
{name:"item",index:"item",width:130},
{name:"qty",index:"qty",width:70,align:"right"},
{name:"unit",index:"unit",width:70,align:"right"},
{name:"total",index:"total",width:70,align:"right",sortable:false}
],
rowNum:20,
sortname: 'num',
sortorder: "asc",
height: '100%'
});
var tdata = [
{ num:"123", item:"single item", qty:"1", unit:"£1.00", total:"£1.00"},
{ num:"234", item:"multi item", qty:"2", unit:"£1.00", total:"£2.00"},
];
for(var i=0;i < tdata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
} else {
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['No','Error Message'],
colModel: [
{name:"num",index:"num",width:80},
{name:"error",index:"item",width:250},
],
rowNum:20,
sortname: 'num',
sortorder: "asc",
height: '100%'
});
var tdata = [
{ num:"1", error:"not validated"},
{ num:"2", error:"only available on thursdays"},
];
for(var i=0;i < tdata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
}
},
subGridRowColapsed: function(subgrid_id, row_id){
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
jQuery("#"+subgrid_table_id).remove();
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++)
jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
});
</script>
<table id="rowed5"></table>