「サブグリッドとしてのグリッド」機能を動作させようとしてきましたが、うまくいきませんでした。スタンドアロンのテストでは問題なく動作していたので、自分のコードで何か間違ったことをしていると思いました。しかし、最終的に、アプリとテスト ページの唯一の違いは、アプリが IE7 で実行され、テスト ページが Firefox で実行されていることに気付きました。案の定、IE7 でテスト ページを読み込んだときに、同じ問題が発生しました。
IE7 で問題を再現するコードは次のとおりです。
$(function () {
function loadTasks(subgrid_id, row_id)
{
var id = subgrid_id + '_t';
$('#' + subgrid_id).html('<table id="' + id + '"></table>');
jQuery("#" + id).jqGrid({
datatype: 'local',
colNames: ['No','Item','Qty','Unit'],
colModel: [
{name:'num',index:'num',width:80,key:true},
{name:'item',index:'item',width:130},
{name:'qty',index:'qty',width:70,align:'right'},
{name:'unit',index:'unit',width:70,align:'right'}
],
height: '100%'
});
}
var x = $("#grid").jqGrid({
jsonReader: { root: "rows", repeatitems: false },
datatype: "json",
height: 'auto',
autowidth: true,
forceFit: true,
colNames:['ID','Name'],
colModel:[
{name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"},
{name:'name', index:'foobar', width:90, jsonmap: "name"}
],
subGrid: true,
subGridRowExpanded: loadTasks,
caption: "Results"
});
var jsonData = [
{id: 1, name: 'Apple'},
{id: 2, name: 'Banana'},
{id: 3, name: 'Pear'},
{id: 4, name: 'Orange'}
];
x[0].addJSONData( { rows: jsonData } );
});
各行にいくつかの偽の要素が作成されているようで、行内で正しくレンダリングされません。これが IE7 でどのようにレンダリングされるかのスクリーン キャプチャを次に示します。
奇妙なのは、これらの「未定義」行が実際には有効なグリッド行の一部であることです。マウスを「Apple」の上に置くと、最初の未定義行も強調表示されます。
私が他のグリッドよりも jqGrid を選んだ主な理由は、複数のグリッドをネストするためのサポート (私たちのアプリに本当に必要なもの) でしたが、私たちの企業標準は依然として IE7 であるため、このブラウザーをサポートする必要があります。この機能を IE7 で正しく動作させるためにできることはありますか?