[GastForen Programmierung/Entwicklung JavaScript Listbox manuell umsortieren

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Listbox manuell umsortieren

Tömsken
Beiträge gesamt: 720

2. Apr 2004, 20:05
Beitrag # 1 von 10
Bewertung:
(2917 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Salut...

ich möchte eine Listbox (<select>) über zwei Buttons "hoch" und "runter" manuell umsortieren können. Mein - für mich naheliegender - Ansatz klappt nicht:

// Aktuell fokussierten Eintrag ermitteln
var current = document.formular.listbox.selectedIndex;

// Aktuell fokussierten Eintrag aus Listbox auslesen
var o1 = document.formular.listbox.options[current];

// Folgenden Eintrag ebenfalls auslesen
var o2 = document.formular.listbox.options[current+1];

// Nun noch tauschen
document.formular.listbox.options[current] = o2;
document.formular.listbox.options[current+1] = o1;

Klappt aber nicht. Nun könnte man alternativ die ganze Liste in ein Array einlesen, die Listbox komplett leeren, das Array umsortieren und schließlich zur Listbox zurückschreiben. Aber... muß das wirklich so aufwändig sein?

X

Listbox manuell umsortieren

oesi50
  
Beiträge gesamt: 2315

2. Apr 2004, 20:41
Beitrag # 2 von 10
Beitrag ID: #78217
Bewertung:
(2915 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hi Tömsken,

versuchs doch mal so:

// Aktuell fokussierten Eintrag ermitteln
var current = document.formular.listbox.selectedIndex;

// Aktuell fokussierten Eintrag aus Listbox auslesen
var o1 = document.formular.listbox.options[current].value;

// Folgenden Eintrag ebenfalls auslesen
var o2 = document.formular.listbox.options[current+1].value;

// Nun noch tauschen
document.formular.listbox.options[current].value = o2;
document.formular.listbox.options[current+1].value = o1;

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)


als Antwort auf: [#78207]

Listbox manuell umsortieren

oesi50
  
Beiträge gesamt: 2315

2. Apr 2004, 21:25
Beitrag # 3 von 10
Beitrag ID: #78224
Bewertung:
(2914 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ich habs noch mal ausprobiert, so geht's natürlich nicht.

1. muss man value UND text tauschen
2. abprüfen, ob der letzte Eintrag selektiert wurde

hier die getestete Version:
<SCRIPT LANGUAGE="JavaScript" type"text/javascript">
<!--
function tausch(){
// Aktuell fokussierten Eintrag ermitteln und Ende beachten
var current1 = document.formular.listbox.selectedIndex;
var current2 = (current1 + 1) % document.formular.listbox.length;
// tauschen
swap(document.formular.listbox.options[current1],document.formular.listbox.options[current2]);
}
function swap(a,b){
var v = a.value; a.value = b.value; b.value = v;
var t = a.text; a.text = b.text; b.text = t;
}
//-->
</SCRIPT>
<FORM name="formular" METHOD=POST ACTION="">
<SELECT NAME="listbox" size="5" onChange="tausch()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</SELECT>
</FORM>

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)


als Antwort auf: [#78207]
(Dieser Beitrag wurde von oesi50 am 3. Apr 2004, 09:15 geändert)

Listbox manuell umsortieren

Tömsken
Beiträge gesamt: 720

2. Apr 2004, 21:33
Beitrag # 4 von 10
Beitrag ID: #78227
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Oesi - that's it! Man muss noch "options[].text" mitnehmen, aber dann geht's. Hier ein (funktionierendes) Script:

function moveItem(updn) {
// Verschiebt den aktuellen Listeneintrag um eine Position
// nach oben (updn==-1)
// oder nach unten (updn==1).
var curr = document.formular.chapters.selectedIndex;

if ( (curr >= 0) && ((updn > 0) ?
(curr < document.formular.chapters.length-1) : (curr > 0)) ) {
with (document.formular.chapters) {
var o1 = options[curr];
var o3 = new Option(o1.text, o1.value, false, true);
var o2 = options[curr + updn];
o1.text = o2.text; o1.value = o2.value;
o2.text = o3.text; o2.value = o3.value;
focus();
selectedIndex = curr + updn;
}
}
}



als Antwort auf: [#78207]

Listbox manuell umsortieren

Tömsken
Beiträge gesamt: 720

2. Apr 2004, 21:36
Beitrag # 5 von 10
Beitrag ID: #78231
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
:) Da haben wir uns knapp verpasst - 8 Minuten haben wir also an Version #2 gebastelt.
Dank' Dir!


als Antwort auf: [#78207]

Listbox manuell umsortieren

oesi50
  
Beiträge gesamt: 2315

2. Apr 2004, 21:45
Beitrag # 6 von 10
Beitrag ID: #78232
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ich habe mein Script noch mal geändert, jetzt ist es deutlich kürzer.

Grüße Oesi
Ich weiß, dass ich nichts weiß... (Sokrates)


als Antwort auf: [#78207]

Listbox manuell umsortieren

Tömsken
Beiträge gesamt: 720

3. Apr 2004, 03:38
Beitrag # 7 von 10
Beitrag ID: #78260
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Kürzer als meins? ;)
Mit "Liste leer-Schutz" und "Überlaufschutz"?
Dann lass mal sehen!


als Antwort auf: [#78207]

Listbox manuell umsortieren

Hacksaw
Beiträge gesamt: 2

19. Okt 2004, 23:55
Beitrag # 8 von 10
Beitrag ID: #117097
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Erst einmal Danke für die Bereitstellung des Codeschipsels.

Jetzt zu meinen Anliegen. Ich will diese Funktion auch nutzen, aber mit 4 Buttons. Der oberste Button soll den selektierten Wert ans Ende der Tabelle setzen, der 2. und 3.Button um 1 nach oben oder unten und der 4.Button den selektierten Wert an den Anfang.

Das 2. Probleme noch dazu, ich lese diese Werte aus einer Datenbank aus sprich die Anzahl der eingelesenen Werte variert.

Nach der Sortierung soll es dann zurück in die Datenbank.
Ich weiss das dies mit Arrays geht, aber mit denen stehe ich auf Kriegsfuß. :-)

Es währe nett, wenn mir jemand bei diesen Problem helfen könnte.

Danke

Gruß Hacksaw


als Antwort auf: [#78207]

Listbox manuell umsortieren

Tömsken
Beiträge gesamt: 720

20. Okt 2004, 23:57
Beitrag # 9 von 10
Beitrag ID: #117392
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Hacksaw!

Ich hab' mein Script in Deinem Sinne umgeschrieben. Probier das mal:

---- schnipp -----------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script type="text/javascript" language="JavaScript"><!--

function moveItem(updn) {
with (document.formular.pages) {
var iCurr = selectedIndex;
oCurr = options[iCurr];
var oNew = new Option(oCurr.text, oCurr.value, false, true);
var oTmp;

switch (updn) {
case -1 : // Hoch
oTmp = options[(iCurr > 0) ? --iCurr:0];
break;
case 1 : // Runter
oTmp = options[iCurr < length-1 ? ++iCurr:length-1];
break;
case 0 : // Anfang
oTmp = options[iCurr=0];
break;
case 9 : // Ende
oTmp = options[iCurr=length-1];
break;
}
oCurr.text = oTmp.text; oCurr.value = oTmp.value;
oTmp.text = oNew.text; oTmp.value = oNew.value;
focus();
selectedIndex = iCurr;
}
}

//--></script>
</head>

<body>
<form name="formular" method="POST">

<select id="pages" name="pages[]" multiple size="15">
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
<option value="3">Solor</option>
<option value="4">Sit amet</option>
<option value="5">Con sectetuar</option>
<option value="5">Veritas est</option>
</select>
<br>
<a href="javascript:moveItem(-1);">Hoch</a> - <a href="javascript:moveItem(1);">Runter</a>
<a href="javascript:moveItem(0);">Erster</a> - <a href="javascript:moveItem(9);">Letzter</a>

</form>

</body>
</html>

---- schnapp ----------------------------------

Ich brauchte die Funktion, um z. B. die Seiten eines Kapitels manuell umsortieren zu können. Nun kann man leider das Array pages nicht einfach in einer Db ablegen (zumindest nicht in MySQL und ähnlichen).
Ich bin also so vorgegangen:

* $pages = isset($_POST['pages']) ? $_POST['pages'] : '';
liest die Einträge der Listbox in das Array $pages ein.

* Pro Listboxeintrag lege ich einen Datensatz in einer verknüpften Tabelle an. Vor dem Sichern von geänderten Listbox-Einträgen müssen diese zunächst gelöscht werden ( - so ist's zumindest am einfachsten).

* Dann kann pro Listbox-Eintrag wieder ein Record angelegt werden:
if (is_array($pages)) {
if (count($pages) > 0) {
for ($i = 0; $i < count($pages); $i++) {
// Neuen Datensatz anlegen mit dem Inhalt $pages[$i] und den Sichern
// Damit die Sortierfolge erhalten bleibt, muss z. B. ein
// char(4)-Datenfeld angelegt werden, nach dem künftig sortiert
// wird. Dessen Inhalt könnte z. B. so aussehen:
// str_pad(strval($i), 4, '0', STR_PAD_LEFT) );
}

Übrigens: Funktioniert gut so :)


als Antwort auf: [#78207]

Listbox manuell umsortieren

Hacksaw
Beiträge gesamt: 2

21. Okt 2004, 18:25
Beitrag # 10 von 10
Beitrag ID: #117667
Bewertung:
(2913 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Vielen Dank, für die schnelle Antwort, habe es mal für mich angepasst.

------ htm ---
<html>
<head>
<title>Hacksaws Board | Umfrage-Test | Umfrage bearbeiten</title>
<link rel="stylesheet" href="poll.css" />
</head>

<body>
<form action="poll.php" method="post" name="pform">
<input type="hidden" name="newpages" value="pollsave">
<input type="hidden" name="newpagesnumbers" value="">
<table cellpadding="4" cellspacing="1" border="0" style="width:98%" class="tableinborder">
<tr>
<td class="tabletitle" align="left" colspan="2"><span class="normalfont"><b>Umfrage bearbeiten</b></span></td>
</tr>
<tr align="left">
<td class="tableb"><span class="normalfont"><b>Umfragentitel:</b></span></td>
<td class="tableb"><input type="text" name="question" value="test" class="input" size="50" maxlength="100" /></td>
</tr>
<tr align="left">
<td class="tablea" align="center">

<a href="javascript:moveItem(0);"><img src="polledit_uptop.gif" border="0" alt="An erste Position" title="An erste Position" /></a><br /><br />

<a href="javascript:moveItem(-1);"><img src="polledit_up.gif" border="0" alt="Nach oben" title="Nach oben" /></a><br /><br />


<a href="javascript:moveItem(1);"><img src="polledit_down.gif" border="0" alt="Nach unten" title="Nach unten" /></a><br /><br />


<a href="javascript:moveItem(9);"><img src="polledit_downbottom.gif" border="0" alt="An letzte Position" title="An letzte Position" /></a></td>


<td class="tablea"><select id="pages" name="pages[]" multiple size="20" style="width:500px">

<option name="options[1]" value="1">Hund 1</option>
<option name="options[2]" value="2">Katze 2</option>
<option name="options[3]" value="3">Maus 3</option>
<option name="options[4]" value="4">Lorem 4</option>
<option name="options[5]" value="5">Ipsum 5</option>
<option name="options[6]" value="6">Solor 6</option>
<option name="options[7]" value="7">Sit amet 7</option>
<option name="options[8]" value="8">Con sectetuar 8</option>
<option name="options[9]" value="9">Veritas est 9</option>
</select>

</td>
</tr>
<tr>
<td class="tableb" colspan="2" align="center"><input class="button" type="submit" value="Speichern" onclick="FormSubmit();"></td></tr>
<script type="text/javascript" language="JavaScript">
<!--

var optlist = document.pform.pages;
var option = document.pform.option;

function moveItem(updn) {
with (document.pform.pages) {
var iCurr = selectedIndex;
oCurr = options[iCurr];


var oNew = new Option(oCurr.text, oCurr.value, false, true);
var oTmp;


switch (updn) {
case -1 : // Hoch
oTmp = options[(iCurr > 0) ? --iCurr:0];
break;
case 1 : // Runter
oTmp = options[iCurr < length-1 ? ++iCurr:length-1];
break;
case 0 : // Anfang
oTmp = options[iCurr=0];
break;
case 9 : // Ende
oTmp = options[iCurr=length-1];
break;
}
oCurr.text = oTmp.text; oCurr.value = oTmp.value;
oTmp.text = oNew.text; oTmp.value = oNew.value;
focus();
selectedIndex = iCurr;
}
}
function FormSubmit(actionval) {
for(i=0;i<optlist.length;i++) {
text = optlist.options.text;
document.pform.newpages.value+='|||'+text;
document.pform.newpagesnumbers.value+='|||'+optlist.options.value;
}
document.pform.submit();
}
//-->
</script>
</form>
</table><br />
</body>
</html>
------ ende htm --------
----- php --------

if($action=="savepoll") {

if ($_POST['newpages']) $newpages = $_POST['newpages'];
else $newpages = "";
if ($_POST['newpagesnumbers']) $newpagesnumbers = $_POST['newpagesnumbers'];
else $newpagesnumbers = "";

$optionsstring = $newpages;
$votesstring = $newpagesnumbers;

if (substr($optionsstring,0,3)=="|||") {
$optionsstring=substr($optionsstring,3);
}
if (substr($votesstring,0,3)=="|||") {
$votesstring=substr($votesstring,3);
}

mysql->query("UPDATE poll SET votes='".addslashes($votesstring)."',options='".addslashes($optionsstring)."' WHERE pollid=$pollid");

}

----- ende php -----

da ich die Wert so für die DB brauche

wert1|||wert2|||wert3|||wert4
vote1|||vote2|||vote3|||vote4

zwar habe ich mir die Function wert an den Anfang der Liste oder Wert an das Ende anders vorgestellt, nicht tauschen, sondern nur davor oder dahinter setzen:
Bsp vorher:
1
2
3
4
5
nacher:
5
1
2
3
4

Aber ich habe von JS nicht so den Plan, und kann mit dieser Lösung leben.
Vielen Dank nochmal

Gruß Hacksaw





als Antwort auf: [#78207]
(Dieser Beitrag wurde von Hacksaw am 22. Okt 2004, 18:38 geändert)
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022