jsGrid 기본 사용법 정리

1. 기본 호출

 

let fields = [
   { name: "Name", type: "text", title:"Name", width: 150 },
   { name: "Age", type: "number", title:"Age", width: 50 },
   { name: "Address", type: "text", title:"Address", width: 200 },
   { name: "Country", type: "select", title:"Country"},
   { name: "Married", type: "checkbox", title: "Is Married", sorting: false }
]

$("#jsGrid").jsGrid({
   locale:"ko",
   height: "auto",
   width: "500px",
   editing: false,
   sorting: true,
   paging: false,
   autoload: true,
   fields: fields,
   controller: {
       loadData: function(filter) {
       var d = $.Deferred();
      $.ajax({
         url: "http://........",
         dataType: "json"
      }).done(function(response) {
         //조회 데이터 셋팅
         d.resolve(response.aaData);//<-aaData key에 json데이터 설정해서 넘긴 경우
      });
      return d.promise();
   }
}
});

2. 페이지 처리를 할 경우 controller 부분

controller: {
   loadData: function(filter) {
   var d = $.Deferred();
   //데이터 조회 시 pateSize,pateIndex 을 이용해서 조회할 페이지 정보를 검색 합니다.
   $.ajax({
      url: controllerUrl,
      dataType: "json",
      data:{
         "row":filter.pateSize,//페이지 row
         "page":filter.pateIndex//페이지 번호
      }
   }).done(function(response) {
      //페이징 처리를 위해 data, itemsCount 값을 같이 넘겨 줘야 합니다.
      d.resolve({data: response.aaData, itemsCount: response.total});
   });
      return d.promise();
   }
}
});

3. 행을 마우스로 이동 하기 원하는 경우

$("#jsGrid").jsGrid({
   rowClass: function(item, itemIndex) {
      //행별로 id값을 지정
      return "client-" + itemIndex;
   }
   $gridData.sortable();
});

4. 컬럼 노출 방식을 다르게 하는 경우

function itemTemplateType1(value, item){
   if(value=="Y"){
      return "사용";
   }else if(value=="N"){
      return "미사용";
   }else{
      return "-";
   }
}

{ name: "item1", type: "text", width: "10%", title:"사용여부", align: "center", itemTemplate:itemTemplateType1}

5. 해당 항목이 편집 기능이 필요한 경우

{ name: "item1", type: "select", title:"사용여부", width: "20%", editing: true, type: "select", items: [{id:"Y",name:"사용"},{id:"N",name:"미사용"}], valueField: "id", textField: "name"}

6. 편집기능 사용시 자동 활성화 되는 행클릭 이벤트(행 선택 시 편집모드 활성화) 예외처리
rowClick: function(args){
   if(args.item.Editable){
      jsGrid.Grid.prototype.rowClick.call(this, args);
   }
   //편집 버튼 비 활성화 후 상세보기 등의 추가 작업이 필요한 경우 아래에 작성
   var getData  = args.item;
}

7. 행 추가 작업이 필요한 경우(insertItem 옵션 이용)

var insert_item = {};
insert_item.item1 = "Y";
$("#jsGrid").jsGrid("insertItem", insert_item);

 

8. jsGrid 목록에 관리 버튼을 추가 하고 해당 버튼 선택 시 rowClick이벤트 발생에서 다른 작업을 하고자 하는 경우

아래의 itemTemplate를 이용해서 버튼을 추가 해주고(이때 버튼에 특정 class명을 주입 합니다.)
itemTemplate: function(value) {
   return "<button type=\"button\" class=\"btn btn-default btn-sm visualDataSetBtn\" title=\"관리\"><i class=\"fas fa-cog\"></i></button>";
}

rowClick 이벤트 발생 부분에 이벤트 객체의 class명으로 특정 클래스가 존재 하는 경우 분기를 추가

rowClick: function(args){
    let $target  = $(args.event.target);
   if($target.closest(".visualDataSetBtn").length) {
      //버튼 클릭 이벤트
   }else{
      //그외 이벤트
   }
}

버튼 클릭 기본 이벤트 발생되지 않게 return false처리
$(".visualDataSetBtn").click(function () {
   return false;
});