TreeView - 所选节点不显示所选节点样式

时间:2010-08-11 05:47:59

标签: asp.net html css

我的代码是:

            <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; }

所以我看到(使用firebug)我选择的节点出现了访问样式,节点样式,叶子样式但没有选择节点样式:(

如何修复此HTML / CSS / ASP以使选定节点为Bold和Blue?

谢谢。

补充:添加如下节点:

            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;

4 个答案:

答案 0 :(得分:2)

asp:TreeNode 上的 SelectAction 属性展开将其更改为 SelectExpand

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

<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>

答案 1 :(得分:1)

我注意到<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>

我的Rootsub1RootSub2都出现了黑色的前色。然后,我从NodeStyle属性中移除了ForeColor="Black"属性,而violà则在样式上有所不同。

我的建议是解决这个漏洞,避免重复的属性,我会继续使用这种方法,直到我找到一个更好的解决方案,但到目前为止,网上的每个人都在捣乱。

答案 2 :(得分:0)

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"

答案 3 :(得分:0)

的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" ...