jquery实现页面无刷新上升下降排序

打开sqlserver 建一个数据库 代码如下：

create database Test
  on  primary 
 (
 /*--数据文件的具体描述--*/
    name='Test',  -- 主数据文件的逻辑名称
     filename='E:\Test.mdf',
     size=3mb, --主数据文件的初始大小
     maxsize=10mb, -- 主数据文件增长的最大值
    filegrowth=15%--主数据文件的增长率
)
 log on
 (
 /*--日志文件的具体描述,各参数含义同上--*/
     name='Test_log',
     filename='E:\Test.ldf',
     size=2mb,
     filegrowth=1mb
 )
use Test
go
if object_id(N'orderBy',N'U') is not null drop table orderBy
create table orderBy(
    ID      int     identity(1,1) primary key,--主键自增
    Name       nvarchar(max),
    orderId int)
    go

新建一个文件夹取名为“UpDown”，打开 VS 2012 >文件>新建>网站>ASP.NET 空网站，项目Web位置浏览到“UpDown”目录，
在项目根目录创建文件夹App_Code文件夹，将微软的SQLHelper.cs类 文件拷贝到App_Code文件夹，SQLHelper.cs 可以在微软官方下载。

新建js文件夹，将jquery-1.7.2.min.js文件拷贝到js文件夹。jquery-1.7.2.min.js 可以在jquery官网下载。

打开web.config 在<configuration></configuration>中间添加 
<appSettings>
    <add key="Test" value="Server=.;User id =sa;Pwd=sa;Database=Test"/>
</appSettings>
在项目根目录添加一个Web服务取名为“WS.asmx”，勾上将代码放在单独的文件中，
WS.cs 文件代码如下：

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class WS : System.Web.Services.WebService {
        public static string connStr = System.Configuration.ConfigurationManager.AppSettings["Test"].ToString();

    /// <summary>
    /// 下拉框查询方法
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public string SelectName()     {
        string sqlStr = "select * from  orderBy order by orderId";
        DataSet ds = SqlHelper.ExecuteDataset(connStr, CommandType.Text, sqlStr);
        string listStr = "";
        if (ds.Tables[0].Rows.Count == 0)
        {
            return "";
        }
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            listStr += "<option value='" + dr["ID"].ToString() + "'>" + dr["Name"].ToString() + "</option>";
        }
        return listStr;
    }
    /// <summary>
    /// 表格查询方法
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public string selectNameTable() {
        string sqlStr = "select * from  orderBy order by orderId";
        DataSet ds = SqlHelper.ExecuteDataset(connStr, CommandType.Text, sqlStr);

        if (ds.Tables[0].Rows.Count == 0)
        {
            return "";
        }
        string strHtml = "<table>";
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            strHtml += "<tr id='_tr" + ds.Tables[0].Rows[i]["orderId"] + "'><td>" + ds.Tables[0].Rows[i]["Name"].ToString() + "</td><td><input type='button' value='上升' onclick='Up(" + ds.Tables[0].Rows[i]["orderId"] + ")' /></td><td><input type='button' value='下降' onclick='Down(" + ds.Tables[0].Rows[i]["orderId"] + ")' /></td></tr>";
        }
        return strHtml + "</table>";
    }
    /// <summary>
    /// 添加方法
    /// </summary>
    /// <param name="Name">参数Name为前台JS传入</param>
    /// <returns></returns>
    [WebMethod]
    public int InsertName(string Name) {
        //查询orderBy表内数据
        DataSet ds = SqlHelper.ExecuteDataset(connStr, CommandType.Text, "select * from orderBy where Name='" + Name + "'");
        //判断如果存在就返回0
        if (ds.Tables[0].Rows.Count>0)
        {
            return 0;
        }
        string sqlStr = "insert into  orderBy (Name) values('"+Name+"');update orderBy set orderId=SCOPE_IDENTITY() where ID=SCOPE_IDENTITY()";

       int i=SqlHelper.ExecuteNonQuery(connStr, CommandType.Text, sqlStr);
        return i;
    }
    /// <summary>
    /// 修改方法
    /// </summary>
    /// <param name="Name">参数Name，ID前台JS传入</param>
    /// <param name="ID"></param>
    /// <returns></returns>
    [WebMethod]
    public int UpdateName(string Name,int ID) {
        DataSet ds = SqlHelper.ExecuteDataset(connStr,CommandType.Text,"select * from orderBy where Name='"+Name+"'");
        if (ds.Tables[0].Rows.Count > 0)
        {
            return 0;
        }
        string sqlStr = "update orderBy set Name='"+Name+"' where ID="+ID;
        int i = SqlHelper.ExecuteNonQuery(connStr, CommandType.Text, sqlStr);
        return i;
    }
    /// <summary>
    /// 删除方法
    /// </summary>
    /// <param name="Name"></param>
    /// <param name="ID"></param>
    /// <returns></returns>
    [WebMethod]
    public int DeleteName(string Name,int ID) {
        string sqlStr = "delete from orderBy where Name='"+Name+"' and ID="+ID;
        int i = SqlHelper.ExecuteNonQuery(connStr,CommandType.Text,sqlStr);
        return i;
    }
    /// <summary>
    /// 修改排序方法
    /// </summary>
    /// <param name="orderA"></param>
    /// <param name="orderB"></param>
    /// <returns></returns>
    [WebMethod]
    public int UpdateNameOrder(int orderA,int orderB) {
                DataSet ds = SqlHelper.ExecuteDataset(connStr, CommandType.Text, "select ID from orderBy where  orderId=" + orderA + ";select ID from orderBy where  orderId=" + orderB + "");
        int IDA =Convert.ToInt32(ds.Tables[0].Rows[0][0]);
        int IDB =Convert.ToInt32(ds.Tables[1].Rows[0][0]);
        string sqlstr = "update orderBy set orderId=" + orderB + " where ID="+IDA+";update orderBy set orderId="+orderA+" where ID="+IDB+"";
        int i = SqlHelper.ExecuteNonQuery(connStr,CommandType.Text,sqlstr);
        return i;
    }
}

新建一个Default.aspx页面 代码如下：

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        //页面加载完成执行
        $(document).ready(function () {
            //绑定添加按钮的click方法Insert
            $("#BtnInsert").bind('click', { foo: 'click' }, Insert);
            //绑定修改按钮的click方法Update 并设为 不可操作
            $("#BtnUpdate").bind('click', { foo: 'click' }, Update).attr('disabled', 'disabled');
            //绑定删除按钮的click方法Delete 并设为 不可操作
            $("#BtnDelete").bind('click', { foo: 'click' }, Delete).attr('disabled', 'disabled');
            //执行selectName 方法
            selectName();
            //执行selectNameTable方法
            selectNameTable();
            //绑定下拉框的change事件
            $("#Select1").change(function () {
                if ($("#Select1").val() != 0) {
                    $("#BtnInsert").attr('disabled', 'disabled');
                    $("#BtnUpdate").removeAttr('disabled');
                    $("#BtnDelete").removeAttr('disabled');
                    $("#txtName").val($("#Select1").find("option:selected").text());
                } else {
                    $("#txtName").val("");
                    $("#BtnInsert").removeAttr('disabled');
                    $("#BtnUpdate").attr('disabled', 'disabled');
                    $("#BtnDelete").attr('disabled', 'disabled');
                }
            })
        })
        //添加方法
        function Insert(events) {
            if ($("#txtName").val() == "") {
                alert("不能为空！");
                return;
            }
            if ($("#Select1").val() == 0) {
                var options = {
                    type: "POST",
                    url: "WS.asmx/InsertName",
                    data: "{Name:'" + $("#txtName").val().trim()
                        + "'}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d > 0) {
                            selectName();
                            selectNameTable();
                            $("#BtnUpdate").attr('disabled', 'disabled');
                            $("#BtnDelete").attr('disabled', 'disabled');
                            alert("添加成功！")
                        } else {
                            alert("已存在！")
                        }
                    }
                };
                $.ajax(options);
            }
        }
        //修改方法
        function Update(events) {
            if ($("#Select1").val() != 0) {
                //判断如果下拉框的文本内容和文本框的内容一样 弹出提示“未修改！”
                if ($("#txtName").val() == $("#Select1").find("option:selected").text()) {
                    alert("未修改！");
                    return;
                }
                var options = {
                    type: "POST",
                    url: "WS.asmx/UpdateName",
                    data: "{Name:'" + $("#txtName").val().trim()
                        + "',ID:" + $("#Select1").val() + "}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d > 0) {
                            selectName();
                            selectNameTable();
                            $("#BtnUpdate").attr('disabled', 'disabled');
                            $("#BtnDelete").attr('disabled', 'disabled');
                            $("#BtnInsert").removeAttr('disabled');
                            alert("修改成功！")
                        } else {
                            alert("修改失败！已有相同的名称")
                        }
                    }
                };
                $.ajax(options);
            }
        }
        //删除方法
        function Delete(events) {
            if ($("#Select1").val() != 0) {
                var options = {
                    type: "POST",
                    url: "WS.asmx/DeleteName",
                    data: "{Name:'" + $("#Select1").find("option:selected").text()
                        + "',ID:" + $("#Select1").val() + "}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d > 0) {
                            $("#txtName").val("");
                            selectName();
                            selectNameTable();
                            $("#BtnInsert").removeAttr('disabled');
                            $("#BtnUpdate").attr('disabled', 'disabled');
                            $("#BtnDelete").attr('disabled', 'disabled');
                            alert("删除成功！")
                        } else {
                            alert("删除失败！")
                        }
                    }
                };
                $.ajax(options);
            }
        }
        //下拉框查询方法
        function selectName() {
            $("#Select1").empty();
            var options = {
                type: "POST",
                url: "WS.asmx/SelectName",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $("#Select1").append("<option value='0'>添加姓名</option>" + response.d);
                }
            };
            $.ajax(options);
        }
        //表格查询方法
        function selectNameTable() {
            $("#Show_Table").empty();
            var options = {
                type: "POST",
                url: "WS.asmx/SelectNameTable",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.d != "") {
                        $("#Show_Table").html(response.d);
                    }
                }
            };
            $.ajax(options);
        }
        //上升方法
        function Up(o) {
            o = $("#_tr" + o);
            if (o.prev().length > 0) {
                //克隆o
                var tmp = o.clone();
                //匹配o的前一个元素
                var oo = o.prev();
                //将tem中的_tr替换为空得到orderId
                var orderA = tmp.attr("id").replace("_tr", "");
                //将oo中的_tr替换为空得到orderId
                var orderB = oo.attr("id").replace("_tr", "");
                var options = {
                    type: "POST",
                    url: "WS.asmx/UpdateNameOrder",
                    data: "{orderA:" + orderA + ",orderB:" + orderB + "}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d > 0) {
                            selectName();
                            selectNameTable();
                            $("#BtnInsert").removeAttr('disabled');
                            $("#BtnUpdate").attr('disabled', 'disabled');
                            $("#BtnDelete").attr('disabled', 'disabled');
                            alert("修改排序成功！");
                        } else {
                            alert("修改排序失败！");
                        }
                    }
                };
                $.ajax(options);
            }
        }
        //下降方法
        function Down(o) {
            o = $("#_tr" + o);
            if (o.next().length > 0) {
               //克隆o
                var tmp = o.clone();
               //匹配o的后一个元素
                var oo = o.next();
               //将tem中的_tr替换为空得到orderId
                var orderA = tmp.attr("id").replace("_tr", "");
                //将oo中的_tr替换为空得到orderId
                var orderB = oo.attr("id").replace("_tr", "");
                var options = {
                    type: "POST",
                    url: "WS.asmx/UpdateNameOrder",
                    data: "{orderA:" + orderA + ",orderB:" + orderB + "}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d > 0) {
                            selectName();
                            selectNameTable();
                            $("#BtnInsert").removeAttr('disabled');
                            $("#BtnUpdate").attr('disabled', 'disabled');
                            $("#BtnDelete").attr('disabled', 'disabled');
                            alert("修改排序成功！");
                        } else {
                            alert("修改排序失败！");
                        }
                    }
                };
                $.ajax(options);
            }
        }
    </script>
</head>
<body>
    <div>
        <input id="txtName" type="text" />名字
        <select id="Select1" style=" 100px">
            <option></option>
        </select>
        <input id="BtnInsert" type="button" value="添加" />
        <input id="BtnUpdate" type="button" value="修改" />
        <input id="BtnDelete" type="button" value="删除" />
    </div>
    <div id="Show_Table">
    </div>
</body>
</html>

好了，整个示例到此就已经全部写完了，欢迎大家能踊跃指出代码中的不足，提出宝贵的意见。谢谢！