Question

请帮我解决JQGrid中的以下问题。我是JqGrid的新手，所以请光临我。

点击后我需要更改单元格颜色。如果我点击单元格它应该变成绿色，如果我点击相同的单元格它应该变成红色。现在的问题是我正试图找到如何做到这一点。我试图使用onSelectCell事件，但每当我试图选择任何单元格时，它都不会给我任何JQGrid的变化。我已经在colModel以及jqGrid级别上应用了onSelectCell。

我已经创建了静态数据网格，如下所示

   <html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
            {
jQuery("#list4").jqGrid({ datatype: "local", height: 250, 
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
colModel:[ {name:'id',index:'id', width:60, editable: false, sorttype:"int",
        onSelectCell:function (rowid, celname, value, iRow, iCol) {background: '#888888';}},
 {name:'invdate',index:'invdate', width:90, sorttype:"date"},
 {name:'name',index:'name', width:100}, 
 {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
 {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
 {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
 {name:'note',index:'note', width:150, sortable:false} ],
 multiselect: false,
 caption: "Manipulating Array Data" });
var mydata = [ {id:"1" ,invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
 ]; 
for(var i=0;i<=mydata.length;i++) jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

});

</script>
</head>
<body>
Loading Static Grid...
<table id="list4"></table>
<div id="pager3"></div>
</body>
</html>

请尽快回复我。

谢谢和问候， Shailendra Soni

Answer 1

你在那里尝试做什么是行不通的。根据{{3}}的文档，您会注意到colModel中没有名为onSelectCell的选项。但是jQgrid colModel options中有一个名为onCellSelect的事件。它返回单元格的id和col的索引，因此现在可以获得单击的td。之后，剩下的就是操纵css来实现所需要的。

这是功能的jqGrid events示例。那里的代码可以改进很多，但希望它能给出并知道如何实现这一点。如果你自定义jqGrid，那么这里所描述的代码类型将会失败，就像给你自己的id而不是jqGrid默认值一样，所以要密切关注jqGrid的创建。如果您需要进一步的帮助，请告诉我。

Answer 2

请参阅方法SetCell，它允许您更改单元格背景。

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

e.g。

$('#grid1').jqGrid('setCell',rowid,cellname,'',{background:'red'});

对于点击行为，我认为您可以捕获用户对onCellSelect或ondblClickRow事件的点击。

单击“单元格”，在JQGrid中更改单元格颜色

2 个答案: