Listenfeld manipulieren (hoch/runterschieben von Einträgen, Gruppen)

Sir Robin

Erfahrenes Mitglied
Tachchen,

ich häng jetzt schon ne ganze Weile an einem Code, mit dem ich Listenfelder manipulieren kann. Manipulieren heißt in dem Fall Einträge nach oben bzw. unten verschieben. Das an sich ist ja kein großes Problem, und das hab ich auch schon gelöst. Ein viel größeres Problem ist, das es Gruppen gibt, und die auch verschoben werden sollen.

Also es sieht praktisch so aus:

Gruppe 1
--Eintrag 1.1
--Eintrag 1.2
--Eintrag 1.3
Gruppe 2
--Eintrag 2.1
--Eintrag 2.2
Gruppe 3
--Eintrag 3.1
--Eintrag 3.2
--Eintrag 3.3
--Eintrag 3.4

...problemlos klappt es, wenn alle Gruppen gleich groß sind, sprich die selbe Anzahl von Einträgen haben. Sobald die sich jedoch unterscheiden, dann kommt das Script ab und zu mal durcheinander. Leider hab ich überhaupt keinen Ansatz bisher gefunden, bis auf ein Workaround über Arrays, was ich allerdings ungern verwirklichen will...

die HTML mit JavaScript (wird bisschen viel Code):

PHP:
<script language="JavaScript">
<!--
//Festlegen der Anzahl der Einträge für die jeweilige Gruppe
eintrag = new Array();
eintrag[1] = 3;
eintrag[2] = 2;
eintrag[3] = 4;

//Funktion zum Hochschieben von Einträgen (sowohl Gruppen, als auch einzelne Beiträge)
function up(){    
	//Feldnamen speichern
	feld = document.formular.liste.options;
	
	//Alten Index festlegen
	old_index = feld.selectedIndex;
	
	//Fehler abfangen, wenn man nicht mehr höher schieben kann
	if(old_index == 0) {
	    return false;
	}
	
	//Nächst-Höheren Kursindex herausfinden
	for(i = old_index - 1; i >= 0; i--) {
	   anfang = feld[i].text.substr(0,2);
	   if(anfang != '--') {
	       new_index = i;
	   	   break;
	   }
	}
	
	//Checken ob nur Eintrag oder ganze Gruppe verschoben werden soll
	teil = feld[old_index].text.substr(0,2);
	//Nur Eintrag
	if(teil == '--') {
	    //Checken ob man noch weiter nach oben schieben kann
	    if(old_index - 1 == new_index) {
		    return false;
		} else {
		    new_index = old_index - 1;
			//Alte und neue Inhalte zwischenspeichern
			old_content = feld[old_index].text;
			old_value   = feld[old_index].value;
			new_content = feld[new_index].text;
			new_value   = feld[new_index].value;
			//Werte tauschen
			feld[old_index].value = new_value;
			feld[old_index].text  = new_content;
			feld[new_index].value = old_value;
			feld[new_index].text  = old_content;
			//Fokusieren
			feld.selectedIndex    = new_index;
		}
	//Gruppe verschieben	
	} else {
		//Anzahl aus Array bekommen
		anzahl = eintrag[feld[old_index].value];
		
		//Und los, verschieben der Einträge
		for(i = 0; i < anzahl; i++) {
			//Alte und neue Inhalte zwischenspeichern
			old_content = feld[old_index].text;
			old_value   = feld[old_index].value;
			new_content = feld[new_index].text;
			new_value   = feld[new_index].value;
			//Werte tauschen
			feld[old_index].value = new_value;
			feld[old_index].text  = new_content;
			feld[new_index].value = old_value;
			feld[new_index].text  = old_content;
	        //Zähler erhöhen		
			new_index++;
			old_index++;		
		}
		//Fokussieren
		feld.selectedIndex = new_index - i;	
	}
}
-->
</script>

//...

<form name="formular">
  <select name="liste" size="12">
    <option value="1">Gruppe 1</option>
    <option value="1">-- Eintrag 1.1</option>
    <option value="2">-- Eintrag 1.2</option>
    <option value="3">-- Eintrag 1.3</option>
    <option value="2">Gruppe 2</option>
    <option value="3">-- Eintrag 2.1</option>
    <option value="4">-- Eintrag 2.2</option>
    <option value="3">Gruppe 3</option>
    <option value="5">-- Eintrag 3.1</option>
    <option value="6">-- Eintrag 3.2</option>
    <option value="7">-- Eintrag 3.3</option>
    <option value="8">-- Eintrag 3.4</option>
  </select>
  <input name="hoch" type="button" value="hoch" onClick="up()">
</form>

vielleicht hat ja jemand nen Tipp...danke schonmal!
 
Zuletzt bearbeitet:
Hi, vielleicht hilft dir das weiter:
PHP:
<html>
<head>
<script type="text/javascript">

function moveup() {
    theselect = window.document.theform.theselect;
    if (theselect.selectedIndex != 0) {
        upvalue = theselect[theselect.selectedIndex-1].value;
        uptext = theselect[theselect.selectedIndex-1].text;
        downvalue = theselect[theselect.selectedIndex].value;
        downtext = theselect[theselect.selectedIndex].text;
        theselect[theselect.selectedIndex-1].value = downvalue;
        theselect[theselect.selectedIndex-1].text = downtext;
        theselect[theselect.selectedIndex].value = upvalue;
        theselect[theselect.selectedIndex].text = uptext;
        theselect[theselect.selectedIndex-1].selected = "selected";
        theselect.focus();
    }
}

function movedown() {
    theselect = window.document.theform.theselect;
    if (theselect.selectedIndex != theselect.length - 1) {
        upvalue = theselect[theselect.selectedIndex].value;
        uptext = theselect[theselect.selectedIndex].text;
        downvalue = theselect[theselect.selectedIndex+1].value;
        downtext = theselect[theselect.selectedIndex+1].text;
        theselect[theselect.selectedIndex].value = downvalue;
        theselect[theselect.selectedIndex].text = downtext;
        theselect[theselect.selectedIndex+1].value = upvalue;
        theselect[theselect.selectedIndex+1].text = uptext;
        theselect[theselect.selectedIndex+1].selected = "selected";
        theselect.focus();
    }
}

</script>
</head>
<body>

<form name="theform">

<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="200">
<select name="theselect" size="12" style="width:190px;">
    <option value="1">Gruppe 1</option>
    <option value="1">-- Eintrag 1.1</option>
    <option value="2">-- Eintrag 1.2</option>
    <option value="3">-- Eintrag 1.3</option>
    <option value="2">Gruppe 2</option>
    <option value="3">-- Eintrag 2.1</option>
    <option value="4">-- Eintrag 2.2</option>
    <option value="3">Gruppe 3</option>
    <option value="5">-- Eintrag 3.1</option>
    <option value="6">-- Eintrag 3.2</option>
    <option value="7">-- Eintrag 3.3</option>
    <option value="8">-- Eintrag 3.4</option>
</select>
</td>
<td><input type="button" value=" Hoch " onClick="moveup();">
<br>
<br>
<input type="button" value=" Runter " onclick="movedown();"></td></tr>
</form>

</body>
</html>
Is nicht bester Stil, aber tut was es soll (falls ich deine Frage richtig verstanden hab)
 
Hallo,

danke erstmal für deine Hilfe, aber leider haben wir wohl doch aneinander vorbei geredet :)

die Einzelnen Einträge verschieben (sowohl nach oben, als auch nach unten) kann ich schon, hab nur die Funktion die nach unten schiebt rausgenommen, damit der gepastete Code hier nicht so ewig lang wird. Mein eigentliches Problem ist aber, das es diese Gruppen gibt, und innerhalb dieser Gruppen gibt es wiederum Einträge, die nur dieser Gruppen angehören, und zu keiner anderen wechseln dürfen.

Das heißt also, das zum Beispiel der Eintrag 2.1 nur innerhalb der Gruppe 2 bewegt werden darf ... aber nicht in Gruppe 1 oder in Gruppe 3 rein darf. Im Beispiel sind diese Zugehörigkeiten durch die erste Nummer beim Eintrag gekennzeichnet, soll heißen: Eintrag 2.1 gehöhrt zur Gruppe 2 ... dies wird später nicht mehr der Fall sein, dafür wird aber allen Einträgen, genauer den Untereinträgen ein '--' vorangestellt, wie´s im Beispiel schon verdeutlicht ist. Dieses Merkmal kann zur Identifizierung von Gruppen oder normalen Einträgen herangezogen werden (wie ich es auch schon in meinem Script mache) ...

Mein Verlangen ist jetzt, das ich, das ich eine Gruppe markiere, also meinetwegen 'Gruppe 2', und diese komplett, also mit allen Untereinträgen (im Falle von 'Gruppe 2' also 'Eintrag 2.1' und 'Eintrag 2.2') nach oben schiebe, also über 'Gruppe 1' ...

im Endeffekt sollte dann also aus der im ersten Post genannten Aufteilung, folgende werden:

Gruppe 2
--Eintrag 2.1
--Eintrag 2.2
Gruppe 1
--Eintrag 1.1
--Eintrag 1.2
--Eintrag 1.3
Gruppe 3
--Eintrag 3.1
--Eintrag 3.2
--Eintrag 3.3
--Eintrag 3.4

...so, ich hoffe ich hab mich diesmal besser verständlich ausgedrückt :) Danke aber trotzdem für die genommene Zeit Nuinmundo, vielleicht hast du ja jetzt die richtige Idee, oder jemand anders :)
 
Hallo....Ihr habt ja ein schickes Forum hier...interessante Themen,
schön dass ich euch endtdeckt habe :o)

Falls ich richtig verstanden habe,was du vorhast,wären Arrays schon ne gute Wahl.
Füllen lassen kannst du sie ja vom Skript...danach sortierst du sie nach Belieben um
Code:
<script type="text/javascript">
<!--
var init;
var groups=false;
function sortiere(dir)
{
init=false;
dfl=document.formular.liste;
IX=dfl.selectedIndex;
if(IX<0){return;}
 if(!groups)//Beim ersten Aufruf Arrays fuellen
 	{
 	groups=new Array();
 	for(o=0;o<dfl.options.length;++o)
 		{//choice=false;if(o==IX){choice=true;}
 		 txt=dfl.options[o].text;
 		 if(txt.indexOf('Gruppe')>-1)
 		 	{
 		 	groups[groups.length]=new Array();
 		 	groups[groups.length-1][groups[groups.length-1].length]=
 		 	new Option(dfl.options[o].text,dfl.options[o].text);
 		 	}
 		 else
 		 	{
 		 	groups[groups.length-1][groups[groups.length-1].length]=
 		 	new Option(dfl.options[o].text,dfl.options[o].text);
 		 	}
 		}
 	}
//Neu sortieren
for(a=0;a<groups.length;++a)
	{
	for(b=0;b<groups[a].length;++b)
		{
		if(!init&&groups[a][b].text==dfl.options[IX].text)
			{
			if(groups[a][b].text.indexOf('Gruppe')>-1)
				{
				if((dir<0&&a>0)||(dir>0&&a<groups.length-1))
					{
					cache=groups[a+(1*dir)];
					groups[a+(1*dir)]=groups[a];
					groups[a]=cache;
					}
				}
			else
				{
				if((dir<0&&b>1)||(dir>0&&b<groups[a].length-1))
					{
					cache=groups[a][b+(1*dir)];
					groups[a][b+(1*dir)]=groups[a][b];
					groups[a][b]=cache;
					}
				}
			init=true;
			}
		}
	}
choice=dfl.options[IX].text;
//Optionen neu anlegen
dfl.options.length=0;
for(a=0;a<groups.length;++a)
	{
	for(b=0;b<groups[a].length;++b)
		{
		dfl.options[dfl.options.length]=groups[a][b];
		if(choice==groups[a][b].text){dfl.options[dfl.options.length-1].selected=true;}
		}
	}
}

//-->
</script>
Aufrufen musst du das Ganze dann mit:
Code:
//Hoch
onClick="sortiere('-1')"
//Runter
onClick="sortiere('1')"
 
Zuletzt bearbeitet:
Hi fatalus,

vielen Dank! Funktioniert wunderbar! Ist zwar nen ganz anderer Ansatz als mein anfängliches Script, aber es klappt :)

Danke!

P.S.: Prenzlberg = Prenzlauer Berg in Berlin? Wohn da auch :)
 
hallo
dein code mit dem rauf runter hat mir geholfen abr ich versuche schon lange zwei weitere funktionen einzufügen.
also:
ich habe zwei boxen. eine links die auf eine datenbank zugreift und eine rechst die am anfang leer ist.
mit dem button rechts will ich aus der linken box ausgewählte eintrage nach rechts in die box schieben.
dort kann man sie dann hoch runter und aus der rechten box löschen. ich schaffe es aber nicht deinen quellcode fehlerfrei einzubinden.
würde mich freuen wenn du einen lösungsvorschlag finden würdest.

mfg
 
Zuletzt bearbeitet:
Hallo marcelp3009,

Bevor du Code im JS-Forum postest, versuche bitte, Sachen, welche nicht HTML/JS sind, daraus zu entfernen.
Niemand kann hellsehen, was in deiner DB steht.... zum anderen schliesst du damit User weitesgehend aus....welche von der jeweiligen Sprache keine Ahnung haben.

Da JS clientseitig abläuft, ist nur interessant, was dort verfügbar ist(Browser>Quelltext anzeigen).

Weiterhin beachte bitte die Netiquette #12 und editiere deinen Beitrag in dieser Hinsicht.

Danke;)
 

Neue Beiträge

Zurück