jqgrid treegrid 각 트리 수준에 대한 사용자 정의 CSS 클래스

Question

나는 깊은 트리가 있으며 사용자는 레벨을 구분하기가 어렵습니다. 각 레벨에 맞춤형 CSS 클래스를 사용할 수 있습니까? 예를 들어 첫 번째 h1과 굵게, 두 번째 굵게 ...

Answer 1

나는 흥미로운 질문을 발견하지만 나무 노드에 대해 개별 아이콘을 더 잘 사용할 수 있다고 생각한다. 행마다 CSS 스타일을 설정해야한다면 the answer 및 this one으로 전달할 수 있습니다. 숨겨진 level 열의 내용을 테스트하기 위해 데모에서 테스트 기준을 변경하기 만하면됩니다.

그래서 나는 the demo이있는 당신은 노드 레벨 당 개별 아이콘을 설정하는 방법을 보여줍니다 생성 :

모든

우선은 TreeGrid에가 잎에 대한 개별 아이콘을 지원하는지, 언급해야한다 아웃 - 오브 - 박스 . 게시 된 데이터에 icon 속성을 추가하기 만하면됩니다. 속성의 값은 아이콘을 나타내는 div에 추가되는 CSS 클래스 여야합니다. 예 : icon: "ui-icon-star". 아이콘의 표준 클래스는 "ui-icon-radio-off"입니다. 또한 div는 "ui-icon tree-leaf treeclick"클래스를받습니다. 따라서 표준 아이콘 인 jQuery UI icons에서 필요한 아이콘을 찾으면 잎 아이콘이 매우 쉽게 변경됩니다.

리프가 아닌 트리 노드에는 두 개의 아이콘이 있습니다. 하나는 접힌 양식이고 다른 하나는 확장 양식입니다. jqGrid 구성에 따라 아이콘을 변경하는 간단한 방법은 없지만 loadComplete 내부에 추가 JavaScript 코드를 작성하고 과 같이 expandNode 및 collapseNode 메서드의 체인 (덮어 쓰기 또는 서브 클래스)과 관련하여 요구 사항을 구현할 수 있습니다.

데모에서는 방금 최상위 트리 노드의 아이콘을 변경했습니다. 같은 방법으로 다른 레벨의 아이콘도 바꿀 수 있습니다. 당신이 내 데모에서 코드의 가장 중요한 부분을 찾을 아래 :

var $grid = $("#treegrid"), 
    orgExpandNode = $.fn.jqGrid.expandNode, 
    orgCollapseNode = $.fn.jqGrid.collapseNode; 

$grid.jqGrid({ 
    .... 
    loadComplete: function (data) { 
     var item, i, l = data.length || 0; 
     for (i = 0; i < l; i++) { 
      item = data[i]; 
      if (!item.isLeaf && (item.level === "0" || item.level === 0)) { 
       if (item.expanded) { 
        $("#" + item.id + " div.treeclick") 
         .removeClass("ui-icon-triangle-1-s") 
         .addClass("ui-icon-carat-1-s"); 
       } else { 
        $("#" + item.id + " div.treeclick") 
         .removeClass("ui-icon-triangle-1-e") 
         .addClass("ui-icon-carat-1-e"); 
       } 

      } 
     } 
    } 
}); 

$.jgrid.extend({ 
    expandNode: function (rc) { 
     var ret = orgExpandNode.call(this, rc); 
     if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) { 
      $("#" + rc._id_ + " div.treeclick") 
       .removeClass("ui-icon-triangle-1-s ui-icon-carat-1-e") 
       .addClass("ui-icon-carat-1-s"); 
     } 
     return ret; 
    }, 
    collapseNode: function (rc) { 
     var ret = orgCollapseNode.call(this, rc); 
     if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) { 
      $("#" + rc._id_ + " div.treeclick") 
       .removeClass("ui-icon-triangle-1-e ui-icon-carat-1-s") 
       .addClass("ui-icon-carat-1-e"); 
     } 
     return ret; 
    } 
}); 

이 업데이트 : 나는 나무 아이콘의 문제에 대해 좀 더 생각 the new demo에 코드를 수정했습니다.

리프 노드와 똑같은 트리 노드의 아이콘을 정의하는 것이 더 실용적 일 것이라고 결정했습니다. 하나는 두 개의 아이콘을 지정해야하기 때문에 접힌 아이콘과 확장 된 아이콘을 쉼표로 구분할 수 있습니다. 예 : icon: "ui-icon-carat-1-e,ui-icon-carat-1-s".

var $grid = $("#treegrid"), 
    orgExpandNode = $.fn.jqGrid.expandNode, 
    orgCollapseNode = $.fn.jqGrid.collapseNode, 
    changeTreeNodeIcon = function (item) { 
     var icons, $div, id; 
     if (!item.isLeaf && typeof item.icon === "string") { 
      icons = item.icon.split(','); 
      if (icons.length === 2) { 
       id = item[this.p.localReader.id] || item[this.p.jsonReader.id]; 
       $div = $("#" + $.jgrid.jqID(id) + " div.treeclick"); 
       if (item.expanded) { 
        $div.removeClass(icons[0]) 
         .removeClass("ui-icon-triangle-1-s") 
         .addClass(icons[1]); 
       } else { 
        $div.removeClass(icons[1]) 
         .removeClass("ui-icon-triangle-1-e") 
         .addClass(icons[0]); 
       } 
      } 
     } 
    }; 

$grid.jqGrid({ 
    .... 
    loadComplete: function (data) { 
     var item, i, l = data.length || 0; 
     for (i = 0; i < l; i++) { 
      item = data[i]; 
      changeTreeNodeIcon.call(this, item); 
     } 
    } 
}); 

$.jgrid.extend({ 
    expandNode: function (rc) { 
     var ret = orgExpandNode.call(this, rc); 
     changeTreeNodeIcon.call(this[0], rc); 
     return ret; 
    }, 
    collapseNode: function (rc) { 
     var ret = orgCollapseNode.call(this, rc); 
     changeTreeNodeIcon.call(this[0], rc); 
     return ret; 
    } 
}); 

이 업데이트 : 코드는 다음에 다시 할 수 있습니다 나는 the feature request와 TreeGrid에에 기능 위에서 설명한 추가 할 the pull request을 기록했다.