TreeView — 选定的节点样式不会出现在选定的节点上

Question

我的代码是：

            <asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
                max-height: 500px;" LineImagesFolder="~/TreeLineImages" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle"
                CssClass="TreeView" NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle"
                RootNodeStyle-CssClass="RootNodeStyle" SelectedNodeStyle-CssClass="SelectedNodeStyle"
                LeafNodeStyle-Width="100%" NodeStyle-Width="100%" ParentNodeStyle-Width="100%"
                RootNodeStyle-Width="100%" Font-Size="12pt">
                <Nodes>
                    <asp:TreeNode Text="All Items" SelectAction="Expand" PopulateOnDemand="True" Value="All Items" />
                </Nodes>
            </asp:TreeView>

css

.TreeView  
{
    border-bottom:1px dotted #B2B2B2 !important;
}

.TreeView div
{
    margin-left:5px;
}

.TreeView table
{
    border-top:1px dotted #B2B2B2 !important;
}

.TreeView div table
{
    border-bottom:none !important;
    border-top:none !important;
}

.TreeView table td
{
    padding:2px 0;
}

.LeafNodesStyle 
{

}

.RootNodeStyle 
{

}

/* ALL ELEMENTS */

.NodeStyle 
{

}

.ParentNodeStyle 
{
    /*background:yellow;*/
}

.SelectedNodeStyle { font-weight: bold; color:#6799D1; display:block; padding:2px 0 2px 3px; }

所以我看到（带有萤火虫）我选择的节点出现了 Visited style ， node style ， leaf style 但不是 Selected node style :(

例如，如何修复这个 HTML/CSS/ASP 以使选定的节点变为粗体和蓝色？

谢谢。

添加：像这里一样添加节点：

            foreach(c : Category in rootCategories)
            {
                mutable newNode : TreeNode = TreeNode(c.Title, c.Id);
                newNode.SelectAction = TreeNodeSelectAction.SelectExpand;
                newNode.NavigateUrl = "Items.aspx?catId=" + c.Id.ToString() + "&lvl=0";

解决了...

categoryId : string = Request.QueryString["catId"];
n : TreeNode = findNode(categoryId, TreeViewCategories.Nodes, lvl);
n.Selected = true;

Answer 1

css:

    .SelectedNodeStyle {
    padding-left: 3px!important;
    padding-right: 3px!important;
    font-size: 110%;
    background: none !important;
}

asp.net:

<asp:TreeView runat="server" SelectedNodeStyle-CssClass="SelectedNodeStyle" ...

Answer 2

我注意到<NodeStyle> 属性优先于<SelectedNodeStyle> 属性。

例如，我有：

<NodeStyle Forecolor="Black"/>
<SelectedStyle Forecolor="Blue"/>
<Nodes>
<asp:TreeNode Text="RootSub1" Value="1" Selected="true"/>
<asp:TreeNode Text="RootSub2" Value="2" Selected="false"/>
</Nodes>

我的Rootsub1 和RootSub2 都以黑色前景色出现。然后我从 NodeStyle 属性中删除了 ForeColor="Black" 属性，violà，样式有所不同。

我的建议是解决这个缺陷，避免重复属性，我会继续使用这种方法，直到找到更好的解决方案，但到目前为止，网络上的每个人都在挣扎。

Answer 3

asp:TreeNode 上的 SelectAction 属性是 Expand 将其更改为 SelectExpand强>。

这可确保有回发并且树控件被重绘以应用您在树视图上设置的选定节点样式

<asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
        max-height: 500px;" LineImagesFolder="~/TreeLineImages" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle"
        CssClass="TreeView" NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle"
        RootNodeStyle-CssClass="RootNodeStyle" SelectedNodeStyle-CssClass="SelectedNodeStyle"
        LeafNodeStyle-Width="100%" NodeStyle-Width="100%" ParentNodeStyle-Width="100%"
        RootNodeStyle-Width="100%" Font-Size="12pt">
        <Nodes>
            <asp:TreeNode Text="All Items" SelectAction="SelectExpand" Value="All Items">
                <asp:TreeNode Text="All Items" SelectAction="SelectExpand" Value="All Items" />
                <asp:TreeNode Text="All Items" SelectAction="SelectExpand" Value="All Items" />
                <asp:TreeNode Text="All Items" SelectAction="SelectExpand" Value="All Items" />
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>

Answer 4

在你的CSS，替换

a.SelectedNodeStyle { background:#6799D1; color:#6799D1; display:block; padding:2px 0 2px 3px; }

与

.SelectedNodeStyle { font-weight: bold; color:#6799D1; display:block; padding:2px 0 2px 3px; }

在你的ASPX 中，替换

SelectedNodeStyle-ForeColor="RoyalBlue"

与

SelectedNodeStyle-CssClass="SelectedNodeStyle"