++ jqgrid
jQueryUI ; jquery를 이용한 UI 프레임워크.
위 사이트에서 gallery탭에 원하는 테마를 선택하고, 다운로드한다. 페이지 이동되면 맨 밑에 다운로드버튼 있음.
jqGrid ; 플러그인. 대량의 데이터를 테이블로 웹에 표현시 사용. jQuery로 된 플러그인임.
ajax 기반 자바스크립트 컨트롤러, jquery-ui를 이용.
페이징, 정렬 등의 기능 제공.
+ 사용 방법
1. webcontent 폴더 내부에 jqgrid 폴더 생성, jqueryui 폴더 생성
jqgrid, jqueryui 압축 파일을 풀어서 위 생성한 폴더로 복사.
2. 연결
-jsp 페이지에 다음과 같이 코딩.
< script src ="js/jquery-1.11.0.js"></script >
<!-- jqGrid 연동코드 -->
<link rel="stylesheet" type="text/css" media="screen"
href="jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="jqgrid/css/ui.jqgrid.css" />
<!--
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-->
<script src="jqueryui/jquery-ui.js" ></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" ></script>
<!-- -->
헤더부에 위와 같이 필요한 js를 로딩하도록 한다.
<script>
$(function(){
$("#loglist").jqGrid({
//ajax 호출할 페이지
url: 'GetLog',
//로딩중일때 출력시킬 로딩내용
loadtext : '로딩중..',
//응답값
datatype: "json",
mtype : 'POST',
postData:{},
height: 250,
colNames:[ 'ID','등록일' , '등록자' , '장치' , '데이터' ],
colModel:[
{name: 'LOGID'},
{name: 'REGDATE'},
{name: 'MOBILE'},
{name: 'REGDEVTYPE'},
{name: 'DATA', hidden:true }
],
caption: "로그"
});
});
</script>
<div id="divloglist">
<table id= "loglist">
</table>
</div>
위 ajax로 된 GetLog URL은 servlet으로 DB조회 데이터를 json 형태로 위 colModel에 나온 name의 필드명으로 데이터가 조회되도록 한다.
+ 레코드(라인)row 불러오기
-----------------------------------------------------------------------------------
(1) 단일 Row 일 경우 선택하여 값을 불러오기
var obj = $("#ListTable");
var rowId = obj.jqGrid("getGridParam", "selrow");
var value = obj.jqGrid('getCell', rowId, 'ColumnName');
alert(value);
(2) MultiSelect 다중 Row 일 경우 값 출력 해보기
var obj = $("#ListTable");
var idx = obj .jqGrid('getGridParam', 'selarrrow');
for(var i = 0; i < idx.length;i++)
{
var value = obj.jqGrid('getCell', idx[i], ''ColumnName’);
alert(value);
}
-----------------------------------------------------------------------------------
++ 멀티 셀렉트 된 결과 가져오기
-----------------------------------------------------------------------------------
$("#OutputGrid").getGridParam('selarrrow');
를 사용 현재선택되어진 로우의 id값을 가져올수 있다.
리턴값은 Array
var ids = $("#OutputGrid").jqGrid('getDataIDs');
는 전체 로우의 id값을 가져온다
루프를 돌면서 id값을 비교하여 존재한다면 선택된어진 로우이고 없다면 선택 안 된 로우이다.
function setErp() {
var message = "";
var id = $("#OutputGrid").getGridParam('selarrrow');
var ids = $("#OutputGrid").jqGrid('getDataIDs');
var dat = "";
var count = 0;
// 이렇게 하거나
for (var i = 0; i < ids.length; i++) {
var check = false;
$.each(id, function (index, value) {
if (value == ids[i])
check = true;
});
if (check) {
var rowdata = $("#OutputGrid").getRowData(ids[i]);
dat += rowdata.ORDER_CD + ',' + rowdata.ORDER_SEQ + '/';
count++;
}
}
// 또는 이렇게 간단하게.
$.each(id, function(index,value) {
var rowdata = $("#OutputGrid").getRowData(value) ;
dat += rowData.ORDER_CD+','+rowdata.ORDER_SEQ+'/';
count++ ;
}) ;
$("#strOrder").val(dat);
$("form").submit();
}
* jqgrid multi select option 처리 multiselect: true
jQuery("#OutputGrid").jqGrid({
url: ''
datatype: 'json',
mtype: 'POST',
height: 500,
rowNum: 0,
hidegrid: false,
rowList: [10, 20, 30],
altRows: true,
altclass: 'EvenRowClass',
colNames: [1, 2, 3, 4, 5, 6],
colModel: [
{ name: 'CUSTOMER_CD', index: 'CUSTOMER_CD', width: 80, sortable: false, align: 'center' },
{ name: 'NAME', index: 'NAME', width: 70, sortable: false, align: 'center' },
{ name: 'KIND_NM', index: 'KIND_NM', width: 30, sortable: false, align: 'center' },
{ name: 'MODEL_NM', index: 'MODEL_NM', width: 130, sortable: false, align: 'left' },
{ name: 'ORDER_CD', index: 'ORDER_CD', width: 1, sortable: false, align: 'center', hidden : true },
{ name: 'ORDER_SEQ', index: 'ORDER_SEQ', width: 1, sortable: false, align: 'center', hidden: true }
],
viewrecords: true,
multiselect: true
});
