如何使jqgrid treegrid的第一行文本粗体 [英] How to make jqgrid treegrid first row text bold

问题描述

jqgrid treegrid使用下面的代码定义。第一级数据只包含显示在jqgrid第一行中的单个节点。

我尝试了

 ＃tree-grid .cell-wrapper 
 {
 font-weight：bold; 
} 
  

但这会使所有节点加粗。

如何仅使第一个节点（第一行）成为粗体？

treegrid定义为

  var treegrid = $（＃tree-grid）; 
 treegrid.jqGrid（{
 loadComplete：function（data）{
 $（'。tree-leaf'，$（this））。css（'width'，'0px'）; 
}，
数据类型：json，
 mtype：POST，
 height：auto，
 loadui：disable，
 treeGridModel：adjacency，
 colModel：[
 {name：id，width：1，hidden：true，key：true}，
 {name：menu 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-wrapperstyle =指针;>应为粗体的文本< / span> 
  

它看起来像：first-child不应用此样式。

文本（span元素）在第二个网格行（第二个元素内）中。它的行以< tr id =1class =ui-widget-content .. 开头，也许可以使用它来选择

完成firebug的jqgrid布局

 < div> 
< ; div id =gbox_tree-gridclass =ui-jqgrid ui-widget ui-widget-content ui-corner-alldir =ltrstyle =width：188px;> 
< div id =lui_tree-gridclass =ui-widget-overlay jqgrid-overlay>< / div> 
< div id =load_tree-gridclass =loading ui-state-default ui-state-active> Loen ...< / div> 
< div id =gview_tree-gridclass =ui-jqgrid-viewstyle =width：188px; 
< div class =ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfixstyle =display：none;> 
< div class = ui-state-default ui-jqgrid-hdivstyle =width：188px; display：none;> 
< div class =ui-jqgrid-bdivstyle =height：auto; width：188px;> 
< div style =position：relative;> 
< div>< / div> 
< table id = class =ui-jqgrid-btablecellspacing =0cellpadding =0border =0tabindex =1role =gridaria-multiselectable =falsearia-labelledby =gbox_tree-grid style =width：188px;> 
< tbody> 
< tr class =jqgfirstrowstyle =height：autorole =row> 
< ; tr id =1class =ui-widget-content jqgrow ui-row-ltrrole =rowtabindex = -  1> 
< td aria-referredby =tree-grid_id title =1style =display：none;role =gridcell> 1< / td> 
< td class =treegrid-columnaria-describedby =tree-grid_menustyle =role =gridcell> 
< div class =tree-wrap tree-wrap-ltrstyle =width：18px;> 
< span class = -wrapperstyle =cursor：pointer;>应为粗体的文本< / span> 
< / td> 
 ... 
  / pre> 
 
 
  Update2  
 
 
 
 
 
 
  .first-row 
 {
 font-weight：bold; 
} 
  
和
  rowattr：function（rd）{
 alert（'rowattr'）; 
 return {class：first-row}; 
}，
  
警告框。 
 
 $ b 
 更新3  
 
 
 
根据Oleg答案，我升级到4.4.1（尝试4.4.4，但它不允许打开第​​一个节点）。 
文本仍然不是粗体。 Firebug显示
  .ui-jqgrid tr.jqgrow td {
 font-weight：normal; 
   之后应用  
 
 
 <因此这个类没有任何效果。 
 
 
 
 firebug输出为：
  .ui-jqgrid tr.jqgrow td {
 font-weight：normal; / *这覆盖我的风格！ * / 
 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它工作。 
解决方案
我认为你可以通过使用 rowattr （如果您想将整行设为粗体（请参阅使用更多具体规则：
 
 
 
  p> 
 
 
在这两种情况下，我使用CSS规则
  .ui-jqgrid tr.myMarking td {font-weight：bold; } 
  
  rowattr 的实现非常简单并且可以例如如下
  rowattr：function（rd）{
 if （rd.parent ===null& rd.name ===Cash）{
 return {class：myMarking}; 
} 
} 
  
 
jqgrid treegrid is defined using code below. First level of data contains only single node displayed in first row in jqgrid.
How to make this (treegrid first row) text bold ?

I tried 
#tree-grid .cell-wrapper
{
    font-weight: bold;
}
but this makes all nodes bold.

How to make bold only first node (first row) ?

treegrid is defined as
        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();
Update

I tried
#tree-grid .cell-wrapper :first-child
{
    font-weight: bold;
}
but bold font does not apply.

Firebug shows that element is
<span class="cell-wrapper" style="cursor: pointer;">Text which should be bold</span>
it looks like :first-child does not apply this style.

Text (span element) is inside second grid row (inside second  element). Its row starts with <tr id="1" class="ui-widget-content .. . Maybe it is possible to use this for selection.

complete jqgrid layout from firebug is
<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

I tried Oleg answer by adding
.first-row
{
    font-weight: bold;
}
and
rowattr: function (rd) {
  alert('rowattr');
        return {"class": "first-row"};
},
alert box does not appear. Also, how to apply this for first row in treegrid only?

Update 3

According to Oleg answer I upgraded to 4.4.1 (tried 4.4.4 but it does not allow to open first node).
Text is still not bold. Firebug shows that
.ui-jqgrid tr.jqgrow td {
    font-weight: normal;
is applied after first-row class and thus this class does not have any effect. 

firebug output is:
.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;
}
The following code is used to open tree on load:
            gridComplete: function () {
                setTimeout(function () {
          var rData2 = treegrid.getGridParam('data');
              treegrid.expandRow(rData2[0]);
              treegrid.expandNode(rData2[0]);
           },0);
          },
In 4.4.4 it does not open tree. In 4.4.1 it works. Which is propery way to make first node bold and open it ?
解决方案
I think you can solve the problem by usage of rowattr if you want to make the whole row bold (see the answer). You can assign additional class or style attribute on the specified row.  Alternatively you can use cellattr to assign class or style only on the cell, for example only on the cell in "menu" column (see the answer). I used standard grids in the referenced answers, but you can use rowattr and cellattr in the same way with TreeGrids. The access to the columns parent, level and isLeaf existing in the TreeGrid can be helpful for you in the implementation.

UPDATED: Here is the demo which mark bold all items which has no parent:



and another demo use more specific rule:



In both cases I used CSS rule
.ui-jqgrid tr.myMarking td { font-weight: bold; }
The implementation of rowattr is very simple and can be for example as below
rowattr: function (rd) {
    if (rd.parent === "null" && rd.name === "Cash") {
        return {"class": "myMarking"};
    }
}


                        
这篇关于如何使jqgrid treegrid的第一行文本粗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！