[javascript] jqgrid treegrid 첫 행 텍스트를 굵은 체로 만드는 방법


Answers

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

.css 선언의 '첫 번째 자녀'만 있으면됩니다.

Question

jqgrid 트리 그리드는 아래 코드를 사용하여 정의됩니다. 첫 번째 수준의 데이터에는 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>

첫 번째 아이는이 스타일을 적용하지 않습니다.

텍스트 (스팬 요소)는 두 번째 모눈 행 (두 번째 요소 내부)에 있습니다. 그 행은 <tr id="1" class="ui-widget-content .. 선택을 위해 이것을 사용할 수도 있습니다.

방화범이 끌린 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"};
},

경고 상자가 나타나지 않습니다. 또한, 첫 번째 행에 트리 그리드에만 적용하는 방법은 무엇입니까?

업데이트 3

Oleg의 대답에 따르면 4.4.1로 업그레이드했는데 (4.4.4 시도했지만 첫 번째 노드를 열 수 없습니다). 텍스트는 여전히 굵게 표시되지 않습니다. 방화범은

.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에서 작동합니다. 첫 번째 노드를 굵은 글꼴로 만들고 여는 방법은 무엇입니까?




Related