[jQuery] jqGrid header colNames 색상 변경하기 (header 테이블 스타일 수정)

아래 소스 코드는 jqGrid 테이블 헤더 셀에 배경색을 지정하여 표시하고 있습니다. 각 열 header의 ID를 지정하여 스타일을 개별적으로도 지정할 수 있습니다.
각각의 열에 대해서 스타일을 지정함으로써 헤더와 데이터를 쉽게 식별할 수 있습니다.

 

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

.ui-jqgrid .ui-jqgrid-htable #list_rn,
.ui-jqgrid .ui-jqgrid-htable #list_cb,
.ui-jqgrid .ui-jqgrid-htable #list_date,
.ui-jqgrid .ui-jqgrid-htable #list_name {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9966), to(#FF9966));
    background-image: -webkit-linear-gradient(top, #FF9966 0, #FF9966 100%);
}
.ui-jqgrid .ui-jqgrid-htable #list_id,
.ui-jqgrid .ui-jqgrid-htable #list_product,
.ui-jqgrid .ui-jqgrid-htable #list_amount,
.ui-jqgrid .ui-jqgrid-htable #list_total {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CC99FF), to(#CC99FF));
    background-image: -webkit-linear-gradient(top, #CC99FF 0, #CC99FF 100%);
}

[aria-describedby="list_rn"] {
    color: red !important;
}
</style>

<script>
$(document).ready(function() {
	var mydata = [
	   {date:"2007-10-01",name:"test",id:"id",product:"상품1",amount:"10.00",total:"210.00"},
	   {date:"2007-10-02",name:"test2",id:"id2",product:"상품1",amount:"20.00",total:"320.00"},
	   {date:"2007-09-01",name:"test3",id:"id3",product:"상품1",amount:"30.00",total:"430.00"}
	];

	$("#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"},
			{name:'total', index:'total', width:80, align: "center"}
		],
		autowidth: true,
		rownumbers : true,
		multiselect:true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'id',
		sortorder: 'asc',
		height: 250,
	});

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

 

 

소스코드 화면