在Fancytree＆＃34; extraClasses＆＃34;中设置字体颜色不申请

Question

我的网页应用中有一棵树，它使用了fancytree。这一切都很好，但对于某些节点，我需要将字体颜色设置为红色。我在我的JSON中使用extraClasses，它完全适用于相应的节点，可以使用浏览器的调试器进行验证。

但是，虽然我可以轻松应用font-style和background-color CSS属性，但由于某种原因，字体颜色不会传到基础span.fancytree-title。相反，所有节点都是黑色的。

CSS：

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

C＃生成相关的extraClasses：

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

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

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

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

我尝试了各种各样的事情，例如在Fancy树的.init事件和文档就绪函数中尝试覆盖jQuery中那些节点的颜色：

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

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

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

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

Answer 1

经过多次试验和错误，并使用Chrome＆＃34; Inspect element＆＃34;功能，这里对我有用：

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

似乎extraClasses字符串中指定的类被应用于包含fancytree-title范围的fancytree-node span，因此＆＃34;向下钻取＆＃34;使用直角括号操作员就可以了。

Answer 2

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

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

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

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

然后将所有内容设置为红色。我说它不是一个完美的解决方案的原因是因为在每次加载时，文本首先显示为黑色，然后然后变成红色，应该是红色。

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

Answer 3

在你的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

Answer 4

尝试这样的方式。希望它能解决问题。

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