2012-01-04 3 views
2

아래의 JQGrid 문제를 해결하려면 저를 도우십시오. 나는 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> 

최대한 빨리 저를 회신 해 주시기 바랍니다.

감사와 안부, 쉐일 렌드 라 SONI 당신이 작동하지 않습니다 일을하려고 무엇

답변

2

. jQgrid colModel options의 설명서에 따르면 colModel에 onSelectCell이라는 옵션이 없음을 알 수 있습니다. 그러나 jqGrid events에는 onCellSelect이라는 이벤트가 있습니다. 셀의 ID와 col의 인덱스를 반환하므로 클릭 한 번에 td을 가져올 수 있습니다. 그 후 모든 왼쪽은 필요한 것을 성취하기 위해 CSS를 조작하는 것입니다.

여기에 기능의 예는 fiddle입니다. 거기에 코드를 많이 개선 할 수 있지만 잘하면 그것은 어떻게 얻을 수있는 아이디어를 줄 것이다. jqGrid를 사용자 정의하면 jqGrid 기본값 대신 테이블에 고유 한 ID를 부여하는 것처럼 여기에 설명 된 코드 종류가 실패하므로 jqGrid가 작성되었는지 확인하십시오. 추가 도움이 필요하면 알려주세요.

+0

도움을 주셔서 감사 드리며 나의 첫 번째 부분을 해결하고 있습니다. – Shailendra

+0

두 번째 부분은 무엇입니까? 문제를 해결하는 데 도움이된다면 대답을 승인 된 것으로 표시 할 수 있습니다. –

1

SetCell 메서드를 보면 셀 배경을 변경할 수 있습니다.

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

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

클릭 동작의 경우 사용자의 클릭을 onCellSelect 또는 ondblClickRow 이벤트에 걸러 낼 수 있다고 생각합니다.

관련 문제