jqgrid / 컬럼 show / hide / checked box / 컬럼 표시, 숨기기

jqgrid 컬럼을 show hide (보여주거나 숨기는)기능을 구현한 예제입니다.

 

 

 

jqgrid 사용 필수입니다.

 

 

 

 

우측 상단의 checked box로 컬럼들의 show hide를 결정한다.

모든 컬럼을 대상으로 할수도 있고

직접 입력한 컬럼을 대상으로 할 수 있다.

 

실행 방법 및 설명은 소스와 주석을 참고하면 쉽게 따라할 수 있을거라 생각한다.

 

jsp 파일

jqgrid loadComplete 함수

loadComplete : function(data){  
    // 컬럼 속성
    // var colModel = $("#jqGrid").jqGrid("getGridParam", "colModel");
    // 컬럼명
    // var colNames = $("#jqGrid").jqGrid("getGridParam", "colNames");
    
    // 컬럼 속성
    var colModel = "";
    // 컬럼명 name = 한글명 또는 컬럼명, index = colModel에 선언되어있는 index
          var colNames = [{name:"PROCESS_ID_컬럼",
              index:"PROCESS_ID"},
              {name:"ID_컬럼",
              index:"ID"},
              {name:"IDXNO_컬럼",
               index:"IDXNO"}];
          // 숨길 컬럼명
          var hideColNames = ["ID_컬럼","IDXNO_컬럼"];
          
       // 최초 컬럼명 check box list 생성
          addColCheckboxList("jqGrid","gridColChkckboxList", colNames, hideColNames, colModel);
}

 

js 파일

////////////////////////////////////////////////////////////////////////////////////////////////////
// grid 컬럼 show hide 기능 시작
////////////////////////////////////////////////////////////////////////////////////////////////////
//addColCheckboxList 함수 실행 여부
var addColCheckboxListFlag = false;
 // 최초 그리드 사이즈
var colShowHideDefaultGridWidth = 0;
 
//최초 컬럼명 check box list 생성
/**
 * grid show hide 체크박스 생성
 * 
 * 
 * @param gridId - gridId (text)
 * @param ctrlBoxId - 컨트롤 박스 아이디 (text)
 * @param colNames - show hide 사용할 컬럼명 (JSON 배열)
 * @param gridWidth - grid의 초기 width값, 컬럼의 show hide시 그리드 전체 크기는 변동없게 하기 위한 용도
 * @param colModel - 전체 그리드 컬럼 모델, 컬럼 속성 중 hidden 의 값을 판단하는 용도로 필요 (배열)<br/>
 *       해당 컬럼이 null 또는 '' 일 경우 colNames를 기준으로 생성<br/><br/>
 *
 *ex) <br/>
 *  loadComplete 에서 실행 <br/>
 *<br/>
 *  var gridId =  "jqGrid";<br/>
 *  var colModel = $("#"+gridId).jqGrid("getGridParam", "colModel");<br/>
 *  var colNames = $("#"+gridId).jqGrid("getGridParam", "colNames");<br/>
 *  var hideColNames = ["ID","IDXNO"];<br/>
 *  addColCheckboxList(gridId,"gridColChkckboxList", colNames, hideColNames, colModel);<br/>
 *<br/>
 *  또는<br/>
 *<br/>
 *  var gridId =  "jqGrid";<br/>
 *  var colNames = ["PROCESS_ID","ID","IDXNO"];<br/>
 *  var hideColNames = ["ID","IDXNO"];<br/>
 *  addColCheckboxList(gridId,"gridColChkckboxList", colNames, hideColNames, '');<br/>
 */
function addColCheckboxList(gridId, ctrlBoxId, colNames, hideColNames, colModel){
 if(!addColCheckboxListFlag){
  var self = $("#"+gridId);
     var htmls = "";
     colShowHideDefaultGridWidth = $('#gbox_'+gridId).width(); // 최초 gire width 셋팅
    
     if(colModel == '' || colModel == null){ // colMedel이 없으면 입력한 colNames로만 목록을 생성
      $.each(colNames, function(i) {
    var colNm = this.name;
       var thisColNm = this.index;
       var hideFlag = false;
       for(var j=0; j<hideColNames.length; j++){
        if(hideColNames[j] == colNm){
         hideFlag = true;
         break;
        }
       }
       
       if(hideFlag){ // 기본값 : col hide
        htmls += '<input type="checkbox" id="col_showhide_'+thisColNm+'" value="'+thisColNm+'" onclick="gridColShowHide(\''+ gridId +'\',this);" ><label for="col_showhide_'+thisColNm+'">'+colNm+'</label>  ';
        self.hideCol(thisColNm);
       }else{
        htmls += '<input type="checkbox" id="col_showhide_'+thisColNm+'" value="'+thisColNm+'" onclick="gridColShowHide(\''+ gridId +'\',this);" checked="checked"><label for="col_showhide_'+thisColNm+'">'+colNm+'</label>  ';
        self.showCol(thisColNm);
       }
       
      });
     }else{ // 전체 컬럼 중 hidden이 true가 아닌 모든 컬럼으로 생성
      $.each(colModel, function(i) {
       if (!this.hidden) { // 컬럼 속성중 hidden이 false 인 것만 해당
        var colNm = colNames[i];
        var thisColNm = this.name;
           var hideFlag = false;
           for(var j=0; j<hideColNames.length; j++){
            if(hideColNames[j] == colNm){
             hideFlag = true;
             break;
            }
           }
           
           if(hideFlag){ // 기본값 : col hide
            htmls += '<input type="checkbox" id="col_showhide_'+thisColNm+'" value="'+thisColNm+'" onclick="gridColShowHide(\''+ gridId +'\',this);" ><label for="col_showhide_'+thisColNm+'">'+colNm+'</label>  ';
            self.hideCol(thisColNm);
           }else{
            htmls += '<input type="checkbox" id="col_showhide_'+thisColNm+'" value="'+thisColNm+'" onclick="gridColShowHide(\''+ gridId +'\',this);" checked="checked"><label for="col_showhide_'+thisColNm+'">'+colNm+'</label>  ';
            self.showCol(thisColNm);
           }
       }
       
      });
     }
  
  $("#"+ctrlBoxId).html(htmls);
  
  // 그리드 사이즈 고정
    self.setGridWidth(colShowHideDefaultGridWidth);
  
    // addColCheckboxList 함수 실행 여부
  addColCheckboxListFlag = true;
 }
}
 
 
// 컬럼 show hide
function gridColShowHide(gridId, el){
 var thisEl = $(el);
 var self = $("#"+gridId);
 var thisColName = thisEl.val();
 
 if(thisEl.is(":checked") == true) {
  self.showCol(thisColName);
 }else{
  self.hideCol(thisColName);
 }
 
 // 그리드 사이즈 고정
 self.setGridWidth(colShowHideDefaultGridWidth);
}
 

 

 

 

도움이 되셨다면 공감을 부탁드립니다. ^^