jqGrid中的行选择器列

时间:2013-04-03 11:07:02

标签: css jqgrid

有没有办法像jqGrid中的图像一样实现行选择器。当我点击该行时,在最左边的列上有一个像图标一样的指针。

谢谢!

enter image description here

这是我添加的代码

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;
         }
     }

正在执行代码,但图像未显示。

1 个答案:

答案 0 :(得分:1)

您可以使用为jqGrid定义的onSelectRowonCellSelect事件来编写一个在列数据中添加或删除图像的函数

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});
}