태그

#JQGRID

jqGrid 특정 행css값 바꾸기

2021년 11월 3일 02:51

25-thumbnail-image

많은 구글링 끝에 알아낸 행 부분 스타일 바꾸기!

편의상 스크립트 부분만 올립니당...ㅎㅎ

<script>
    // 게시글의 번호가 짝수일 때 배경색 변경
    $(function() {
        $('#jqGrid').jqGrid({
            url : "/board/selectBoardList.do",
            mtype : "POST",
            datatype : "json",
            colNames : ['seq', '번호', '제목', '작성자', '작성일'],
            conModeal : [
                {name : 'boardSeq', index : 'BOARD_SEQ', align : 'center', hidden : true},
                {name : 'num', index : 'NUM', align : 'center', width : '25%'},
                {name : 'title', index : 'TITLE', align : 'center', width : '25%'},
                {name : 'reg_id', index : 'REG_ID', align : 'center', width : '25%'},
                {name : 'reg_dt', index : 'REG_DT', align : 'center', width : '25%'},
            ],
            pager : $('#jqGridPager'),
            rowNum : 10,
            rowList : [10, 20, 30],
            autowidth : true,
            loadComplete : function(data) { // 데이터 조회 완료 후
				var ids = $("#jqGrid").getDataIDs(); // 전체 row id 가져오기
				
				$.each(ids, function(idx, rowId) { // 전체 row 돌기
					rowData = $("#jqGrid").getRowData(rowId); // 한 row data 받기
					
					if (rowData.NUM % 2 == 0) { // 번호가 짝수이면
                        // setRowData(rowId, 데이터(데이터가 객체이면 없어도 됨), css) 업데이트함 -> 입력요소를 덮어쓰기 때문에 조심해야됨
						$("#jqGrid").setRowData(rowId, false, {background: "#c6d9f0" }); // 배경색 바꾸기
					}
				});
				
			}
        });
    });
</script>

경우에 따라서 조건을 바꾸면 됩니당~~