jQuery的asp.net树视图

Question

我正在使用asp.net树视图控件。 我想为.net树视图控件添加jquery样式。 但是我做不到。 请帮助我解决此问题。 我需要jquery来平滑扩展和折叠...

这是我的设计代码。 我可以在asp.net控件中引用jQuery的地方

 <asp:TreeView ID="MyTree" PathSeparator="|" ExpandDepth="1" runat="server" NodeIndent="15"
                    ShowLines="true">
                    <RootNodeStyle ImageUrl="~/images/folder-video.png" />
                    <ParentNodeStyle ImageUrl="~/images/root.png" />
                    <NodeStyle ImageUrl="~/images/node.png" />
                    <LeafNodeStyle ImageUrl="~/images/leaf_video.png" />
                    <SelectedNodeStyle BackColor="#B5B5B5"></SelectedNodeStyle>
                    <NodeStyle VerticalPadding="2" Font-Names="Tahoma" Font-Size="10pt" HorizontalPadding="2"
                        ForeColor="#000000"></NodeStyle>
                    <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA"></HoverNodeStyle>
                    <Nodes>
                        <asp:TreeNode Text="Sunbusiness Solution" PopulateOnDemand="True" Value="Demos" />
                    </Nodes>
                </asp:TreeView> 

Answer 1

我将Treeview与复选框一起使用。 在复选框上，单击节点将展开。

function InitTreeViewClick(){    $('#" + treevew.ClientID + @" :input').each(function(){  $(this).unbind(); var   a=this.nextSibling; if(a.nodeName=='A')  $(this).bind('click',   function(){a.click();});});}
}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeViewClick);

您可以修改a.click（）例如：setTimeout（function（）{a.click（）;}，3000）;

就我而言，这很完美。

和cs文件代码：

protected void Page_PreRender(object sender, EventArgs e)
    {
if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview"))
        {
            string script = @"Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeViewClick);

                          function InitTreeViewClick(){    $('#" + treevew.ClientID + @" :input').each(function(){ $(this).unbind(); var a=this.nextSibling; if(a.nodeName=='A')  $(this).bind('click',  function(){a.click();});});} ";
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true);
        }
}

您可以找到所有链接

$('#" + treevew.ClientID + @" ).find('a').each( function(){$(this).click(
// your logic 
);});

要么

 $('#" + treevew.ClientID + @" ).find('a').each(function(){$(this).click(function(){$(this).parentsUntil('table').parent('table').next().css('background','red').slideToggle("slow");});});

单击父节点时，此代码将缓慢折叠并使用子项扩展div，此时子节点的背景将变为红色。

最终解决方案（我也将其应用到我的项目中，因为它看起来不错）。 ASCX文件代码：

<asp:TreeView ID="treeview" runat="server" ForeColor="Black" CssClass="inputs" ExpandDepth="0" MaxDataBindDepth="2"
    EnableClientScript="true" ShowCheckBoxes="All" AutoGenerateDataBindings="false"  ShowLines="false" 
     ShowExpandCollapse="false">

</asp:TreeView>

和cs文件代码：

 if (!this.Page.ClientScript.IsStartupScriptRegistered("treeview")) { string script = @"function InitTreeView(){$('#" + treeview.ClientID + @"' ).find('a').each(function(){$(this).unbind().removeAttr('onclick').removeAttr('href').click(function(){$(this).parentsUntil('table‌​‌​').parent('table').next().slideToggle('slow');});});} Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTreeView);"; ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "treeview", script, true); }

我从标签锚中使用__DoPostBack移除了href属性，因为我只需要保存复选框值。 非常感谢用户1804985的提问。 :)