🧩jqGrid 간단한 사용법

🧩jqGrid 간단한 사용법🧩

 

fn_grdm_columns() {
        if (typeof this._cls_info.grdMasterCols === null || this._cls_info.grdMasterCols === null || this._cls_info.grdMasterCols.length < 1) {
            var owner = this;
            this._cls_info.grdMasterCols = [
                { name: "branch_id", hidden: true },
                { name: "senior_id", hidden: true },

                {name :'checkBox',  index :'checkBox',   align:'center', cellattr: function () { return " class='order'" }
                    , label:'<input type="checkbox" onclick="jsFuncs.fn_checkbox_name_checkall(\\'grdMaster_checkBox\\', this.checked)">'
                    , editable: true, edittype:"checkbox",editoptions: {value:"Y:N"},formatter:owner.fn_grdm_chk_formatter
                    , formatoptions:{disabled:false}, sortable:false, width:30},
                
                { name: "senior_nm", label: "aaa", width: 100,classes : 'padl16' },
                { name: "plan_cnt", label: "bbb"   , width: 60, align:"center"},
                { name: "result_days", label: "ccc"   , width: 60, align:"center"},
                { name: "file_view", label: "ddd"  , width: 60, align:'center', formatter:owner.fn_grdm_chk_formatter, cellattr: function () { return "style='color:#1a71f4;'" }},
                { name: "", label: ""   , width: 200},
            ];
        }

    }

$("#grdMster").jqGrid({
		colModel: [
				{ nmae: "name", index: "name", widht: 600, align: "left", classes: "gird-col"},
				{ name: "name", index: "price", width: 100, aligh: "right", classes: "grid-col"}
		],
		...
});

formatter

안에 무슨 형식을 넣을 건지 → checkbox, radio …etc

class 부여할때

• classes: ”grid-col”
• cellattr: function() { retrun “ class=’order’ ”}

Style 부여할때

• cellattr: function() {return “style = ‘color: #1a71f4’ “}};

 

Cell padding 먹일때 (tr- th, td)

1. classes: “grid-col” 부여해서 .grid-col { padding-right: 5px !important; padding-left: 5px !important; }
2. #grid -id th {…} → body .ui-jqgrid .ui-jqgir-htable th {…}
3. table td .cell { padding-left: 8px; padding-right: 8px; }
4. tr .jqgrow td { padding: 0px 2px 0px !important; }

 

Option

• url: ajax처럼 데이터를 주고받을 서버 url 주소
• datatype: 말 그대로 데이터 타입. ajax처럼 사욯하면됨(local 타입도 존재)
• postData: 넘겨줄 데이터
• mtype: POST or GET
• colNames: 그리드 헤더의 제목 배열이며 ( colModel과 개수가 꼭 맞아야 한다.)
• colModel: 그리드 행에 보여줄 데이터로 꼭 데이터 칼럼과 매칭을 시켜줘야 한다. (colNames의 개수와 맞아야 한다.)
• rowNum: 보여줄 행의 개수
• pager: 페이징을 하기 위해 선언해두며 거의 필수라고 보면 된다.
• height, width: 높이, 넓이
• caption: 타이틀, 제목

 

colModel Option

🔥 data와 직접 관련있는것이다. → 데이터를 매핑해준다. 매핑이 이뤄지는 방식은 colModel 옵션 중 하나인 “name”을 이용하여 이뤄진다. 이때 “name”의 value 값을 데이터의 변수명과 일치시켜주면 자동으로 매핑이 된다.

// jqGrid 예제
// jqGrid option, jqGrid colModel option 포함
<table id="grid"></table>
<div id="pager"></div>
<script type="text/javascript">
var $Grid = {};
$(document).ready(function(){
     $Grid = $("#testGrid");
     $Grid.jqGrid({
          url : '../resources/server.json',
          datatype : "json",
          mtype : "get",
          jsonReader : {
               id : "id" // 대표 아이디를 설정
               ,root : "employee" // 데이터의 시작을 설정
          },
          colNames : [
                          '아이디',
                          '이름',
                          '나이',
                          '성별',
                          '직위'
                     ],
          colModel : [
                    { name : 'id',        width:40,  align:'center'},
                    { name : 'name',      width:80,  align:'left'  },
                    { name : 'age',       width:80,  align:'left'  },
                    { name : 'sex',       width:80,  align:'right' }, 
                    { name : 'position',  width:50,  align:'right' }
            ],
          pager : '#pager',
          rowNum : '10',
          multiselect : true,
          postData : {
               id : 'id',
               name : 'name'
          }
    });
});

 

• name: 출력할 데이터의 이름이다. 서버에서 받은 데이터의 변수명을 명시해준다.
• index: 칼럼 정렬 시 서버에 넘어가는 값이다. index값을 설정하지 않으면 name 값이 넘어간다.
• widht: 칼럼의 넓이를 설정한다.
• align: 칼럼 내 데이터의 정렬을 설정한다.
• hidden: 데이터 값은 설정하고 화면에서 보이고 싶지 않을 때 사용한다.
• formatter: 데이터로 들어온 값을 특정 형식을 변환해서 보여줄 수 있다.

 

rowId 가져오기

🔥 선택한 row의 데이터를 가져오기 위해선 해당 열의 id가 필요하다. getGridParam을 사용하여 selrow를 가져오는 방식이다.

var addVendor = function() {
    var rowid  = $("#testGrid").jqGrid("getGridParam","selrow"); // 선택한 열의 아이디값
    var rowid = $("#testGrid").getGridParam("selrow");
}

 

🔥 “selarrow”를 사용하면 다중으로 선택한 모든 열의 rowId를 “배열”로 가져온다. 하나만 선택해도 배열로 가져온다.

var rowid = $("#testGrid").jqGrid("getGridParam","selarrrow");
var rowid = $("#testGrid").getGridParam("selarrrow");

 

rowData 가져오기

🔥 rowId를 가지고 선택한 row의 데이터를 가져올 것이다. rowId를 사용하지 않으면 현재 화면에 표출되고 있는 모든 열의 데이터를 가져온다.

//모든 열의 데이터 가져오기
var allRowData = $("#testGrid").jqGrid("getRowData");
var allRowData = $("#testGrid").getRowData();
 
//선택한 열의 데이터 가져오기
var selRowData = $("#testGrid").jqGrid("getRowData",rowId);
var selRowData = $("#testGrid").getRowData(rowId);
 
//선택한 열의 특정 데이터 가져오기
var selRowTitle = $("#testGrid").jqGrid("getRowData",rowId).bbsTitle;
var selRowHit = $("#testGrid").getRowData(rowId);.bbsHit;

 

참고

jQGrid CRUD + Search

 

JQGRID SEARCH 검색 쉽게

 

jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회