Filtre dynamique sur TreeView

**youness78** · 21/05/2014, 16h18

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

**SpaceFrog** · 21/05/2014, 16h25

sans voir le code html du treeview ???

ça relève plus de la divination !

tu utilises bien jquery ?

**youness78** · 21/05/2014, 17h17

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

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

**SpaceFrog** · 22/05/2014, 08h28

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

**youness78** · 23/05/2014, 10h48

Bonjour

Voila le code aspx de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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()
                }
            }
        }
    });
}

**Bovino** · 23/05/2014, 14h14

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.

**youness78** · 23/05/2014, 14h25

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 26/05/2014, 11h58

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

Filtre dynamique sur TreeView

jQuery

Discussions similaires

Partager

Partager