javascript - 用于 jquery 的 ASP.NET 树视图操作 api？

Question

在我的 asp.net 解决方案中，我有一个 asp.net 树视图，我想对其进行一些客户端操作。我基本上是在 jQuery 中寻找一种方法来做

遍历所有根节点
遍历给定节点的所有子节点
获取给定节点的文本
获取给定节点的值
在给定节点的文本周围添加蓝色突出显示
展开/折叠给定节点

我也不想使用任何其他类型的 jQuery 树视图插件。有谁知道是否有人做过一个项目来做到这一点？或者可以提供链接或代码来做到这一点？

谢谢。

编辑：

以下是 HTML 结构的示例：

在此处输入图像描述

<DIV id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,0,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 1. A" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt0 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,0,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes)" href="javascript:void(0);" target=_self>1. A</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt1 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt1');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/1. A/5.5 Quick Reference Guide.pdf","850","1100", null);' target=_self>1. 5.5 Quick Reference Guide</A></TD>
                </TR>
            </TBODY>
        </TABLE>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt2 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt2');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/1. A/5.6 Upgrade.pdf","850","1100", null);' target=_self>2. 5.6 Upgrade</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,3,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 2. B" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt3 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,3,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes)" href="javascript:void(0);" target=_self>2. B</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt4 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt4');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/2. B/8830 Downloading PodCasts.pdf","850","1100", null);' target=_self>1. 8830 Downloading PodCasts</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,5,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 3. C" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt5 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,5,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes)" href="javascript:void(0);" target=_self>3. C</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt6 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt6');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/3. C/8830 International Roaming.pdf","850","1100", null);' target=_self>1. 8830 International Roaming</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
</DIV>

score 1 · Accepted Answer

好吧，正如我提到的，我不知道任何链接。那 HTML 有点凝灰岩，我假设是 ASP 默认设计。自从我使用 ASP 以来已经有一段时间了。任何人。根据您的问题，我做了一个示例，在“每件商品的需求”细节中有很多评论。我给出了一个小例子，说明如何分别执行每项任务以及一些其他有用的信息。更多信息，请务必经常查看http://api.jquery.com/

例子

//  the following will get the main tree view wrapper, unless you change your ID names of course
//  by useing `.not('[id*=Nodes]')`, we can eliminate all div's having "my_treeview" without elementating the parent
//  you could also use `.first()` and get the same result
//  simply showing a couple different ways jQuery offers "selection" of elements
var treeView = $('div[id*=my_treeview]').not('[id*=Nodes]');
clog(treeView, 'Tree View Element');

//  ***  iterate through all root nodes  ***
treeView.children('table').each(function(i) { // `i` = index number (0 based)
    var node = $(this),  //  get current node
        nodeSub = $(this).next("div");  //  get sub nodes if avaialbe, if not, this will be empty jQuery Object
    clog([node, nodeSub], 'Node && Sub');
})

//  ***  iterate through all sub nodes given a node  ***
var given = treeView.children('table').first(); // in this case, just grabs first node, since it has multiple subs
clog(given, 'Given Sub Node');
given.next('div').children('table').each(function(i) {
    var subNode = $(this);
    clog(subNode, 'Sub Nodes of First Node');
});

//  ***  get the text of the given node  ***
//  this selector based on given HTML example of all node text being in an A tag having an
//  ID that contains the phrase `my_treeviewt`
//  i would suggest using class names like ('node-text') instead
treeView.find('a[id*=my_treeviewt]').each(function(i) {
    clog($(this).text(), 'Node Text by Each Node && Sub Node'); 
});

//  ***  get the value of the given node  ***
//  ??? UNSURE of your intent with this one ???

//  ***  add a blue highlight around the text of the given node  ***
given.find("a").last().css({ 'background-color': '#2AF', 'color': '#FFA' })
//  here i change the css of an element by hand using traditional CSS names
//  jQuery does include some shortcut options, my suggestiong would be to make a 'highglight' class,
//  then simply use `addClass('highlight')` or `removeClass('highligh')`


//  ***  expand/collapse given node  ***
//  selector based on layout, but again, I would suggest setting up class names to use like
//  `.node` and/or '.node.sub-node'
$('div > table a').attr('onclick', ''); // first i remove all the set onclicks for now, they cause their own interference
$(document).on('click', 'div > table a', function(e) {
    e.preventDefault();  //  stop href link from working on an A tag
    var parent = $(this).closest('table');  //  finds first parent table, aka, the "node"
    if (parent.next('div').length) {    //  will return false if there is not a sub node
        var sub = parent.next('div');
        if (sub.is(':visible')) {   //  note, this does not just check 'visible' css state, it also checks if 'display' css is set or if it is 'none'
            sub.hide();
        }
        else {
            sub.show();
        }
    }
})

javascript - 用于 jquery 的 ASP.NET 树视图操作 api？

1 回答 1

例子

Related

Reference