博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

如何在asp.net中实现listbox item值上下移动?

Posted on 2006-09-23 00:11  hnboy  阅读(1401)  评论(1编辑  收藏  举报
全部.net为:
 1    <form id="myform" runat="server">
 2    <div>
 3            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
 4            SelectMethod="GetDepartmentsAll" TypeName="Cvv.BLL.Bases.DepartmentBLL"></asp:ObjectDataSource>
 5         <table  border="0"  width="300">
 6           <tr>
 7           <td colspan="4" align=center>
 8               流程名称:<asp:TextBox ID="tbProcessName" runat="server"></asp:TextBox>
 9                         <asp:RequiredFieldValidator ID="rfvProcessName" runat="server" ErrorMessage="请输入" ControlToValidate="tbProcessName" Display="Dynamic">*</asp:RequiredFieldValidator>
10                         <asp:RegularExpressionValidator ID="revProcessName" runat="server" ErrorMessage="请不要输入单引号和空白" ControlToValidate="tbProcessName" ValidationExpression="[^'\s]{1,50}" Display="Dynamic"></asp:RegularExpressionValidator>               
11               </td>
12           </tr>         
13           <tr>  
14           <td width="40%">部门列表</td>  
15           <td  align="center" style="width: 20%">操作</td>  
16           <td style="width: 40%">流程顺序</td>  
17           <td style="width: 43px">调整</td>  
18           </tr>  
19             <tr>
20                 <td style="width: 40%">
21                     <asp:ListBox ID="ListBox1" runat="server" DataSourceID="ObjectDataSource1" DataTextField="DepartmentName"
22                         DataValueField="DepartmentID" Height="411px" SelectionMode="Multiple" Width="235px">
23                     </asp:ListBox></td>
24                 <td align="center" style="width: 20%">
25                     <asp:Button ID="Addbtn" runat="server" OnClick="Addbtn_Click" Text="添加" /><br><br>
26                     <asp:Button ID="Deletebtn" runat="server" OnClick="Deletebtn_Click" Text="删除" /></td>
27                 <td style="width: 40%">
28                     <asp:ListBox ID="ListBox2" runat="server" Height="411px" SelectionMode="Multiple"
29                         Width="235px"></asp:ListBox></td>
30                 <td style="width: 43px">
31                     <asp:Button ID="Upbtn" runat="server" OnClick="Upbtn_Click" Text="上移" /><br><br>
32                     <asp:Button ID="Downbtn" runat="server" OnClick="Downbtn_Click" Text="下移" /></td>
33             </tr>
34             <tr>
35                 <td colspan="4" align=center>
36                     <asp:Button ID="precessadd" runat="server" Text="确认并提交" OnClick="precessadd_Click" /></td>
37             </tr>
38         </table>  
39<input id="ListBox1_Click" type="hidden" value="false" name="ListBox1_Click" runat="server">
40<input id="ListBox2_Click" type="hidden" value="false" name="ListBox2_Click" runat="server">
41<script language="vbscript">
42option explicit            
43sub ListBox1_ondblclick()
44myform.ListBox1_Click.value="true"
45myform.submit()
46end sub
47
48sub ListBox2_ondblclick()
49myform.ListBox2_Click.value="true"
50myform.submit()
51end sub
52</script>
53    </div>
54    </form>

后台代码:
  1    protected void Page_Load(object sender, EventArgs e)
  2    {
  3        if (IsPostBack)
  4        {
  5            if (ListBox1_Click.Value == "true")
  6            {
  7                Addbtn_Click(sender,e);
  8            }

  9                
 10
 11            if (ListBox2_Click.Value == "true")
 12            {
 13                Deletebtn_Click(sender,e);
 14            }

 15        }

 16    }

 17    protected void precessadd_Click(object sender, EventArgs e)
 18    {
 19        if (IsValid)
 20        {
 21            //写入流程名称
 22            //声明实体类
 23            Cvv.Mode.Bases.Process _process = new Cvv.Mode.Bases.Process();
 24
 25            //从表单中取值初始化实体类
 26            _process.ProcessName = tbProcessName.Text;
 27
 28            //声明业务对象
 29            Cvv.BLL.Bases.ProcessBLL _processBLL = new Cvv.BLL.Bases.ProcessBLL();
 30            if (_processBLL.InsertProcess(_process) > 0)        //操作成功
 31            {
 32
 33            }

 34            else        //操作失败
 35            {
 36                Response.Write("<script>alert('很抱歉,添加失败!');location.href ='" + Request.ServerVariables["HTTP_REFERER"+ "';</Script>");
 37                Response.End();
 38            }

 39
 40            //写入流程过程
 41            //声明实体类.声明业务对象
 42            Cvv.Mode.Bases.ProcessDetailed _processDetailed = new Cvv.Mode.Bases.ProcessDetailed();
 43            Cvv.BLL.Bases.ProcessDetailedBLL _processDetailedBLL = new Cvv.BLL.Bases.ProcessDetailedBLL();
 44
 45            //从表单中取值初始化实体类,并循环写入
 46            for (int i = 0; i < ListBox2.Items.Count; i++)
 47            {
 48                _processDetailed.ProcessID = _process.ProcessID;
 49                _processDetailed.DepartmentID = new Guid(ListBox2.Items[i].Value);
 50                _processDetailed.ProcessOrder = i + 1;
 51                //写入
 52                _processDetailedBLL.InsertProcessDetailed(_processDetailed);
 53
 54            }

 55            Response.Write("<script>alert('祝贺您,添加成功,请继续操作!');location.href ='" + Request.ServerVariables["HTTP_REFERER"+ "';</Script>");
 56        }

 57    }

 58
 59    //添加
 60    protected void Addbtn_Click(object sender, EventArgs e)
 61    {
 62        int i = 0;
 63        while (i < ListBox1.Items.Count)
 64        {
 65            if (ListBox1.Items[i].Selected == true)
 66            {
 67                ListBox2.Items.Add(ListBox1.Items[i]);
 68                ListBox1.Items.Remove(ListBox1.Items[i]);
 69            }

 70            else
 71                i += 1;
 72        }

 73    }

 74    //删除
 75    protected void Deletebtn_Click(object sender, EventArgs e)
 76    {
 77        int i = 0;
 78        while (i < ListBox2.Items.Count)
 79        {
 80            if (ListBox2.Items[i].Selected == true)
 81            {
 82                ListBox1.Items.Add(ListBox2.Items[i]);
 83                ListBox2.Items.Remove(ListBox2.Items[i]);
 84            }

 85            else
 86                i += 1;
 87        }

 88    }

 89    //上移
 90    protected void Upbtn_Click(object sender, EventArgs e)
 91    {
 92        //若不是第一行则上移
 93        if (ListBox2.SelectedIndex > 0)
 94        {
 95            string name = ListBox2.SelectedItem.Text;
 96            string ID = ListBox2.SelectedItem.Value;
 97            int index = ListBox2.SelectedIndex;
 98            ListBox2.SelectedItem.Text = ListBox2.Items[index - 1].Text;
 99            ListBox2.SelectedItem.Value = ListBox2.Items[index - 1].Value;
100            ListBox2.Items[index - 1].Text = name;
101            ListBox2.Items[index - 1].Value = ID;
102            ListBox2.SelectedIndex--;
103        }

104    }

105    //下移
106    protected void Downbtn_Click(object sender, EventArgs e)
107    {
108        //若不是最后一行则下移
109        if (ListBox2.SelectedIndex >= 0 && ListBox2.SelectedIndex < ListBox2.Items.Count - 1)
110        {
111            string name = ListBox2.SelectedItem.Text;
112            string ID = ListBox2.SelectedItem.Value;
113            int index = ListBox2.SelectedIndex;
114            ListBox2.SelectedItem.Text = ListBox2.Items[index + 1].Text;
115            ListBox2.SelectedItem.Value = ListBox2.Items[index + 1].Value;
116            ListBox2.Items[index + 1].Text = name;
117            ListBox2.Items[index + 1].Value = ID;
118            ListBox2.SelectedIndex++;
119        }

120    }

在.net中使用obojectdata为:
 1    <form id="myform" runat="server">
 2    <div>
 3         <table  border="0"  width="300">  
 4             <tr>  
 5             <td  width="40%">
 6            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}"
 7            SelectMethod="GetDepartmentsAll" TypeName="Cvv.BLL.Bases.DepartmentBLL"></asp:ObjectDataSource>
 8            <asp:ListBox ID="list1" runat="server" DataSourceID="ObjectDataSource1" DataTextField="DepartmentName"
 9            DataValueField="DepartmentID" Height="411px" Width="235px" ondblclick="moveOption(document.myform.list1,document.myform.list2)"></asp:ListBox>             
10           </td>  
11           <td  width="20%"  align="center">  
12                <input  type="button"  value="添加"  onclick="moveOption(document.myform.list1,document.myform.list2)"><br><br>
13                <input  type="button"  value="删除"  onclick="moveOption(document.myform.list2,document.myform.list1)"> 
14           </td>  
15           <td  width="40%">
16           <asp:ListBox ID="list2" runat="server" ondblclick="moveOption(document.myform.list2,document.myform.list1)" Height="411px" Width="235px"></asp:ListBox>  
17           </td>  
18           <td>  
19               <button  onclick="changepos(list2,-1)"  type="button">上移</button><br>  
20               <button  onclick="changepos(list2,1)"  type="button">下移</button>  
21           </td>  
22           </tr>  
23         </table>  
24<script  language="JavaScript">  
25<!--  
26function  moveOption(e1,  e2){  
27           try{  
28           for(var  i=0;i<e1.options.length;i++){  
29           if(e1.options[i].selected){  
30           var  e  =  e1.options[i];  
31           e2.options.add(new  Option(e.text,  e.value));  
32           e1.remove(i);  
33           i=i-1  
34           }
  
35           }
  
36           //document.myform.city.value=getvalue(document.myform.list2);  
37           }
  
38           catch(e){}  
39}
  
40function  getvalue(geto){  
41           var  allvalue  =  "";  
42           for(var  i=0;i<geto.options.length;i++){  
43           allvalue  +=geto.options[i].value  +  ",";  
44           }
  
45           return  allvalue;  
46}
  
47function  changepos(obj,index)  
48{  
49           if(index==-1){  
50           if  (obj.selectedIndex>0){  
51           obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))  
52           }
  
53           }
  
54           else  if(index==1){  
55           if  (obj.selectedIndex<obj.options.length-1){  
56           obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))  
57           }
  
58           }
  
59}
  
60//-->  
61</script>  
62    </div>
63    </form>


下面是通用的:
 1    <form id="myform" runat="server">
 2    <div>
 3         <table  border="0"  width="300">  
 4             <tr>  
 5             <td  width="40%">
 6                 <select  style="WIDTH:100%"  multiple  name="list1"  size="12"  ondblclick="moveOption(document.myform.list1,  document.myform.list2)">  
 7                 <option  value="北京">北京</option>  
 8                 <option  value="上海">上海</option>  
 9                 <option  value="山东">山东</option>  
10                 <option  value="安徽">安徽</option>  
11                 <option  value="重庆">重庆</option>  
12                 <option  value="福建">福建</option>  
13                 <option  value="甘肃">甘肃</option>  
14                 <option  value="广东">广东</option>  
15                 <option  value="广西">广西</option>  
16                 <option  value="贵州">贵州</option>  
17                 <option  value="海南">海南</option>  
18                 <option  value="河北">河北</option>  
19                 <option  value="黑龙江">黑龙江</option>  
20                 <option  value="河南">河南</option>  
21                 <option  value="湖北">湖北</option>  
22                 <option  value="湖南">湖南</option>  
23                 <option  value="内蒙古">内蒙古</option>  
24                 <option  value="江苏">江苏</option>  
25                 <option  value="江西">江西</option>  
26                 <option  value="吉林">吉林</option>  
27                 <option  value="辽宁">辽宁</option>  
28                 <option  value="宁夏">宁夏</option>  
29                 <option  value="青海">青海</option>  
30                 <option  value="山西">山西</option>  
31                 <option  value="陕西">陕西</option>  
32                 <option  value="四川">四川</option>  
33                 <option  value="天津">天津</option>  
34                 <option  value="西藏">西藏</option>  
35                 <option  value="新疆">新疆</option>  
36                 <option  value="云南">云南</option>  
37                 <option  value="浙江">浙江</option>  
38                 <option  value="香港">香港</option>  
39                 <option  value="澳门">澳门</option>  
40                 <option  value="台湾">台湾</option>  
41                 <option  value="其他">其他</option>  
42                 </select>  
43           </td>  
44           <td  width="20%"  align="center">  
45                <input  type="button"  value="添加"  onclick="moveOption(document.myform.list1,  document.myform.list2)"><br><br>
46                <input  type="button"  value="删除"  onclick="moveOption(document.myform.list2,  document.myform.list1)"> 
47           </td>  
48           <td  width="40%">  
49               <select  style="WIDTH:100%"  multiple  name="list2"  size="12"  ondblclick="moveOption(document.myform.list2,  document.myform.list1)">  
50               </select>  
51           </td>  
52           <td>  
53               <button  onclick="changepos(list2,-1)"  type="button">上移</button><br>  
54               <button  onclick="changepos(list2,1)"  type="button">下移</button>  
55           </td>  
56           </tr>  
57         </table>  
58           值:<input  type="text"  name="city"  size="40">  
59<script  language="JavaScript">  
60<!--  
61function  moveOption(e1,  e2){  
62           try{  
63           for(var  i=0;i<e1.options.length;i++){  
64           if(e1.options[i].selected){  
65           var  e  =  e1.options[i];  
66           e2.options.add(new  Option(e.text,  e.value));  
67           e1.remove(i);  
68           i=i-1  
69           }
  
70           }
  
71           document.myform.city.value=getvalue(document.myform.list2);  
72           }
  
73           catch(e){}  
74}
  
75function  getvalue(geto){  
76           var  allvalue  =  "";  
77           for(var  i=0;i<geto.options.length;i++){  
78           allvalue  +=geto.options[i].value  +  ",";  
79           }
  
80           return  allvalue;  
81}
  
82function  changepos(obj,index)  
83{  
84           if(index==-1){  
85           if  (obj.selectedIndex>0){  
86           obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))  
87           }
  
88           }
  
89           else  if(index==1){  
90           if  (obj.selectedIndex<obj.options.length-1){  
91           obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))  
92           }
  
93           }
  
94}
  
95//-->  
96</script>  
97    </div>
98    </form>

选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。