如何使jqgrid treegrid第一行文本加粗

Question

jqgrid treegrid 是使用下面的代码定义的。第一级数据仅包含 jqgrid 第一行中显示的单个节点。 如何使这个（treegrid第一行）文本加粗？

我试过了

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

但这会使所有节点变粗。

如何只使第一个节点（第一行）加粗？

treegrid 定义为

        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 没有应用这种样式。

文本（span 元素）在第二个网格行内（在第二个元素内）。它的行以 <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>
...

更新2

我通过添加尝试了 Oleg 答案

.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 第一行类，因此该类没有任何效果。

萤火虫输出是：

.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 中它可以工作。使第一个节点变粗并打开它的正确方法是什么？

Answer 1

如果你想让整行加粗，我认为你可以使用rowattr 来解决这个问题（参见the answer）。您可以在指定行上分配额外的class 或style 属性。或者，您可以使用cellattr 仅在单元格上分配类或样式，例如仅在"menu" 列中的单元格上（请参阅the answer）。我在引用的答案中使用了标准网格，但您可以将 rowattr 和 cellattr 以与 TreeGrids 相同的方式使用。对 TreeGrid 中存在的列 parent、level 和 isLeaf 的访问可以帮助您实现。

更新：这里是the demo，它将所有没有parent的项目标记为粗体：

和another demo 使用更具体的规则：

在这两种情况下我都使用了 CSS 规则

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

rowattr的实现很简单，例如如下

rowattr: function (rd) {
    if (rd.parent === "null" && rd.name === "Cash") {
        return {"class": "myMarking"};
    }
}

Answer 2

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

您只需要定义 .css 声明的“第一个孩子”。