[jQuery] jqGrid onSelectRow 사용법, 예제 (onSelectRow example)

jqGrid row를 클릭했을 때 발생하는 이벤트입니다. onSelectRow : function(index, status) { }

해당 이벤트의 index는 row의 id (첫 번째 row는 1)이며,  status는 선택이 되었을 때 true, 반대는 false를 반환합니다.

jqGrid의 함수 getRowData로 해당 index의 row의 값들을 가져와서 뿌려주고 있습니다.

아래 소스코드를 보시면 쉽게 이해 가능하시니 응용해서 사용하시면 됩니다.

 

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<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", user_name:"test0", user_id:"id1",product:"상품1",amt:"100",idx:"1"},
		{date:"2022-09-02", user_name:"test2", user_id:"id2",product:"상품1",amt:"100",idx:"2"},
		{date:"2022-09-03", user_name:"test3", user_id:"id3",product:"상품1",amt:"100",idx:"3"},
		{date:"2022-09-04", user_name:"test3", user_id:"id4",product:"상품1",amt:"100",idx:"4"},
		{date:"2022-09-05", user_name:"test2", user_id:"id2",product:"상품1",amt:"100",idx:"5"},
		{date:"2022-09-06", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",idx:"6"},
		{date:"2022-09-07", user_name:"test4", user_id:"id5",product:"상품2",amt:"100",idx:"7"},
		{date:"2022-09-08", user_name:"test2", user_id:"id2",product:"상품2",amt:"100",idx:"8"},
		{date:"2022-09-09", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",idx:"9"},
		{date:"2022-09-10", user_name:"test6", user_id:"id6",product:"상품2",amt:"100",idx:"10"},
		{date:"2022-09-11", user_name:"test2", user_id:"id2",product:"상품2",amt:"100",idx:"11"},
		{date:"2022-09-12", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",idx:"12"},
		{date:"2022-09-13", user_name:"test7", user_id:"id7",product:"상품2",amt:"100",idx:"13"},
		{date:"2022-09-14", user_name:"test2", user_id:"id2",product:"상품2",amt:"100",idx:"14"},
		{date:"2022-09-15", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",idx:"15"},
		{date:"2022-09-16", user_name:"test8", user_id:"id7",product:"상품2",amt:"100",idx:"16"},
		{date:"2022-09-17", user_name:"test2", user_id:"id2",product:"상품2",amt:"100",idx:"17"},
		{date:"2022-09-18", user_name:"test3", user_id:"id3",product:"상품2",amt:"100",idx:"18"},
		{date:"2022-09-19", user_name:"test4", user_id:"id4",product:"상품2",amt:"100",idx:"19"}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames:['날짜', '이름', '아이디','상품','가격','idx'],
		colModel:[
			{name:'date', index:'date', width:90, align: "center"},
			{name:'user_name', index:'user_name', width:100 , align: "center" },
			{name:'user_id', index:'user_id', width:150, align: "center"},
			{name:'product', index:'product', width:80, align: "center"},
			{name:'amt', index:'amt', width:80, align: "center"},
			{name:'idx', index: 'idx', hidden: true}
		],
		autowidth: true,
		multiselect: true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'date',
		sortorder: 'desc',
		height: 250,
		onSelectRow : function(index, status) {
        	if (index) {

				var row = $("#list").jqGrid('getRowData',index);
				
				$("#date").val(row.date);
				$("#user_name").val(row.user_name);
				$("#user_id").val(row.user_id);
				$("#product").val(row.product);
				$("#amt").val(row.amt);
			}
		}
	});

	$("#list").jqGrid('setGroupHeaders', {
		useColSpanStyle: true, 
		groupHeaders:[
			{startColumnName: 'user_name', numberOfColumns:2, titleText: "<div class='ui-jqgrid-sortable'><center>고객정보</center></div>"},
			{startColumnName: 'product', numberOfColumns:2, titleText: "<div class='ui-jqgrid-sortable'><center>상품정보</center></div>"}
	  	]
	});

	$(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);
	});

	$("#list").on("click", function() {
		$('#list tr').removeClass("ui-state-highlight");
    });
});

</script>
<div class="row" style="margin-top:50px;">
	<div class="col-md-6">
		<table id="list"></table>
		<div id="pager"></div>
	</div>
	<div class="col-md-6">
		<form class="form-horizontal" id="frm_user_info" name="frm_user_info" method="POST"  onsubmit="return false;">
		<div class="form-group">
			<label class="col-md-1 control-label">날짜</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="date" id="date" readonly="readonly"/>
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">이름</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="user_name" id="user_name" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">아이디</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="user_id" id="user_id" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">상품</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="product" id="product" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-1 control-label">가격</label>
			<div class="col-md-9">
				<input type="text" class="form-control input-sm" name="amt" id="amt" />
			</div>
		</div>
		</form>
	</div>
</div>

 

소스화면

 

[jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders

 

[jQuery] jqGrid 사용법, 설정 (jqgrid cdn example)

 

 

[jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter)