Today, when rewriting the sorting Operation Method in the background management, I wrote a script program that runs on the client to change the order of items in the ListBox control, now, I want to help JavaScript beginners. Of course, we also recommend that you do not joke about JavaScript.
Note the following before you post the Code:
- Normally, when you use this function, it is meaningless to adjust the order of items in the ListBox on the client. (Of course, if you use Ajax technology to save the order, that's another question), because the order of items adjusted using the client's JavaScript, When you click a new button, the Order will return to the status when the page was initially loaded, not just the order of items, when you use JavaScript to dynamically add (delete) items in ListBox, the status cannot be changed after the API is sent back. This is what you use. net does not work with the server-side control ListBox. (Of course, dropdownlist does not work). Therefore, it is a little more difficult to save the changes to the status than other controls. I usually. in the. NET environment, the textbox (display: None) on the two servers are used to record the text and value of items in the ListBox in sequence in the form of delimiters. Of course, when do you need to record it? You can re-write the values of the two textbox every time when The ListBox item is changed on the client, you can also rewrite the values of the two textbox items on the client before saving them. After the client-side JavaScript changes its value to the textbox on the server side, the changed value can be saved when it is sent back to the server, in this way, you can obtain the text and value of all items in the ListBox separated by delimiters from the text attribute of the two textbox on the server side, this solves the problem of accurately obtaining The ListBox status on the server. Of course, another problem is that after the page is re-loaded, The ListBox returns to the status when the page is opened, and there is a difference in display, therefore, you need to add a Javascript script at the end of the page. The function to be implemented is to determine whether the values of the two textbox are cleared first if they are not empty, then, the split method is used to separate the values of the two Textbox (one is text and the other is value), and the loop is added to the ListBox. This solves all the problems during the running process, the status of controls such as ListBox or dropdownlist is saved accurately!
- You need to use the setTimeout and cleartimeout methods properly to keep up (down) Operations uninterrupted after clicking the mouse. For details, refer to the code.
- <! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
- <HTML>
- <Head>
- <Title> sorting </title>
- <SCRIPT>
- VaR x = NULL;
- VaR listobj = NULL;
- // The operation when the mouse is pressed
- Function settimestart (type)
- {
- Listobj = Document. getelementbyid ('forder ');
- // Initiate continuous up (down) operations over 0.3 seconds
- If (type = "up ")
- {
- X = setTimeout (uplistitem, 300 );
- } Else
- {
- X = setTimeout (downlistitem, 300 );
- }
- }
- // Move the selected item up
- Function uplistitem ()
- {
- VaR selindex = listobj. selectedindex;
- If (selindex <0)
- {
- If (X! = NULL) {cleartimeout (x );}
- Return;
- }
- If (selindex = 0)
- {
- If (X! = NULL) {cleartimeout (x );}
- Return;
- }
- VaR selvalue = listobj. Options [selindex]. value;
- VaR seltext = listobj. Options [selindex]. text;
- Listobj. Options [selindex]. value = listobj. Options [selIndex-1]. value;
- Listobj. Options [selindex]. Text = listobj. Options [selIndex-1]. text;
- Listobj. Options [selIndex-1]. value = selvalue;
- Listobj. Options [selIndex-1]. Text = seltext;
- Listobj. selectedindex = selIndex-1;
- If (selindex + 1> 0)
- {
- X = setTimeout (uplistitem, 200)
- }
- }
- // Drop the selected item down
- Function downlistitem ()
- {
- VaR selindex = listobj. selectedindex;
- If (selindex <0)
- {
- If (X! = NULL) {cleartimeout (x );}
- Return;
- }
- If (selindex = listobj. Options. Length-1)
- {
- If (X! = NULL) {cleartimeout (x );}
- Return;
- }
- VaR selvalue = listobj. Options [selindex]. value;
- VaR seltext = listobj. Options [selindex]. text;
- Listobj. Options [selindex]. value = listobj. Options [selindex + 1]. value;
- Listobj. Options [selindex]. Text = listobj. Options [selindex + 1]. text;
- Listobj. Options [selindex + 1]. value = selvalue;
- Listobj. Options [selindex + 1]. Text = seltext;
- Listobj. selectedindex = selindex + 1;
- If (selindex + 1 <listobj. Options. Length-1)
- {
- X = setTimeout (downlistitem, 200)
- }
- }
- </SCRIPT>
- </Head>
- <Body topmargin = "20px" leftmargin = "10px" rightmargin = "0">
- <Table id = "Table1" Height = "100%" cellspacing = "0" cellpadding = "0" width = "100%" border = "0">
- <Tr>
- <TD valign = "TOP">
- <Table id = "table4" cellspacing = "0" cellpadding = "0" width = "100%" border = "0">
- <Tr>
- <TD> <input class = "upbtn" type = "button" value = "↑ "onmousedown = "settimestart ('up');" onmouseup = "cleartimeout (X );"
- Onclick = "listobj = document. getelementbyid ('forder'); uplistitem (); cleartimeout (x); "id =" button1 "name =" button1 "> <input style =" width: 48px; height: 22px "type =" button "value =" lag down "class =" downbtn "onmousedown =" settimestart ('drop ');"
- Onmouseup = "cleartimeout (x);" onclick = "listobj = document. getelementbyid ('forder'); downlistitem (); cleartimeout (x); "id =" button2 "name =" button2 ">
- </TD>
- </Tr>
- <Tr>
- <TD>
- <Select id = "forder" style = "width: 304px; Height: 240px" size = "15">
- <Option value = 1> 1 </option>
- <Option value = 2> 2 </option>
- <Option value = 3> 3 </option>
- <Option value = 4> 4 </option>
- <Option value = 5> 5 </option>
- <Option value = 6> 6 </option>
- <Option value = 7> 7 </option>
- <Option value = 8> 8 </option>
- <Option value = 9> 9 </option>
- </SELECT> </TD>
- </Tr>
- </Table>
- </TD>
- </Tr>
- </Table>
- </Body>
- </Html>
