0

jqGridの画像のように行セレクターを実現する方法はありますか? 行をクリックすると、左端の列にポインタのようなアイコンが表示されます。

ありがとう！

ここに画像の説明を入力

これは私が追加したコードです

onSelectRow: function(rowId) {
         if (rowId && rowId != lastsel) {
             $(this).jqGrid('restoreRow', lastsel);
             $(this).jqGrid('editRow', rowId, true);

             var ic = "";

             if (lastsel) {
                 $(this).setCell(lastsel, 0, ic, '');
             }

             ic = '<img src="images/ig_tblTri_Black.gif" />';
             $(this).setCell(rowId, 0, ic, '');

             lastsel = rowId;
         }
     }

コードは実行されていますが、画像は表示されません。

4

1 に答える 1

1

に定義されたonSelectRow またはonCellSelectイベントを使用しjqGridて、列データの画像を追加または削除する関数を作成できます。

onSelectRow: function(rowId){ 
//code to add image and remove from all other rows
 var ids = $("#grid").jqGrid('getDataIDs');
var ic = "";
for(var i=0;i < ids.length;i++){
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
}
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
   },



onCellSelect: function(id, iCol, cellContent, e){ 
//code to add image and remove from all other rows 
 var ids = $("#grid").jqGrid('getDataIDs');
var ic = "";
for(var i=0;i < ids.length;i++){
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
}
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',id,{colName:ic});
}

更新しました ：

@Olegが示唆するように、オーバーヘッドをあまりかけずに使用できる他のイベントは次のとおりです:
beforeSelectRow : 

beforeSelectRow: function(id, e){ 
//code to add image and remove from all other rows 
 var gsr = jQuery("#grid").jqGrid('getGridParam','selrow');
var ic = "";
jQuery("#grid").jqGrid('setRowData',gsr,{colName:ic});
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',id,{colName:ic});
}
于 2013-04-03T11:28:02.687 に答える