Изменение цвета ячейки в JQGrid при нажатии на ячейку - PullRequest
2 голосов
/ 04 января 2012

Пожалуйста, помогите мне решить проблему ниже в JQGrid.Я новичок в JqGrid, поэтому, пожалуйста, держитесь со мной.

У меня есть требование изменить цвет ячейки после нажатия на нее.Если я нажму на ячейку, она должна иметь зеленый цвет, а если я нажму на ту же ячейку, она должна стать красной.Теперь проблема в том, что я пытаюсь найти, как это сделать.Я пытался использовать событие onSelectCell, но всякий раз, когда я пытаюсь выбрать любую ячейку, она не дает мне никаких изменений в JQGrid.Я применил onSelectCell к colModel, а также к уровню jqGrid.

Я создал статическую сетку данных, как показано ниже,

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

Пожалуйста, ответьте мне как можно скорее.

Спасибо и С уважениемШайлендра Сони

Ответы [ 2 ]

2 голосов
/ 04 января 2012

То, что вы пытаетесь сделать там, не сработает. В соответствии с документацией опций jQgrid colModel вы заметите, что в colModel нет опции, называемой onSelectCell. Однако есть событие onCellSelect в jqGrid events . Он возвращает идентификатор ячейки и индекс столбца, поэтому теперь можно получить td, по которому щелкнули. После этого все, что осталось - это манипулировать css для достижения того, что требуется.

Вот пример fiddle функциональности. Код там может быть значительно улучшен, но, надеюсь, он даст и представление о том, как этого можно достичь. Тип кода, описанный здесь, потерпит неудачу, если вы настроите jqGrid, например, предоставив свои собственные идентификаторы для таблицы вместо значений по умолчанию jqGrid, так что следите за созданием jqGrid. Дайте мне знать, если вам понадобится дополнительная помощь.

1 голос
/ 11 января 2012

см. Метод SetCell, он позволяет изменять фон ячейки.

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

например.

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

для поведения щелчка, я думаю, вы могли бы перехватить клики пользователя по событию onCellSelect или ondblClickRow.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...