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