Jquery for asp.net treeview

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

我使用带有复选框的树视图。选中复选框，单击节点将展开。

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您的问题。:)