jqGrid (1)

++ jqgrid

jQueryUI  ; jquery를 이용한 UI  프레임워크.

http://jqueryui.com/themeroller/

위 사이트에서 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
    });