데브심의 개발자 레퍼런스

 · 사용 환경 : jQWidgets을 사용한 Web 환경

 · 개요 : jqxGrid 사용 시 기본으로 헤더는 1줄로 표시되는데 2줄로 나타내고 싶은 경우 조치

 · 소스 : 

         renderer: function() {
            return '<div style="margin-top:20px; text-align:center">코로나<br />바이러스</div>';
         },

 · 설명 : jqxGrid 내부의 columns 속성에서 2줄로 나타내고 싶은 속성에 위의 소스를 추가한다.

 · 출처 : jQWidgets 공식 사이트 Q&A

개요 : jqWidgets의 jqxGrid 사용 중 두개의 컬럼의 헤더를 한개로 합치는 방법

해결책 : columns 옵션 중 rendered 옵션을 사용

JavaScript :

$("#grid_id").jqxGrid({

   width: 450,

   source: dataAdapter,

   columns: [

      {

         text: "Product",

         datafield: "productname",

         renered: function (columnHeaerElement) {

            columnHeaderElement.html("div id='devsim' style='margin-right: 2px;'>Product</div>")

         }

   },

   {

         text: "Quantity",

         datafield: "quantity",

         renered: function (columnHeaerElement) {

            columnHeaderElement.html("div style='margin-right: 2px;'>Detail</div>")

         }

      }

   ]

});

CSS : 

.jqx-grid-column-header {

   border: none;

}

결과 :

개인 해결책 : 위의 예시는 공식사이트의 답변 사항이고 개인적으로는 그리드 바인딩이 완료되면 

첫번째 div에 id를 지정 후 border를 지정해주는 방법으로 해결하였다.

$("#grid_id").on("bindingcomplete", function () {

   $("#devsim").parent().parent().parent().css("border", "none");

});

각자 자신의 환경에 맞게 수정해서 문제를 해결하면 된다.

[출처] : jqWidgets 공식 사이트 Hristo님

www.jqwidgets.com/community/topic/same-header-for-2-columns/

jqxWindow 내부에 jqxGrid를 배치하여

custom 팝업창 구현 시

처음 팝업이 열린 상태에서 필터기능이 먹지 않는 경우 조치 방법

=> 그리드 데이터 조회 transaction 부분에서 async:false 로 해준다.

jqxGrid 메인 속성 말고

특정 컬럼의 정렬, 필터 메뉴 기능을 추가 시

기능이 없는 컬럼 헤더의 잔상 메뉴를 없애는 방법

columns 옵션에 menu: false 기능 추가

출처 : https://www.jqwidgets.com/community/topic/how-i-can-remove-filter-to-particular-grid-column/

jqxWindow

{

   initContent: function () {

       jqxGrid 선언부 {

         source: transaction ~ <-- 1. 처음 윈도우가 뜰 때에 transaction

      }

   }

   $("#win").jqxWindow('open');

   var isCompleted = $("#maa_detailPop_grid").jqxGrid('isBindingCompleted');
   if (isCompleted) {

      $("#grid").jqxGrid({source: transaction}));   <-- 2. 두번째 부터 갱신 된 transaction

   }

}

jQWidgets dataAdapter 호출 시 정상적으로 동작 안할 때 확인 할 사항

1. combo box 등에서 매핑을 정상적으로 못하는 경우 : 마이 바티스 구문에서 알리야스를 대소문자로 구성

   ex : SCUSTOMER as "sCustomer"

2. transaction을 호출하여도 url 콜이 요청되지 않는 경우 : autoBind 옵션 추가

   ex : var dataAdapter = new $.jqx.dataAdapter(datasource, {autoBind: true});

jQWidgets jqxGrid aggregateddata 값을 String으로 가져오기

JSON.parse(JSON.stringify($("#그리드명").jqxGrid('getcolumnaggregateddata', '데이터필드명', ['sum']))).sum

헤더 우측 끝에 생성되는 그리드 구분선 제거

스크롤바 제거

헤더 숨기기

다음과 같은 형식으로 짜여진 구조에서 JavaScript딴에서 첫번째 controller + ?data = ""와 같이 get 방식으로

데이터를 넘겨 새로운 페이지에서 jqGrid에 데이터를 출력할 때 parameter가 두번째 controller로 값이 넘어가지 않을 때 체크 할 사항..

$("#jqGrid 테이블명").jqGrid({

url : ....

datatype : ....

.

.

.

postData : {

data : $('#input id').val()

}

});

jqGrid를 reload 시 type나 추가 구분이 필요한 파라미터를 전달 하는 방법

$("#grid id).jqGrid('setGridParam',{

url: 'url 입력',

datatype: "json",

"postData" : {"사용할 파라미터 이름 입력": "사용할 파라미터 값 입력"}

}).trigger('reloadGrid');

다음과 같은 형식으로 입력하면 정상 동작합니다.