tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
747
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 07.07.09 09:25 #1
    Avatar von raikkonentk
    raikkonentk raikkonentk ist offline Mitglied Silber
    Registriert seit
    Apr 2004
    Beiträge
    77
    Hallo,

    ich arbeite an der Verbesserung eines internen Ticketsystems, im Moment speziell an der Auswahl der Empfänger der Tickets.

    Struktur der Auswahl aussehen soll:

    |- Liste 1
    |--- Firma 1
    |------ Email 1 von Firma 1
    |------ Email 2 von Firma 1
    |------ Email n von Firma 1
    |--- Firma 2
    |------ Email 1 von Firma 2
    |------ Email 2 von Firma 2
    |------ Email n von Firma 2
    |--- Firma n
    |------ Email n von Firma n
    |- Liste 2
    |--- Firma 1
    |------ Email 1 von Firma 1
    |------ Email 2 von Firma 1
    |------ Email n von Firma 1
    |--- Firma 3
    |------ Email 1 von Firma 3
    |------ Email 2 von Firma 3
    |------ Email n von Firma 3
    |--- Firma n
    |------ Email n von Firma n
    |- Liste n
    |--- Firma n
    |------ Email n von Firma n

    Beim Laden der Seite sieht man zunächst nur die Namen aller Listen, vor den Namen befindet sich ein "+" zum Aufklappen der Listen und eine Checkbox um alle untergeordneten Elemente zu selektieren.

    Das Gleiche gilt auch für die Firmen, die werden beim Aufklappen der jeweiligen Liste sichtbar, haben ein "+" vor dem Namen zum Aufklappen, so dass man die Emailadressen sieht und es befindet sich eine Checkbox vor dem Firmemnamen um alle hinterlegten Emailadressen auf einmal zu selektieren.

    Und wenn die Firma "aufgeklappt" ist, kann man natürlich die einzelnen Emailadressen an- und abwählen.

    Beispielcode für eine Liste
    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

    <ul>
    <li>
        <strong><input type="checkbox" onClick="CheckboxenAktivieren('id_der_liste');" value="1" style="width:auto;"/>Liste n</strong>
        <ul name="id_der_liste">
            <li>
                <input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma 1
                <ul name="id_der_firma">
                    <li>
                        <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma 2
                <ul name="id_der_firma">
                    <li>
                        <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" onClick="CheckboxenAktivieren('id_der_firma');" style="width:auto;"/>Firma n
                <ul name="id_der_firma">
                    <li>
                        <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

    Das eigentliche Problem ist, dass mir nicht klar ist, wie ich bei der Selektion zwischen Listen und Firmen unterscheiden kann.

    Die ID's von Firmen, Listen und Emailadressen können im ungünstigsten Fall alle gleich sein, weil die aus drei verschiedenen Tabellen kommen.

    Außerdem kann eine Firma mit verschiedenen Empfängern auch in mehreren Listen auftauchen, so dass ich damit auch schon Probleme hatte.

    Am besten wäre es, wenn ich sagen könnte, ich habe <ul> Liste n/Firma n mit dem Namen oder der ID "x" und dann kann ich alle childNodes samt der enthaltenen Checkboxen aktivieren und deaktivieren. Nur leider hat das nicht funktioniert.

    Die Funktion "CheckboxenAktivieren(id)" sieht stark vereinfacht, im Moment noch so aus:
    (passt glaube ich mittlerweile schon nicht mehr so richtig zu dem obenstehenden HTML-Code)
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    function CheckboxenAktivieren(field)
{
    for(i = 0; i < document.getElementsByTagName("input").length; i++)
    {
        var box = document.getElementsByTagName("input")[i];
        if(box == field)
        {
            document.getElementsByTagName("input")[i].checked = true;   
        }
    }
}

    Kann mir jemand anhand des Codes einen Hinweis geben?
    Ich bin auch für komplett andere Denkansätze offen

    Danke schonmal,
    Grüße
    Geändert von raikkonentk (07.07.09 um 09:44 Uhr)
     
    STS Altiris Notification Server 6 / STS Altiris Deployment Solution 6.9 /SMP 7&7.1 / Novell CLE/CLP/CLA/DCTS
    HP APC - Designing Virtualization Solutions, HP APP - HP Enterprise Solutions, Designing Commercial SMB-Solutions
    Zitieren Zitieren
  2. 07.07.09 23:02 #2
    Avatar von SCIPIO-AEMILIANUS
    SCIPIO-AEMILIANUS SCIPIO-AEMILIANUS ist offline aka DonMahallem
    Registriert seit
    Mar 2007
    Ort
    Saxonburg(Pa)
    Beiträge
    375
    Man hofft man hats richtig verstanden:
    HTML-Code:
    <html>
    <head>
        <script type="text/javascript">
            function ActivateCheckbox(el) {
                var inp = el.parentNode.getElementsByTagName("input");
                for (i = 0; i < inp.length; i++) {
                    if (inp[i].getAttribute("type") == "checkbox") {
                        inp[i].checked = el.checked;
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <input type="checkbox" onclick="ActivateCheckbox(this);" value="1" style="width:auto;"/><strong>Liste n</strong>
                <ul name="id_der_liste">
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma 1
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                            </li>
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma 2
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                            </li>
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                            </li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" onclick="ActivateCheckbox(this);" style="width:auto;"/>Firma n
                        <ul name="id_der_firma">
                            <li>
                                <input type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
    Das ist mir jetzt so ausm Stand dazu eingefallen. Man kann aber immer noch weiter optimieren denk ich mal.
     
    MFG Scipio
    Ein Danke für hilfreiche Antworten ist gern gesehen.
    Zitieren Zitieren
  3. 07.07.09 23:06 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    ich hatte mal ähnliche Anforderungen. Das Script habe ich mal an deine Problembeschreibung angepasst.

    Das Ganze beruht darauf, dass die Liste in jeder Ebene immer die gleiche Struktur aufweist. Damit ist es möglich, sich mit den DOM-Methoden durch die Struktur zu bewegen, ohne IDs zu kennen.

    Das Script berücksichtigt neben dem Abwärtsmarkieren auch das Rückwärtsdemarkieren, falls eine untergeordnete Checkbox abgewählt wurde.

    Wichtig: es muss der Listenwurzel (=oberstes UL-Element) eine Klasse zugewiesen werden. Der Klassenname muss im Script auch in der Variablen strTopClass abgelegt werden, da dies das Abbruchkriterium beim Rückwärtsabwählen ist.

    Ich habe den Quellcode weitestgehend kommentiert, so dass du dich zurechtfinden solltest.
    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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Klasse des "obersten" UL-Elements (=Listenwurzel)
var strTopClass = "clListe"
 
// Nächste Ebene ein-/ausblenden
function toggleList(objThis){
  var objP = objThis.parentNode;
  while(objP.nodeName.toUpperCase() != "LI"){
    objP = objP.parentNode;
  }
 
  var objHelp = objP.getElementsByTagName("ul")[0];
  objHelp.style.display = (objHelp.style.display == "none")? "block" : "none";
}
 
// Checkboxen an-/abwählen
function checkBoxes(objThis){
  // CB an- oder abgewählt (true/false)
  var blnChecked = objThis.checked;
  // Elternknoten des aufrufenden Elements
  var objHelp = objThis.parentNode;
 
  // Solange das nächste übergeordente LI-Element nicht gefunden wurde
  while(objHelp.nodeName.toUpperCase() != "LI"){
    // Nächster Elternknoten
    objHelp = objHelp.parentNode;
  }
 
  // Array aller untergeordneter Input-Elemente
  var arrInput = objHelp.getElementsByTagName("input");
  var intLen = arrInput.length;
 
  // Alle untergeordneten Inputelemente durchlaufen
  for(var i=0; i<intLen; i++){
    // Falls es sich um eine CB handelt -> an-/abwählen
    if(arrInput[i].type = "checkbox"){
      arrInput[i].checked = blnChecked;
    }
  }
 
  // Falls die auslösende CB abgewählt wurde -> übergeordnete rückwärts ebenfalls abwählen
  if(!blnChecked)
    uncheckBoxes(objThis);
}
 
// Wählt zu einer auslösenden CB alle übergeordneten CBs rückwärts ab
function uncheckBoxes(objThis){
  var blnChecked = objThis.checked;
  if(blnChecked) return;
 
  var objHelp = objThis.parentNode;
 
  // Solange die Listenwurzel noch nicht erreicht wurde
  while(objHelp.className != strTopClass){
    // Falls es sich um ein LI-Element handelt -> erste CB ermitteln und abwählen
    if(objHelp.nodeName.toUpperCase() == "LI"){
      var objIn = objHelp.getElementsByTagName("input")[0];
      if(objIn.type == "checkbox"){
        objIn.checked = blnChecked;
      }
    }
    // Nächster Elternknoten
    objHelp = objHelp.parentNode;
  }
}
</script>
</head>
<body>
 
<ul class="clListe">
    <li>
        <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><strong><input onclick="checkBoxes(this);" type="checkbox" value="1" style="width:auto;"/>Liste n-1</strong>
        <ul name="id_der_liste" style="display: none;">
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 1
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 2
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma n
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
                    </li>
                </ul>
            </li>
        </ul>
    </li>
 
    <li>
        <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><strong><input onclick="checkBoxes(this);" type="checkbox" value="1" style="width:auto;"/>Liste n</strong>
        <ul name="id_der_liste" style="display: none;">
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 1
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma 2
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_1" style="width:auto;"/>Emailadresse 1
                    </li>
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_2" style="width:auto;"/>Emailadresse 2
                    </li>
                </ul>
            </li>
            <li>
                <img onclick="toggleList(this);" src="../bilder/plus.gif" width="5" height="5" border="1" alt=""><input onclick="checkBoxes(this);" type="checkbox" style="width:auto;"/>Firma n
                <ul name="id_der_firma" style="display: none;">
                    <li>
                        <input onclick="uncheckBoxes(this);" type="checkbox" name="empfaenger[]" value="id_von_emailadresse_n" style="width:auto;"/>Emailadresse n
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

    Vielleicht hilft dir das weiter.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 07.07.09 23:34 #4
    Avatar von raikkonentk
    raikkonentk raikkonentk ist offline Mitglied Silber
    Registriert seit
    Apr 2004
    Beiträge
    77
    hat bestens funktioniert. danke
    Geändert von raikkonentk (09.07.09 um 09:51 Uhr)
     
    STS Altiris Notification Server 6 / STS Altiris Deployment Solution 6.9 /SMP 7&7.1 / Novell CLE/CLP/CLA/DCTS
    HP APC - Designing Virtualization Solutions, HP APP - HP Enterprise Solutions, Designing Commercial SMB-Solutions
    Zitieren Zitieren
« ul-Liste dynamisch erweitern | Google Maps + Marker + Addresse »

Ähnliche Themen

  1. JList elemente mir checkbox / selektion deselektion
    Von martinsig im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 06.08.07, 15:33
  2. <tr>-Farbe bei checkbox-Aktivierung ändern - Problem bei Mehrfach-Selektion
    Von qsrs im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 30.06.06, 11:42
  3. Checkbox Hilfe
    Von gato im Forum Visual Basic 6.0
    Antworten: 10
    Letzter Beitrag: 26.10.05, 01:19
  4. Hilfe! Dringendes Checkbox Problem
    Von conaito im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 20.02.05, 19:07
  5. [Hilfe] AGB mit Checkbox und Button aber wie ?
    Von dimein im Forum PHP
    Antworten: 3
    Letzter Beitrag: 05.10.04, 08:55

Stichworte