本文介绍了一种使用ASP.NET中的ListBox控件实现项上移和下移功能的方法。通过JavaScript进行客户端验证和处理，确保了用户交互的流畅性和数据的正确性。
1
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test.WEB_APP.WebForm3" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" >
6<head runat="server">
7 <title>无标题页</title>
8 <script language="Javascript" type="text/javascript">
9
var obj , count,selectIndex,type;
10
var MSG = [ {id:1,msg:"请选择要移动的项"},
11 {id:2,msg:"已是第一个无法上移"},
12 {id:3,msg:"已是最后一个无法下移"},
13 ]
14 //初始化相关数据
15 function intial(t)
16 {
17 obj = rtObject();
18 count = ItemCount();
19 selectIndex = getSelectIndex();
20 type = t;
21
}
22 function move(t)
23 {
24 intial(t);
25 if(!check())
26 moveHandle();
27 }
28 function moveHandle()
29 {
30 //根据相关操作获得要变换位置的索引
31 var operate = type == 1 ? "-1" : "+1" ;
32 var index = eval( selectIndex + operate);
33
34 var values = obj.options[index].value;
35 var text = obj.options[index].text;
36 obj.options[index].value = obj.options[selectIndex].value;
37 obj.options[index].text = obj.options[selectIndex].text;
38 obj.options[selectIndex].value = values;
39 obj.options[selectIndex].text = text;
40
41 obj.options[index].selected = true;
42 }
43 //检查是否可以移动
44 function check()
45 {
46 var bool = type == 1 ? selectIndex == 0 : selectIndex == count-1 ;
47 if(bool)
48 alert(MSG[type].msg);
49 return bool;
50 }
51 //获取当前选中项的索引
52 function getSelectIndex()
53 {
54 var index = -1;
55 for(var i = 0 ; i < count ; i ++)
56 {
57 if(obj.options[i].selected)
58 {
59 index = i;
60 break;
61 }
62 }
63 //判断有没有选择移动项
64 if(index >=0 )
65 return index;
66 else
67 alert(MSG[0].msg);
68 }
69 //获取项总数
70 function ItemCount()
71 {
72 return obj.options.length;
73 }
74 //返回ListBox对象
75 function rtObject()
76 {
77 return document.form1.elements["lb"];
78 }
79
</script>
80</head>
81<body>
82 <form id="form1" runat="server">
83 <div>
84 <asp:ListBox ID="lb" runat="server" Height="144px" Width="179px">
85 <asp:ListItem>a</asp:ListItem>
86 <asp:ListItem>b</asp:ListItem>
87 <asp:ListItem>c</asp:ListItem>
88 <asp:ListItem>d</asp:ListItem>
89 <asp:ListItem>e</asp:ListItem>
90 <asp:ListItem>f</asp:ListItem>
91 <asp:ListItem>g</asp:ListItem>
92 <asp:ListItem>h</asp:ListItem>
93 </asp:ListBox>
94 <input id="Button1" type="button" onclick="move(1)" value="上移" />
95 <input id="Button2" type="button" onclick="move(2)" value="下移" /></div>
96 </form>
97</body>
98</html>
99
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test.WEB_APP.WebForm3" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" >6
<head runat="server">7
<title>无标题页</title>8
<script language="Javascript" type="text/javascript">9
var obj , count,selectIndex,type; 10
var MSG = [ {id:1,msg:"请选择要移动的项"},11
{id:2,msg:"已是第一个无法上移"},12
{id:3,msg:"已是最后一个无法下移"},13
]14
//初始化相关数据15
function intial(t)16
{17
obj = rtObject();18
count = ItemCount(); 19
selectIndex = getSelectIndex(); 20
type = t; 21
}22
function move(t)23
{24
intial(t);25
if(!check()) 26
moveHandle();27
}28
function moveHandle()29
{30
//根据相关操作获得要变换位置的索引31
var operate = type == 1 ? "-1" : "+1" ;32
var index = eval( selectIndex + operate);33
34
var values = obj.options[index].value;35
var text = obj.options[index].text; 36
obj.options[index].value = obj.options[selectIndex].value;37
obj.options[index].text = obj.options[selectIndex].text; 38
obj.options[selectIndex].value = values;39
obj.options[selectIndex].text = text; 40
41
obj.options[index].selected = true;42
}43
//检查是否可以移动44
function check()45
{46
var bool = type == 1 ? selectIndex == 0 : selectIndex == count-1 ;47
if(bool)48
alert(MSG[type].msg);49
return bool;50
}51
//获取当前选中项的索引52
function getSelectIndex()53
{ 54
var index = -1; 55
for(var i = 0 ; i < count ; i ++)56
{57
if(obj.options[i].selected)58
{59
index = i;60
break;61
}62
}63
//判断有没有选择移动项64
if(index >=0 )65
return index;66
else67
alert(MSG[0].msg);68
}69
//获取项总数70
function ItemCount()71
{72
return obj.options.length;73
}74
//返回ListBox对象75
function rtObject()76
{77
return document.form1.elements["lb"];78
}79
</script>80
</head>81
<body>82
<form id="form1" runat="server">83
<div>84
<asp:ListBox ID="lb" runat="server" Height="144px" Width="179px">85
<asp:ListItem>a</asp:ListItem>86
<asp:ListItem>b</asp:ListItem>87
<asp:ListItem>c</asp:ListItem>88
<asp:ListItem>d</asp:ListItem>89
<asp:ListItem>e</asp:ListItem>90
<asp:ListItem>f</asp:ListItem>91
<asp:ListItem>g</asp:ListItem>92
<asp:ListItem>h</asp:ListItem>93
</asp:ListBox>94
<input id="Button1" type="button" onclick="move(1)" value="上移" />95
<input id="Button2" type="button" onclick="move(2)" value="下移" /></div>96
</form>97
</body>98
</html>99
扫一扫
1998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
