[jQuery] jqGrid subGrid 사용방법, 예제 (subGridRowExpanded / toggleSubGridRow)

jqGrid row를 클릭했을 때 toggleSubGridRow 함수를 사용하여 서브그리드를 토글 하도록 구현해 보았습니다.

subGrid를 사용하려면 subGrid 옵션을 설정하셔야 합니다. (subGrid: true)
추가로 subGridRowExpanded 함수를 통해서 서브그리드를 생성하고 데이터를 로드해야 합니다.  

서브그리드 행에 대해서는 HTML 스타일을 지정할 수 있습니다. 저는 data에 직접 스타일 코드를 작성하였습니다.

 

<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 = [
	   {faq_nm:"여기는 어떤곳인가요?", faq_cont:"<p style=\"font-family: Arial, Helvetica, sans-serif; font-size: 25px;\">후린개발자 입니다.<\/p><p style=\"font-family: Arial, Helvetica, sans-serif; font-size: 20px;\">반갑습니다. 스타일도 적용할수 있습니다.</p>"},
	   {faq_nm:"jqGrid에 대해 많이 알고 싶을때는 어떻게 할까요?",faq_cont:"이곳 블로그를 둘러보세요."},
	   {faq_nm:"인사해요 우리?",faq_cont:"안녕하세요.<br>좋은하루 되세요."}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames: ['제목', '내용'],
		colModel:[
			{name: 'faq_nm', index: 'faq_nm', align: "center"},
			{name: 'faq_cont', index: 'faq_cont', align: "center" , hidden:true },
		],
		autowidth: true,
		rownumbers : true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		height: 250,
		subGrid : true,
		subGridRowExpanded: function(subgrid_id, index) {
			var row = $("#list").jqGrid('getRowData',index);
			jQuery("#"+subgrid_id).html(row.faq_cont);
		},
		onSelectRow : function(index, row) {
			if (index) {
				var row = $("#list").jqGrid('getRowData',index);
				$('#list').jqGrid('toggleSubGridRow', index);

			}
		},
		loadComplete: function(){
		   $(".ui-state-default.jqgrid-rownum").removeClass('ui-state-default jqgrid-rownum');
	    }
	});

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

 

소스코드 화면

간단한 예제이니 확인하시고 응용 바랍니다.