[jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기

jqGrid 리스트 안에 체크박스를 넣고 싶으시면 multiselect: true 옵션만 추가하시면 됩니다. (colname, colmodel 무관)
다음은 체크박스가 체크된 값들만 화면에 노출시켜 보겠습니다.
selarrrow 옵션을 이용해서 체크 된 모든 열의 rowId를 가져옵니다. sel_rows의 배열 길이를 체크해서 선택 여부도
확인할 수 있습니다. 체크박스가 하나 이상 선택이 되면 each() 메서드를 활용해서 값들을 가져옵니다.
저는 화면에 보여 드리기 위해 json 형태로 가공했습니다.

 

<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", idx:"1"},
		{date:"2022-09-02", user_name:"test2", user_id:"id2",product:"상품1", idx:"2"},
		{date:"2022-09-03", user_name:"test3", user_id:"id3",product:"상품1", idx:"3"},
		{date:"2022-09-04", user_name:"test3", user_id:"id4",product:"상품1", idx:"4"},
		{date:"2022-09-05", user_name:"test2", user_id:"id2",product:"상품1", idx:"5"},
		{date:"2022-09-06", user_name:"test3", user_id:"id3",product:"상품2", idx:"6"},
		{date:"2022-09-07", user_name:"test4", user_id:"id5",product:"상품2", idx:"7"},
		{date:"2022-09-08", user_name:"test2", user_id:"id2",product:"상품2", idx:"8"},
		{date:"2022-09-09", user_name:"test3", user_id:"id3",product:"상품2", idx:"9"},
		{date:"2022-09-10", user_name:"test6", user_id:"id6",product:"상품2", idx:"10"},
		{date:"2022-09-11", user_name:"test2", user_id:"id2",product:"상품2", idx:"11"},
		{date:"2022-09-12", user_name:"test3", user_id:"id3",product:"상품2", idx:"12"},
		{date:"2022-09-13", user_name:"test7", user_id:"id7",product:"상품2", idx:"13"},
		{date:"2022-09-14", user_name:"test2", user_id:"id2",product:"상품2", idx:"14"},
		{date:"2022-09-15", user_name:"test3", user_id:"id3",product:"상품2", idx:"15"},
		{date:"2022-09-16", user_name:"test8", user_id:"id7",product:"상품2", idx:"16"},
		{date:"2022-09-17", user_name:"test2", user_id:"id2",product:"상품2", idx:"17"},
		{date:"2022-09-18", user_name:"test3", user_id:"id3",product:"상품2", idx:"18"},
		{date:"2022-09-19", user_name:"test4", user_id:"id4",product:"상품2", 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:'idx', index: 'idx', hidden: true}
		],
		autowidth: true,
		multiselect: true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'date',
		sortorder: 'desc',
		height: 250,
	});
	$("#btn_chk").click(function(){
		var param = [];
		var sel_rows = $("#list").jqGrid("getGridParam", "selarrrow");
		if(sel_rows.length > 0){
			$(sel_rows).each(function(idx, val){	
				var json = {
					user_name: $("#list").getCell(val, "user_name")
					, user_id: $("#list").getCell(val, "user_id")
					, idx: $("#list").getCell(val, "idx")
				};
				param.push(json);
				
			});
			var data = JSON.stringify(param);
			$("#click_result").html(data);

		}else{
			$("#click_result").html("리스트를 선택해주세요.");
		}
    });


	$(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>
<button type="button" id="btn_chk">확인</button>
<table id="list"></table>
<div id="pager"></div>
<div style="margin-top:20px; font-size:30px;" id="click_result"></div>

 

 

 

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

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

[jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기

 

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