[자바스크립트,제이쿼리] JQGRID 그리기

이번 플젝에 젤 짜증나는 것..........바로 jqgrid.

jqgrid관련해서 맨날 찾아보는거도 힘들고 해서 블로그에 정리를 할까함

이번에 화면에 그린 jqgrid를 중심으로 정리해야겠음.

ajax태운뒤 모델에 담아서 jsp로 리턴

리턴후 jqgrid 그리는 펑션을 호출한다.

>> jqgrid_call(rData.list);

//jq그리드 그리기 

function jqgrid_call(mydata){

$("#formList").jqGrid({

datatype : 'local',

data : mydata,

colNames : ['카메라', '사용여부', '멤버', '멤버이미지', '앨범ID','앨범명',''],

colModel : [

{ name : 'rnum', index : 'rnum', width : '10%', align : 'center' hidden : true},

{ name : 'viewing_flag', index : 'viewing_flag', width : '10%', align : 'center' hidden : true},

{ name : 'actor_name', index : 'actor_name', width : '20%', align : 'center', sortable : true},

{ name : 'actor_img_file_name', index : 'actor_img_file_name', width : '10%', align : 'center', sortable : true},

{ name : 'album_id', index : 'album_id', width : '20%', align : 'center', sortable : true},

{ name : 'album_name', index : 'album_name', width : '25%', align : 'center', sortable : true},

{ name : 'actor_img_url', index : 'actor_img_url', width : '7%', align : 'center', sortable : false}

],

rowNum : 10, //페이지에 보여줄 row갯수

height: '400px', // grid의 총 높이

viewrecords : true, //화면 하단 몇개중 몇번쨰꺼 보여줄건지에 대해 보여줄건가 말건가

loadonce : false, // reload할껀지 말껀지 false가 할거 true는 데이터 한번만 불러옴

loadui : "enable", //모르겠음

        sortable: true, // index값 기준으로 좌우로 표 이동가능     

        gridview : true,

     rownumbers : true // 줄앞에 번호 자동으로 부여 

        beforeSelectRow: function (rowid, e) {

            var $myGrid = $(this);

            var i = $.jgrid.getCellIndex($(e.target).closest('td')[0]);

            var cm = $myGrid.jqGrid('getGridParam', 'colModel');

            

            return (cm[i].name === 'cb');

      },

     //서버 요청 직후 실행

        loadComplete : function(data){

        // 그리드 너비 변경

        $("#formList").jqGrid( 'setGridWidth', $(".col-md-12").width() );

        // 조회된 경과가 없습니다.

            if(data == null || data == '' || data.rows.length == 0)

            {

$("#formList > tbody").append("<tr class='ui-widget-content jqgrow ui-row-ltr'>

<td colspan='7' class='text-center'>조회된 결과가 없습니다.</td></tr>");

            }

            $('.jqgrow').mouseover(function(e) {

                return false;

            });

        },

//row선택시

  onCellSelect: function(rowId , index, contents, action){

        },

        loadError : function(xhr,st,err) {      //server load error message 뿌리기

        $("#formList").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

        }

});

}