2

jqgrid treegrid は、以下のコードを使用して定義されます。データの最初のレベルには、jqgrid の最初の行に表示される単一のノードのみが含まれます。この (treegrid の最初の行) テキストを太字にする方法は?

私は試した

#tree-grid .cell-wrapper
{
    font-weight: bold;
}

ただし、これによりすべてのノードが太字になります。

最初のノード (最初の行) のみを太字にする方法は?

ツリーグリッドは次のように定義されます

        var treegrid = $("#tree-grid");
        treegrid.jqGrid({
            loadComplete: function (data) {
                $('.tree-leaf', $(this)).css('width', '0px');
            },
            datatype: "json",
            mtype: "POST",
            height: "auto",
            loadui: "disable",
            treeGridModel: "adjacency",
            colModel: [
                    { name: "id", width: 1, hidden: true, key: true },
                    { name: "menu", classes: "treegrid-column" },
                    { name: "url", width: 1, hidden: true }
                ],
            autowidth: true,
            treeGrid: true,
            ExpandColumn: "menu",
            rowNum: 2000,
            ExpandColClick: true,
        }
                );
        treegrid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();

アップデート

私は試した

#tree-grid .cell-wrapper :first-child
{
    font-weight: bold;
}

ただし、太字は適用されません。

Firebug は、要素が

<span class="cell-wrapper" style="cursor: pointer;">Text which should be bold</span>

:first-child はこのスタイルを適用しないようです。

テキスト (スパン要素) は、2 番目のグリッド行 (2 番目の要素の内側) 内にあります。その行は で始まり<tr id="1" class="ui-widget-content ..ます。たぶんこれを選択に使用することができます。

firebug からの完全な jqgrid レイアウトは

<div>
<div id="gbox_tree-grid" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 188px;">
<div id="lui_tree-grid" class="ui-widget-overlay jqgrid-overlay"></div>
<div id="load_tree-grid" class="loading ui-state-default ui-state-active">Loen...</div>
<div id="gview_tree-grid" class="ui-jqgrid-view" style="width: 188px;">
<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="display: none;">
<div class="ui-state-default ui-jqgrid-hdiv" style="width: 188px; display: none;">
<div class="ui-jqgrid-bdiv" style="height: auto; width: 188px;">
<div style="position:relative;">
<div></div>
<table id="tree-grid" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="1" role="grid" aria-multiselectable="false" aria-labelledby="gbox_tree-grid" style="width: 188px;">
<tbody>
<tr class="jqgfirstrow" style="height:auto" role="row">
<tr id="1" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1">
<td aria-describedby="tree-grid_id" title="1" style="display:none;" role="gridcell">1</td>
<td class="treegrid-column" aria-describedby="tree-grid_menu" style="" role="gridcell">
<div class="tree-wrap tree-wrap-ltr" style="width:18px;">
<span class="cell-wrapper" style="cursor: pointer;">Text which should be bold</span>
</td>
...

Update2

追加してオレグの答えを試しました

.first-row
{
    font-weight: bold;
}

と

rowattr: function (rd) {
  alert('rowattr');
        return {"class": "first-row"};
},

アラート ボックスは表示されません。また、treegrid の最初の行のみにこれを適用する方法は?

アップデート 3

Oleg の回答によると、4.4.1 にアップグレードしました (4.4.4 を試しましたが、最初のノードを開くことはできません)。テキストはまだ太字ではありません。Firebug はそれを示しています

.ui-jqgrid tr.jqgrow td {
    font-weight: normal;

最初の行のクラスが適用されるafterため、このクラスは何の効果もありません。

firebug の出力は次のとおりです。

.ui-jqgrid tr.jqgrow td {
    font-weight: normal; /* this overrides my style !! */
    white-space: pre;
}
.treegrid-column {
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.first-row {
    font-weight: bold;
}

次のコードは、ロード時にツリーを開くために使用されます。

            gridComplete: function () {
                setTimeout(function () {
          var rData2 = treegrid.getGridParam('data');
              treegrid.expandRow(rData2[0]);
              treegrid.expandNode(rData2[0]);
           },0);
          },

4.4.4 ではツリーを開きません。4.4.1 では動作します。最初のノードを太字にして開く適切な方法はどれですか?

4

2 に答える 2

1

rowattr行全体を太字にしたい場合は、 を使用して問題を解決できると思います(回答を参照)。class指定した行に追加またはstyle属性を割り当てることができます。cellattrまたは、セルのみ、たとえば"menu"列のセルのみにクラスまたはスタイルを割り当てるために使用できます（回答を参照）。参照された回答では標準のグリッドを使用rowattrしcellattrましたが、TreeGrid でも同じように使用できます。列へのアクセスparent、levelおよびisLeafTreeGrid に存在することは、実装に役立ちます。

更新：これは、ないすべてのアイテムを太字でマークするデモparentです：

ここに画像の説明を入力

別のデモでは、より具体的なルールを使用しています。

ここに画像の説明を入力

どちらの場合も、CSS ルールを使用しました

.ui-jqgrid tr.myMarking td { font-weight: bold; }

の実装rowattrは非常に簡単で、たとえば次のようになります。

rowattr: function (rd) {
    if (rd.parent === "null" && rd.name === "Cash") {
        return {"class": "myMarking"};
    }
}
于 2013-02-04T19:58:24.767 に答える
0 
#tree-grid .cell-wrapper:first-child
{
    font-weight: bold;
}

.css 宣言の「最初の子」をスコープするだけです。

于 2013-02-04T19:16:45.047 に答える