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>

它看起来像：第一个孩子不适用这种风格。

Text（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>
...

UPDATE2

我通过添加

尝试了Oleg的回答

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

和

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

警告框不会出现。另外，如何仅在treegrid中的第一行应用它？

更新3

根据Oleg的回答，我升级到4.4.1（试过4.4.4，但它不允许打开第一个节点）。文字仍然不是粗体。萤火虫表明

.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中它起作用。哪种方法可以让第一个节点加粗并打开它？

Answer 1

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

更新：以下the demo标记了所有没有parent的项目：

enter image description here

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

enter image description here

在这两种情况下我都使用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声明的'first-child'。

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

2 个答案: