「チーズ」の横にある「+」記号をクリックすると ajax クエリが起動し、サブグリッドの列名が表示されるサブグリッドがありますが、実際のデータはサブグリッドに取り込まれません。どのグリッドを展開しようとしても問題は発生しますが、「チーズ」の例を以下に示します。
スクリーンショットの FireBug 出力の下部に XML 応答が表示されます。その XML を読みましたが、有効なようです。直感で、XML 出力もこのページに貼り付けましたが、問題なくインデントされているようです。それに加えて、ajax 呼び出しでいくつかの非常に基本的な値を返すようにしました。これまでに何を試しても、グリッドは空のままです。
サブグリッドに表示される内容は次のとおりです。
------------------------------------------------------
|Translations | Language | Active |
------------------------------------------------------
| It's cheesy goodness | EN | No |
| fromage | FR | No |
| | DE | N/A | <-- "N/A" means there's no translation of "cheese" in German, currently in the database
... etc., with all supported languages listed.
サブグリッドのコードは次のとおりです。
$("#translationsList").jqGrid({
caption : "Translations",
datatype : "xml",
url : translationsFeed,
editurl : translationsEdit,
mtype : "get",
pager : "#translationsPager",
rowNum : 20,
autowidth : true,
sortname : "phrase",
sortorder : "asc",
viewrecords : true,
multiselect : false,
hidegrid : false,
height : 300,
altRows : true,
rownumbers : true,
toolbar : [false],
colNames : ["phrase_id", "translation_id", "language_cd", "Phrase", "Translation", "Created", "Modified", "Active"],
colModel : [
{ name : "phrase_id", index : "phrase_id", sortable : true, search : false, editable : true, edittype : "text", editrules: { edithidden :true }, hidden : true},
{ name : "translation_id", index : "translation_id", sortable : false, search : false, editable : true, edittype : "text", editrules: { edithidden :true }, hidden : true},
{ name : "language_cd", index : "language_cd", sortable : true, search : true, editable : true, edittype : "text", editrules: { edithidden: true, required : true }, hidden : true },
{ name : "Phrase", width:200, index : "phrase", sortable : true, search : true, editable : true, edittype : "text", editrules: { required : true } },
{ name : "Translation", width:200, index : "translation", sortable : true, search : true, editable : true, edittype : "text", editrules: { required : false } },
{ name : "Created", width:100, index : "modify_dt", sortable : true, search : true },
{ name : "Modified", width:100, index : "create_dt", sortable : true, search : true },
{ name : "Active", width:20, index : "active", sortable : true, search : true, editable : true, edittype : "select", editoptions:{value:"0:No;1:Yes"} }
],
onSelectRow: function(id) {
jQuery('#translationsList').editRow(id, true);
},
subGrid: true,
subGridUrl: 'ajax/translations_subgrid_feed.php',
subgridtype: 'xml',
subGridModel : [{
name : ['Translations', 'Language', 'Active'],
width : [583, 70, 80],
align : ['left','right','right'],
params : ['phrase_id']
}],
subGridOptions: {
plusicon : "ui-icon-plus",
minusicon : "ui-icon-minus",
openicon: "ui-icon-carat-1-sw",
expandOnLoad: true,
selectOnExpand : false,
reloadOnExpand : true
}
});
メイン/サブグリッドの XML 応答は、この Gistにあります。