Lengzihaohong

学无止境（专注于DotNet技术）
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ListBox控件上移、下移操作（Ajax）

Posted on 2007-06-22 13:50  神话  阅读(1379)  评论(0)  编辑  收藏  举报
ListBox控件上移、下移操作，网上找的部分代码，修改成用Ajax实现，记录下供往后开发用,以下是摘抄项目中的部分前台代码*.aspx、SQL脚本、后台代码只给出上移、下移部分操作：
<body>
    <form id="form1" runat="server">
    <script>
    
    var newIndex=0;
       
    function AddDepart()
    {
        var departName=document.getElementById("tbDepartName").value;
        Member_DepartEdit.AddDep(departName);  //向部门数据表中插入数据
        BindLstBox();    
    }
    
    function changepos(obj,index)   //按钮移动操作
    {
        if(index == -1){  //上移操作
            if (obj.selectedIndex>0){
                obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1));
                newIndex = obj.selectedIndex;
                Member_DepartEdit.Sort(obj.options[newIndex+1].value,obj.options[newIndex].value,"Pre");
            }
        }
    else if(index == 1){   //下移操作
        if (obj.selectedIndex<obj.options.length-1){
            obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1));
            newIndex = obj.selectedIndex;
            Member_DepartEdit.Sort(obj.options[newIndex-1].value,obj.options[newIndex].value,"Next");
            }
        }
        BindLstBox();
    }
   function BindLstBox()
   {
         var obj=Member_DepartEdit.BindLstBox();   //获取部门列表
         if(obj!=null)
         {
            document.all("lstBox").length=0;
            var ds=obj.value;
            if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)
            {
                //分别在ListBox上显示
                for(var i=0;i<ds.Tables[0].Rows.length;i++)
                {
                    var name=ds.Tables[0].Rows[i].departName;
                    var id=ds.Tables[0].Rows[i].departID;
                    document.all("lstBox").options.add(new Option(name,id));
                }
            }
         }
         document.all("lstBox").options[newIndex].selected=true;   //显示移动后的行
   }
    </script>
    <div>部门名称：<input type="text" id="tbDepartName" name="tbDepartName" />&nbsp;&nbsp;
    <input type="button"  id="btnSave" name="btnSave" onclick="AddDepart();" value="添 加"/>
    <br /><br />
    <div>
       <asp:ListBox runat="server" ID="lstBox" Width="120px" Height="150px"></asp:ListBox>
    </div>
    <br />
    <div>
        <button onclick="changepos(lstBox,-1)" type="button">上移</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="changepos(lstBox,1)" type="button">下移</button>
    </div>
    </form>
</body>

*.asp.cs
    [AjaxPro.AjaxMethod]
    public void Sort(Int32 iImpactID,Int32 iDepartID,string strOperate)
    {
        Department.SetSortDep(iImpactID, iDepartID, strOperate);
    }

数据访问层代码
 SetSortDep


表SQL脚本部分
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Department]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Department]
GO

CREATE TABLE [dbo].[Department] (
    [departID] [int] IDENTITY (1, 1) NOT NULL ,
    [departName] [varchar] (32) COLLATE Chinese_PRC_CI_AS NOT NULL ,
    [leagueID] [int] NOT NULL ,
    [visible] [bit] NOT NULL ,
    [sortDep] [int] NOT NULL 
) ON [PRIMARY]
GO


存储过程代码
CREATE proc Dep_SetSort
@ReturnValue int=0 output,
@impactID int,
@depID int,
@operate varchar(10)='Next'
as
if(@operate='Pre')
begin
    --上移
    update [Department] set sortDep=sortDep+1 where departID=@impactID
    update [Department] set sortDep=sortDep-1 where departID=@depID
end
if(@operate='Next')
begin
    --下移
    update [Department] set sortDep=sortDep-1 where departID=@impactID
    update [Department] set sortDep=sortDep+1 where departID=@depID
end
set @ReturnValue=1
GO