Filtre dynamique sur TreeView

Bonjour,

J'aimerais mettre en place un filtre sur les noeuds d'un TreeView sachant que j'implémente un contrôle TreeView ASP.NET. Le principe étant de déplier ou replier une branche de l'arbre en fonction du filtre.

Pouvez-vous m'aider à implémenter cette fonctionnalité ?

Merci

sans voir le code html du treeview ???

ça relève plus de la divination !

tu utilises bien jquery ?

En fait ceci est la version WPF de ce que je souhaite faire

http://www.developpez.net/forums/d99...ction-d-texte/

ET ?
On ne vois toujous pas le code html du treeview ... :(

Bonjour

Voila le code aspx de ma page :

Code:

1
2
3
4
5
6
7
8
9
10
            <div class="PartieTreeview">     
                <asp:Panel runat="server" ScrollBars="Auto" CssClass="BordureTreeview">
                    <div class="FiltreTreeview">
                        <asp:TextBox ID="filtre_treeview" onblur="FiltreTreeview()" onkeyup="FiltreTreeview()" runat="server" />
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TBWE_filter" runat="server" TargetControlID="filtre_treeview" WatermarkText="<%$ Resources:ResourceEC,Ex_filter %>" WatermarkCssClass="expressionWaterMark"/>
                    </div>
                    <asp:TreeView ID="TreeViewService" runat="server" ShowLines="True" ShowCheckBoxes="All" />
                </asp:Panel>
                ...
                </div>

et le script jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function FiltreTreeview() {
    // Récupération de la valeur saisie dans la TextBox du filtre
    var value = $("#ctl00_Main_filtre_treeview").val();
    //return;
 
    // Parcours du Treeview
    $("[id^=ctl00_Main_TreeViewServicet]").each(function () {
        var Id = $(this).attr("id"); //"ctl00_Main_TreeViewServicet0" si je tape DEMO
        var text = $(this).text(); //" DEMO (Démo Espace Client) "
        var child = $(this).children();
        for (i = 0; i < child.length; i++) {
            var childId = child[i].id; //"Client2441"
            if (childId.indexOf("Client") == -1) {
                if (text.indexOf(value) == -1) {
                    $(this).parent().parent().parent().parent().hide(); // Remonte jusqu'à la balise <table> et masque le noeud via le hide()
                }
            }
        }
    });
}

Citation:

Voila le code aspx

Merci de lire et appliquer Important : Les règles incontournables d'utilisation de ce forum ! On se moque du code aspx ici, c'est le code HTML généré qui est utile.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div id="ctl00_Main_TreeViewService">
    <table cellpadding="0" cellspacing="0" style="border-width:0;">
        <tbody><tr>
            <td><a id="ctl00_Main_TreeViewServicen0" href="javascript:TreeView_ToggleNode(ctl00_Main_TreeViewService_Data,0,document.getElementById('ctl00_Main_TreeViewServicen0'),'r',document.getElementById('ctl00_Main_TreeViewServicen0Nodes'))"><img src="/WebResource.axd?d=mP1W3h90905mKB3x1JK8BZXi5NocLROJObS3_zDP7dQkxu_al5g0q1ywZMC_q-JgIOH2KvDj7j1iGC8b97bgtP9jQG73ESw9ADmF0RkpQxjuZGrJ0&amp;t=635084105457020723" alt="Réduire <span id='Client2441'> DEMO (Démo Espace Client) </span>" style="border-width:0;"></a></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen0CheckBox" id="ctl00_Main_TreeViewServicen0CheckBox" onclick="javascript:CliqueSurClient(0,2441, 9, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurClient(0,2441, 9, 'Mode1');" id="ctl00_Main_TreeViewServicet0"><span id="Client2441"> DEMO (Démo Espace Client) </span></a></td>
        </tr>
        </tbody></table><div id="ctl00_Main_TreeViewServicen0Nodes" style="display:block;">
        <table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen1CheckBox" id="ctl00_Main_TreeViewServicen1CheckBox" onclick="javascript:CliqueSurService(1,14004, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(1,14004, 'Mode1');" id="ctl00_Main_TreeViewServicet1"><span id="Co2441SeID14004"> 01 (COMPTES)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen2CheckBox" id="ctl00_Main_TreeViewServicen2CheckBox" onclick="javascript:CliqueSurService(2,14005, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(2,14005, 'Mode1');" id="ctl00_Main_TreeViewServicet2"><span id="Co2441SeID14005"> 02 (EXPERTISE)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen3CheckBox" id="ctl00_Main_TreeViewServicen3CheckBox" onclick="javascript:CliqueSurService(3,14006, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(3,14006, 'Mode1');" id="ctl00_Main_TreeViewServicet3"><span id="Co2441SeID14006"> 03 (COM)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen4CheckBox" id="ctl00_Main_TreeViewServicen4CheckBox" onclick="javascript:CliqueSurService(4,14009, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(4,14009, 'Mode1');" id="ctl00_Main_TreeViewServicet4"><span id="Co2441SeID14009"> 04 (NOTES DE FRAIS)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen5CheckBox" id="ctl00_Main_TreeViewServicen5CheckBox" onclick="javascript:CliqueSurService(5,14008, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(5,14008, 'Mode1');" id="ctl00_Main_TreeViewServicet5"><span id="Co2441SeID14008"> 05 (DOSSIERS PRETS)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen6CheckBox" id="ctl00_Main_TreeViewServicen6CheckBox" onclick="javascript:CliqueSurService(6,10000004745, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(6,10000004745, 'Mode1');" id="ctl00_Main_TreeViewServicet6"><span id="Co2441SeID10000004745"> 06 (BETA)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen7CheckBox" id="ctl00_Main_TreeViewServicen7CheckBox" onclick="javascript:CliqueSurService(7,14007, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(7,14007, 'Mode1');" id="ctl00_Main_TreeViewServicet7"><span id="Co2441SeID14007"> DOSS (DOSSIERS)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen8CheckBox" id="ctl00_Main_TreeViewServicen8CheckBox" onclick="javascript:CliqueSurService(8,10100005196, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(8,10100005196, 'Mode1');" id="ctl00_Main_TreeViewServicet8"><span id="Co2441SeID10100005196"> PO RH (SPECIMEN)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"><img src="/WebResource.axd?d=UKlvmPtiMoS1-pWcHg6zS2t2Hss2SRxkJJNghZ1rKGre46WqDgHXU5kNXNh7ddYj2yZf3CPrsAytDgftvtNBmDkXtOOrrEXl3Hu9ZDhTsOsV4VOi0&amp;t=635084105457020723" alt=""></div></td><td><img src="/WebResource.axd?d=y0-30spj1k-qFIVx5_AJj0q_qsCkVOzbndTgSYEZt_XRN5Dvr8ZWEtk_oODEkBRTV_hfbPx6OmyDpd6yoo0anL5Tko0vtPlKyfOntcfEPo9zFe1n0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen9CheckBox" id="ctl00_Main_TreeViewServicen9CheckBox" onclick="javascript:CliqueSurService(9,10200000655, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(9,10200000655, 'Mode1');" id="ctl00_Main_TreeViewServicet9"><span id="Co2441SeID10200000655"> SERL (SERL)</span></a></td>
            </tr>
            </tbody></table>
    </div><table cellpadding="0" cellspacing="0" style="border-width:0;">
        <tbody><tr>
            <td><a id="ctl00_Main_TreeViewServicen10" href="javascript:TreeView_ToggleNode(ctl00_Main_TreeViewService_Data,10,document.getElementById('ctl00_Main_TreeViewServicen10'),'l',document.getElementById('ctl00_Main_TreeViewServicen10Nodes'))"><img src="/WebResource.axd?d=fSnWKIJyxmQtby2397d8poErJY37RKpO_5zFMGYRgwXkH9wWWE3CXiUax9-3ca0astn1KNua3fT0VvGVJeYCQafFoPDNmE91niDU2R1o-d4U-gHj0&amp;t=635084105457020723" alt="Développer <span id='Client3505'> IMMO (IMMO) </span>" style="border-width:0;"></a></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen10CheckBox" id="ctl00_Main_TreeViewServicen10CheckBox" onclick="javascript:CliqueSurClient(10,3505, 4, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurClient(10,3505, 4, 'Mode1');" id="ctl00_Main_TreeViewServicet10"><span id="Client3505"> IMMO (IMMO) </span></a></td>
        </tr>
        </tbody></table><div id="ctl00_Main_TreeViewServicen10Nodes" style="display:none;">
        <table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen11CheckBox" id="ctl00_Main_TreeViewServicen11CheckBox" checked="checked" onclick="javascript:CliqueSurService(11,21452, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(11,21452, 'Mode1');" id="ctl00_Main_TreeViewServicet11"><span id="Co3505SeID21452"> CAB (CAB)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen12CheckBox" id="ctl00_Main_TreeViewServicen12CheckBox" onclick="javascript:CliqueSurService(12,21451, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(12,21451, 'Mode1');" id="ctl00_Main_TreeViewServicet12"><span id="Co3505SeID21451"> COPRO (COPRO)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=1v5sxlOUvXdWC4M1MCagngM7uB0c4nnGyKexQ5ErzakQHgn4mMzEECexkjqWhhz0CH073HkGjcvSuBQdIA1lRqOws99WH1D_HZwnFmY7eHT7KD4E0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen13CheckBox" id="ctl00_Main_TreeViewServicen13CheckBox" onclick="javascript:CliqueSurService(13,21453, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(13,21453, 'Mode1');" id="ctl00_Main_TreeViewServicet13"><span id="Co3505SeID21453"> GEST1 (GEST1)</span></a></td>
            </tr>
            </tbody></table><table cellpadding="0" cellspacing="0" style="border-width:0;">
            <tbody><tr>
                <td><div style="width:20px;height:1px"></div></td><td><img src="/WebResource.axd?d=y0-30spj1k-qFIVx5_AJj0q_qsCkVOzbndTgSYEZt_XRN5Dvr8ZWEtk_oODEkBRTV_hfbPx6OmyDpd6yoo0anL5Tko0vtPlKyfOntcfEPo9zFe1n0&amp;t=635084105457020723" alt=""></td><td style="white-space:nowrap;"><input type="checkbox" name="ctl00_Main_TreeViewServicen14CheckBox" id="ctl00_Main_TreeViewServicen14CheckBox" onclick="javascript:CliqueSurService(14,21450, 'Mode2');"><a class="ctl00_Main_TreeViewService_0" href="javascript:CliqueSurService(14,21450, 'Mode1');" id="ctl00_Main_TreeViewServicet14"><span id="Co3505SeID21450"> IRIS (IRIS)</span></a></td>
            </tr>
            </tbody></table>
    </div>
</div>

:vomi:

oups désolé mais devant un tel code d'empilement de balise table ...