利用javascript设定listBox中各Item的上下顺序
今天在重写后台管理中的排序操作方式的时候，写了一段运行在客户端的更改设定listBox控件中各个项(Item)的上下顺序的脚本程序，现整理一下儿希望对初学javascript的朋友们有所帮助，当然也请各位js老鸟们不要笑话。
在帖出代码之前先说些要注意的地方吧：
在帖出代码之前先说些要注意的地方吧：
- 正常大家在使用此功能的时候其实纯粹的在客户端去调整listBox中Item的上下顺序是没有什么意义的（当然如果你用AJAX技术最终去保存那另当别论了），因为在用客户端的javascript调整的Item顺序，在您点击一个回发的按纽时顺序会回到页面最初加载的时候的状态，不光是Item的顺序，在用javascript动态的添加（删除）listBox中的Item，回发后也会保存不住更改状态的，这一点就是你用.net中自带的服务器端控件listBox也不行。（当然，dropDownList也是不行的），因此对于其更改状态的保存就要相对别的控件麻烦一点儿了。我平常在.net环境下的的处理方法是要用两个服务器端的TextBox（将其display:none）分别用分隔符的形式来顺序记录listBox中项的Text和Value,当然，什么时候去记录看需要了，你可以每次在客户端改变listBox的Item的时候就重新写一下两个TextBox的Value，也可以在保存时先在客户端重写一下儿两个TextBox的Value。客户端的javascript对于服务器端的TextBox改变其Value后，回发服务器时是可以保存住更改的Value的，这样子你就可以在服务器端通过读取两个TextBox的Text属性从面获取到用分隔符分隔的ListBox中的所有Item的Text和Value,这样子就解决了在服务器准确获得listBox状态的问题。当然，还有一个问题是回发结束后页面重新加载后ListBox又回到了页面打开时的状态,显示上存在着差别，这就需要在页面的末尾加入一段javascript的脚本,其要实现的功能是判断两个TextBox的Value如不为空的话首先清空listBox的所有Item,然后在利用split方法分隔两个TextBox的Value（一个是Text一个是Value），循环加入到listBox中就OK了，这样子在运行过程中就解决了所有问题，做到了ListBox或是dropDownList这类控件的状态准确保存了！
- 鼠标点击后不放以使向上(向下)操作不间断的进行是需要合理运用setTimeout及clearTimeout两个方法实现的，具体可以参考代码。
程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>排序</title>
<script>
var x=null;
var listObj=null;
//鼠标按下不放时的操作
function setTimeStart(type)
{
listObj=document.getElementById('forder');
//超过0.3秒启动连续的向上(下)的操作
if(type=="up")
{
x=setTimeout(upListItem,300);
}else
{
x=setTimeout(downListItem,300);
}
}
//将选中item向上
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)
}
}
//将选中item向下
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="↓向下" class="downBtn" onmousedown="setTimeStart('down');"
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>
<html>
<head>
<title>排序</title>
<script>
var x=null;
var listObj=null;
//鼠标按下不放时的操作
function setTimeStart(type)
{
listObj=document.getElementById('forder');
//超过0.3秒启动连续的向上(下)的操作
if(type=="up")
{
x=setTimeout(upListItem,300);
}else
{
x=setTimeout(downListItem,300);
}
}
//将选中item向上
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)
}
}
//将选中item向下
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="↓向下" class="downBtn" onmousedown="setTimeStart('down');"
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>
浙公网安备 33010602011771号