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 不应用这种风格。

文本（跨度元素）在第二个网格行内（在第二个元素内）。它的行以<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 中它可以工作。使第一个节点变粗并打开它的正确方法是什么？

4

2 回答 2

1

rowattr我认为如果你想让整行加粗，你可以通过使用来解决这个问题（见答案）。您可以在指定的行上分配附加class或属性。style或者，您可以使用cellattr仅在单元格上分配类或样式，例如仅在"menu"列中的单元格上（参见答案）。我在引用的答案中使用了标准网格，但您可以使用TreeGridsrowattr并cellattr以相同的方式使用。对列的访问parent，level以及isLeaf存在于 TreeGrid 中的内容可以帮助您实现。

更新：这是将所有没有的项目标记为粗体的演示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 回答