[jQuery] jqGrid gridComplete 이벤트로 마우스 커서 변경하기

jqGrid gridComplete 이벤트를 사용하여 그리드 내의 각 행에 마우스를 올리면 커서 스타일로 변경하는 로직입니다.

 

gridComplete 이벤트

jqGrid가 그리드 뷰의 모든 셀과 로우를 생성하고 렌더링 한 후에 발생하는 이벤트입니다. 주로 그리드 뷰의 전체 레이아웃에 관련된 작업을 수행하는 데 사용됩니다.

 

---

간단한 소스 코드이니 확인해서 사용하시면 됩니다.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
 <!-- jqGrid CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" type="text/css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" /></script>
<!-- The jqGrid language file code-->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-kr.js" /></script>
<!-- The atual jqGrid code -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.src.js" /></script>
<script>
$(document).ready(function() {
	var mydata = [
		{date:"2022-09-01", name:"test1", id:"id1",product:"상품1", amount:"100"},
		{date:"2022-09-02", name:"test2", id:"id2",product:"상품1", amount:"100"},
		{date:"2022-09-03", name:"test3", id:"id3",product:"상품1", amount:"100"},
		{date:"2022-09-04", name:"test4", id:"id4",product:"상품1", amount:"100"},
		{date:"2022-09-05", name:"test5", id:"id5",product:"상품1", amount:"100"},
		{date:"2022-09-06", name:"test6", id:"id6",product:"상품2", amount:"100"},
		{date:"2022-09-07", name:"test7", id:"id7",product:"상품2", amount:"100"},
		{date:"2022-09-08", name:"test8", id:"id8",product:"상품2", amount:"100"}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames:['날짜', '아이디', '이름','상품','가격'],
		colModel:[
			{name:'date', index:'date', width:90, align: "center"},
			{name:'name', index:'name', width:100 , align: "center" },
			{name:'id', index:'id', width:150, align: "center" ,sortable:false },
			{name:'product', index:'product', width:80, align: "center"},
			{name:'amount', index:'amount', width:80, align: "center"}
		],
		autowidth: true,
		rownumbers : true,
		multiselect:true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'id',
		sortorder: 'asc',
		height: 180,
        gridComplete: function(){ //현재 그리드 마우스커서 변경
            var rowIds = $("#list").getDataIDs();
            var rowData = $("#list").getRowData();
            $.each(rowData, function(idx, rowId){
                $("#list").jqGrid('setRowData', rowIds[idx], false, {cursor:'pointer'});
            });
        }

	});

	$(window).on('resize.jqGrid', function() {
		$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
	})
	$(".jarviswidget-fullscreen-btn").click(function(){
		setTimeout(function() {
			$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
		}, 100);
	});
});
</script>
<table id="list"></table>
<div id="pager"></div>

 

 

 

 

소스코드 화면