상세 컨텐츠

본문 제목

[jqGrid] 자주 쓰는 api 와 그리드 옵션 설명

관리X 과거글

by 까먹기전에 2015. 12. 29. 17:04

본문

반응형

$("#firstTable").jqGrid({ // table id 

        url : "${pageContext.request.contextPath}/grid/list.do", // 데이터를 받아올 url

        datatype :"json", // json type으로 받아옴

        height : 600, // 그리드의 높이

        jsonReader:{

            page :'page', // 페이징을 위한

            total:'total', 

            root:'list' // map에 "list",list 넣으면 그 키값 써줘야 데이터 뿌려짐


       },

        colNames : ['제목','내용','작성자','조회수','올린날짜','시퀀스','상태'],

        colModel : [

             {name:'title',width:45,editable:true,align:"center"},

             {name:'contents',width:100,editable:true,align:"center"},

             {name:'creaId',width:30,editable:true,align:"center"},

             {name:'hitCnt',width:20,editable:false,align:"center"},

             {name:'creaDtm',width:45,editable:false,align:"center"},

             {name:'idx',editable:false,align:"center",hidden:true},

             {name:'status',width:30,editable:false,align:"center"}

        ],

        viewrecords:true,

        caption:'게시글리스트', // 그리드 왼쪽 위에 캡션

        rownumbers:false,//왼쪽에 index 가 생김 1부터 시작

        rownumWidth:40,//말그대로 로우넘의 가로길이

        rowNum:10,// 그리드에 보여줄 데이터의 갯수,-1하면 무한으로 보여준단다..

        width:1600,//그리드의 총 가로길이

rownumbers: true, /* 행 순번 */

        rowList:[10,20,30],//몇개식 보여줄건지 선택가능하다, 배열형식이라 5,10,15,20,,,가능

        multiboxonly : true,

  loadonce:true,//페이지를 넘길 수 있음

mtype : "POST"//데이터 요청방식 post

        multiselect : true,//체크박스 사라짐

        cellEdit : true,//셀의 값변경을 정함 트루하면 바껴짐

        pager : '#pager',// 밑에 페이저 달 div 아이디

        gridview : true,

        editurl :'clientArray',//값 수정후 엔터치면 지정된 url로 날라감, 지금 이값은 editurl 안써짐

        cellsubmit : 'clientArray',//clientArray 랑 remote가 있는데 지금 설정은 특정이벤트를 해야함 전부 저장, remote로 하면 셀                                          수정시 바로바로 저장함

        afterSaveCell : function(rowid,name,val,iRow,ICol){ // 로우 데이터 변경하고 엔터치거나 다른 셀 클릭했을때 발동

            alert(rowid+val+name);

        },

        onCellSelect: function(rowid,name,val,iRow,iCol){ // 해당로우의 각 셀마다이벤트 걸림


        },

        beforeProcessing:function(data){ // 그리드 뿌리기전에

         boardBean = data.bean; // 제이슨타입을 쓰기 때문에 비어있는 bean형태를 받아옴

        },onSelectRow: function(rowid, status, e) {

         if(status==true){

         $("#firstTable").jqGrid("setCell",rowid,"status","delete"); // 체크했으면 딜리트

         }

         else{

         $("#firstTable").jqGrid("setCell",rowid,"status","normal"); // 체크 풀면 다시 노말 상태로 돌림

         }

        }


    });



$("#firstTable").jqGrid("setCell",rowid,"status","normal"); // 셀에 지정한 컬럼에 지정한 값 집어넣을수있음


  var buffdata = $('#testGrid').jqGrid('getDataIDs'); // 테이블에 있는 모든 데이터를 수집한다.


 $('#testGrid').jqGrid('addRowData',로우넘,localdata[i]); // 테이블에 데이터를 넣는다.


$('#testGrid').jqGrid('getGridParam','selarrrow') // 체크한줄 불러옴 배열로 가져옴


$("#testGrid").jqGrid('editRow', 로우넘,true,'clientArray'); // 동적으로 선택한애의 셀을 수정가능하게 변경

-> 체크한애들이나 , 선택한애(선택 할시 rownum을 글로벌 변수에 저장해놓으면 편함)를 넣어서 수정

근데 나는 status변경시 setCell로 자주 씀; 나는 잘안쓰지만 inline 에딧팅할때 이 api자주 쓰는거 같음

$("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);


$("#testGrid").jqGrid('setRowData', 로우넘, {id:'changed', name:'changed', memo:'changed'}, {color:'red'}) // 선택한 로우의 데이터를 다 바꿀수있다


$("#testGrid").jqGrid('delRowData', rowids[i]); // 로우 삭제


$("#jourTable").getDataIDs(); // 모든 로우 ids 가져옴 [1,2,3,4,5,] 이렇게 옴


var updateList = $("#schoolGrid").getChangedCells('all'); //<--셀에값이 변한 줄 불러옴


         footerrow : true

       });

      $('#debtorTable').jqGrid('footerData', 'set', {accountName:'합계', amount:debTotal});  //footer 데이터


* postData : { // 그리드 리스트 호출시 파라미터 값 전달

         param1 :"테스트",

         param2 :"TEST"

        } */



관련글 더보기