用于 asp.net 树视图的 Jquery

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