[Nexacro] 컬럼 헤더 클릭 시 그리드 정렬, Sort 하기

넥사크로 그리드에는 여러가지 기능이 있는데, 

컬럼 헤더를 클릭하면 그리드가 컬럼의 오름차순과 내림차순으로 정렬 되도록 하는 기능을

구현 할 수 있다.

재 조회 없이 정렬 하는 기능이라 유용하다.

 

먼저 오름차순, 내림차순 표기를 위한 변수를 선언하자

fv_constAscMark =  "▲";
fv_constDescMark = "▼";

 

정렬 함수

this.fnSort = function(obj, e){
 //전체선택은 리턴
  if(e.fromobject == "[object ButtonControl]"){
   return;  
  }
   
  var bindDs = obj.getBindDataset();
    
  //초기 keystring값 기억
  if(this.gfn_isNull(obj.defKeystring) && this.gfn_isNull(obj.defKeystringFix)){ 
   if(!this.gfn_isNull(bindDs.keystring)){  
    obj.defKeystring = bindDs.keystring;
   }
   obj.defKeystringFix = true;
  }
  
  var strType = obj.getCellProperty("head", e.cell, "displaytype"); 
  if (strType == "checkboxcontrol"){
   return false;
  } 
  
  if (bindDs.rowcount == 0){
   return false;
  }
  
  var sBindColId = obj.getCellProperty("body", e.col, "text");
  
  if(this.gfn_isNull(sBindColId)) {
   this.alert("info","정렬이 불가능한 셀입니다.");
   return false;
  }
  
  var BodyColId = sBindColId.toString().split(":");
  if (BodyColId[0] != "bind"){
   this.alert("info","정렬이 불가능한 셀입니다.");
   return false;
  }
  
  var nColspan = obj.getCellProperty("head", e.cell, "colspan");
  if(nColspan > 1){
   this.alert("info","정렬이 불가능한 셀입니다.");
   return false;
  }
  
  obj.set_enableredraw(false); 
  bindDs.set_enableevent(false); 
  
  for (var i=0; i<obj.getCellCount("head"); i++){
   if (obj.getCellText(-1, i) == "undefined"){
    continue;
   }
   
   if(obj.getCellProperty("head", i, "displaytype") == "checkboxcontrol") {  
    continue;
   }  
   
   var strHeadText = obj.getCellText(-1, i);
   
   if(this.gfn_isNull(strHeadText)) continue;
   
   if (i == e.cell){
    if (strHeadText.substr(strHeadText.length - 1) == this.fv_constAscMark){
  obj.setCellProperty("head", i, "text", strHeadText.substr(0, strHeadText.length - 1) + "" + this.fv_constDescMark);
  if(this.gfn_isNull(obj.defKeystring)){
   bindDs.set_keystring("S:-" + BodyColId[1]);
  }else{
   bindDs.set_keystring(obj.defKeystring + ", S:-" + BodyColId[1]);
  }
    } else if (strHeadText.substr(strHeadText.length - 1) == this.fv_constDescMark){
  if (strHeadText.substr(strHeadText.length - 1) == this.fv_constDescMark){
   obj.setCellProperty("head", i, "text", strHeadText.substr(0, strHeadText.length - 1));
  }
  if(this.gfn_isNull(obj.defKeystring)){
   bindDs.set_keystring("");
  }else{
   bindDs.set_keystring(obj.defKeystring);
  }
    } else {
  obj.setCellProperty("head", i, "text", strHeadText + "" + this.fv_constAscMark);
  if(this.gfn_isNull(obj.defKeystring)){
   bindDs.set_keystring("S:+" + BodyColId[1]);
  }else{
   bindDs.set_keystring(obj.defKeystring+", S:+" + BodyColId[1]);
  }
    }
   } else { // 정렬표시 삭제
    if (strHeadText.substr(strHeadText.length - 1) == this.fv_constAscMark || strHeadText.substr(strHeadText.length - 1) == this.fv_constDescMark){
  obj.setCellProperty("head", i, "text", strHeadText.substr(0, strHeadText.length - 1));
    }
   }
  }
  bindDs.set_enableevent(true);
  obj.set_enableredraw(true);
  
  //정렬한후 데이터셋 ROW POSITION 첫번째로 이동
  var strSelectType = obj.selecttype;
  if (strSelectType == "area"){
   obj.set_selecttype("row");
   bindDs.set_rowposition(0);
   obj.set_selecttype("area");
  } else {
   bindDs.set_rowposition(0);
  }

}

NULL 체크 

this.gfn_isNull = function(value){

  // null, undefined ==> true
  if ( value == null ) return true;
  
  if (new String(value).valueOf() == "undefined"){
   return true;
  }
  
  // String, Array ==> length == 0
  if ( this.gfn_isString(value) || this.gfn_isArray(value) )
  {
   return value.length == 0 ? true : false;
  }
  else if ( this.gfn_isObject(value) )
  {
   for (var p in value) 
   {
    if ( value.hasOwnProperty(p) )
    {
  return false;
    }
   }
   return true;
  }
  
  return false;

}

컴포넌트 확인

this.gfn_isXComponent = function(value) 
{
 if ( value === null || value === undefined  ) return false;
 
 return value instanceof nexacro.Component;
};

헤더 클릭 이벤트에 함수 추가

this.divDetail_Grid01_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
 this.fnSort(obj, e);
};