使用 Javascript 调整 GridView 表格行顺序并保存到数据库_LINQ | ASP.NET 3.5 | SilverLight2 | MVC

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

  protected void Page_Load(object sender, EventArgs e)
  {

    System.Data.DataTable dt = new System.Data.DataTable();
    System.Data.DataRow dr;
    dt.Columns.Add(new System.Data.DataColumn("id", typeof(System.Int32)));
    dt.Columns.Add(new System.Data.DataColumn("Name", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("Score", typeof(System.Double)));
    System.Random rd = new System.Random();
    for (int i = 1; i < 6; i++)
    {
      dr = dt.NewRow();
      dr[0] = i;
      dr[1] = "【孟子E章】" + i.ToString();
      dr[2] = System.Math.Ceiling(rd.NextDouble() * 100);
      dt.Rows.Add(dr);
    }
    System.Data.DataView dv = new System.Data.DataView(dt);
    GridView1.DataSource = dv;
    GridView1.DataBind();

  }

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      e.Row.Attributes.Add("onclick", "change(this)");
    }
  }

  protected void SaveData_Click(object sender, EventArgs e)
  {
    String[] newData = NewOrder.Value.Split(',');
    Response.Write("<h2>将下面的  SQL 语句更新到数据库即可：</h2>");
    for (int i = 0; i < newData.Length; i++)
    {
      String[] order = newData[i].Split('|');
      Response.Write("<li>" + "Update TableName Set OrderIndex = " + order[1] + "  Where id = " + order[0]);
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>孟宪会之使用 Javascript 调整 GridView 表格行顺序并保存到数据库</title>

  <script type="text/javascript">
    var currentIndex = 1;
    var lastRow = null;
    var tableId = "<%=GridView1.ClientID %>"
    function swapNodes(item1, item2) {
      var itemtmp = item1.cloneNode(1);
      var parent = item1.parentNode;
      item2 = parent.replaceChild(itemtmp, item2);
      parent.replaceChild(item2, item1);
      parent.replaceChild(item1, itemtmp);
      itemtmp = null;
    }

    function Move(r) {
      var t = document.getElementById(tableId);
      if (currentIndex + r == 0 || currentIndex + r == t.rows.length) {
        alert("已经无法移动了。");
        return;
      }
      swapNodes(t.rows[currentIndex], t.rows[currentIndex + r]);
      currentIndex += r;
    }

    function change(r) {
      var t = document.getElementById(tableId);
      currentIndex = r.rowIndex;
      if (lastRow) {
        lastRow.style.backgroundColor = "#FFF";
      }
      r.style.backgroundColor = "#F88";
      lastRow = r;
    }

    function SaveToDataBase() {
      var newOrder = document.getElementById("<%=NewOrder.ClientID %>");
      var t = document.getElementById(tableId);
      var ret = [];
      for (i = 1; i < t.rows.length; i++) {
        dataId = t.rows[i].cells[0].getElementsByTagName("input")[0].value;
        ret.push(dataId + "|" + i);
      }
      newOrder.value = ret.toString();
    }
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <asp:GridView ID="GridView1" runat="server" CellPadding="6" AutoGenerateColumns="true" OnRowDataBound="GridView1_RowDataBound">
    <HeaderStyle BackColor="#AAAADD" Font-Bold="True" HorizontalAlign="Center" />
    <Columns>
      <asp:TemplateField>
        <ItemTemplate>
          <input type="hidden" name="DataId" value="<%#Eval("id") %>" />
          <asp:CheckBox ID="x" runat="server" />
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
  <div style="padding: 10px 0">
    <input type="button" value="上升" onclick="Move(-1)" />
    <input type="button" value="下降" onclick="Move(1)" />
    <asp:HiddenField ID="NewOrder" runat="server" />
    <asp:Button ID="SaveData" runat="server" Text="保存到服务器" OnClientClick="SaveToDataBase()"
      OnClick="SaveData_Click" />
  </div>
  </form>
</body>
</html>