1

我的网络应用程序中有一个树，它使用了 fancytree。除了某些节点我需要将字体颜色设置为红色之外，这一切都很好。我extraClasses在我的 JSON 中使用它完全适用于适当的节点，并且可以使用浏览器的调试器进行验证。

然而，虽然我可以轻松地应用font-styleCSSbackground-color属性，但由于某种原因，字体颜色并没有被带到 base span.fancytree-title. 相反，所有节点都是黑色的。

CSS：

span.OrgDataTreeNotChecked
{
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

C# 生成相关的额外类：

if (org.Status == "NotChecked")
    item.extraClasses = "OrgDataTreeNotChecked";

在浏览器调试器中，我可以清楚地看到这一点：

extraClasses 节点按预期应用

您可以在此处看到颜色已进入元素的属性：

正在设置的颜色

但是，当我突出显示时，span.fancytree-title我可以看到颜色被覆盖并改用黑色。

被覆盖的颜色

我尝试了各种方法，例如在.initFancy 树事件和文档就绪函数中尝试覆盖 jQuery 中这些节点的颜色：

$(".OrgDataTreeNotChecked").closest(".fancytree-title").css({ "color": "red" });

我什至尝试了为所有 .fancytree-title元素设置颜色的蛮力方法：

$(".fancytree-title").css({ "color": "red" });

这也没有效果。我的想法很新鲜。它只是不想应用字体颜色而只应用字体颜色。每个其他属性都可以正常工作。帮助！

4

4 回答 4

4

经过多次试验和错误，并使用 Chrome 的“检查元素”功能，这对我有用：

span.OrgDataTreeNotChecked > span.fancytree-title {
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

似乎在 extraClasses 字符串中指定的类被应用于包装了 fancytree-title 跨度的 fancytree-node 跨度，因此使用右尖括号运算符“向下钻取”就可以了。

于 2014-09-10T20:41:37.323 回答
1

经过一番努力，我终于解决了。我不会说这是一个完美的解决方案，但它确实有效。

在每个父节点展开之前，节点不会加载到 DOM 中，因此在树$(".OrgDataTreeNotChecked")的事件中包含的集合实际上是零长度，init并且显然在文档的就绪函数中。

然而，expand树上有一个事件会随着每个节点的展开而触发。在第一次加载时使用子节点填充 DOM。所以我不得不将以下事件处理程序放入树中：

expand: function(data) {
    $(".OrgDataTreeNotChecked").children(".fancytree-title").css({ 'color': 'red' });
},
...

然后将所有内容设置为红色。我之所以说这不是一个完美的解决方案，是因为在每次加载时，文本首先会出现一会儿黑色，然后变成应该是红色的红色。

现在可以了，但是如果有人有更好的建议，请说出来:)

于 2014-07-04T04:40:18.810 回答
1

在您的 css 文件中添加以下内容：

span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title,
span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title:hover {
    color: red;
}

您的自定义类必须应用于 li 元素：

<li class="folder expanded">Override CSS style per node
    <ul>
        <li class="OrgDataTreeNotChecked">item</li>
        <li class="folder OrgDataTreeNotChecked">item</li>
    </ul>

这里的工作示例：http ://wwwendt.de/tech/fancytree/demo/sample-theming.html

于 2015-04-18T16:57:53.713 回答
0

像这样试试。希望它能解决问题。

span.fancytree-title.OrgDataTreeNotChecked
{
background-color: #EFFAFA;
color:red !important;
font-style: italic;
}
于 2014-07-03T07:16:34.607 回答