jqgrid treegrid各ツリーレベルのカスタムCSSクラス

Question

私は深いツリーを持ち、ユーザーにとってレベルを区別することは難しいです。各レベルのカスタムCSSクラスを持つことは可能ですか？たとえば、最初のh1と太字、2番目の太字...

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葉のアイコンが非常に簡単に変更する場合。

非リーフツリーノードには、折りたたまれたフォームと拡張フォームのアイコンの2つのアイコンがあります。 jqGridの設定ごとにアイコンを変更する簡単な方法はありませんが、追加のJavaScriptコードをloadCompleteの中に記述し、expandNodeとcollapseNodeというチェーン化（上書きまたはサブクラス化）に関しては、hereを提案したように要件を実装できます。

デモでは、最上位のツリーノードのアイコンを変更しました。同じように、他のレベルのアイコンも変更できます。あなたは私のデモからコードの最も重要な部分を見つけるには、下記：

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にコードを修正しました。

私は、リーフのようにツリーノードのアイコンを定義することがより現実的であると判断しました。 2つのアイコンを指定する必要があるため、折りたたまれたアイコンと展開されたアイコンのクラスをコンマで区切ることができます。例：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。