某一行进行上移或下移分为两种,服务器端或客户端,服务器端方法每上下一步都可以记录到数据库中,客户端方便只在提交时记录到数据库中,根据自己的情况选择适用的方法.
1.服务器端
服务器端上下移动要提交到服务器
1.1 Html代码
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:BoundField DataField="name" HeaderText="name" />
<asp:BoundField DataField="age" HeaderText="age" />
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="UP" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Down" onclick="Button2_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
后台代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = CreateDataTable();
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
/// <summary>
/// 创建一个表,用于绑定数据
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
///
public DataTable CreateDataTable()
{
DataTable dt = new DataTable();
//DataColumn dc=dt.n
dt.Columns.Add("id", typeof(Int16)); dt.Columns.Add("name", typeof(String));
dt.Columns.Add("age", typeof(Int16)); for (int i = 0; i < 6; i++)
{
DataRow dr = dt.NewRow(); dr["id"] = i;
dr["name"] = "aa" + i.ToString(); ; dr["age"] = 12 + i;
dt.Rows.Add(dr);
} ViewState["dataTable"] = dt; return dt;
}
protected void exchangeRow(DataRow dataRow, DataRow tempRow)
{
tempRow["id"] = dataRow["id"];
tempRow["name"] = dataRow["name"]; tempRow["age"] = dataRow["age"];
}
protected void Button1_Click(object sender, EventArgs e)
{
DataTable dataTable = (DataTable)ViewState["dataTable"];
string rowindex = ((GridViewRow)((Button)sender).Parent.Parent).RowIndex.ToString();
if (int.Parse(rowindex) - 1 < 0)
{
Page.RegisterStartupScript("", "<script>alert('TOP!');</script>");
}
else
{
DataRow tempRow = dataTable.NewRow();
exchangeRow(dataTable.Rows[int.Parse(rowindex) - 1], tempRow);
exchangeRow(dataTable.Rows[int.Parse(rowindex)], dataTable.Rows[int.Parse(rowindex) - 1]);
exchangeRow(tempRow, dataTable.Rows[int.Parse(rowindex)]);
}
GridView1.DataSource = dataTable;
GridView1.DataBind();
}
protected void Button2_Click(object sender, EventArgs e)
{
DataTable dataTable = (DataTable)ViewState["dataTable"];
string rowindex = ((GridViewRow)((Button)sender).Parent.Parent).RowIndex.ToString();
if (int.Parse(rowindex) + 1 > dataTable.Rows.Count - 1)
{
Page.RegisterStartupScript("", "<script>alert('END!');</script>");
}
else
{
DataRow tempRow = dataTable.NewRow();
exchangeRow(dataTable.Rows[int.Parse(rowindex) + 1], tempRow);
exchangeRow(dataTable.Rows[int.Parse(rowindex)], dataTable.Rows[int.Parse(rowindex) + 1]);
exchangeRow(tempRow, dataTable.Rows[int.Parse(rowindex)]);
}
GridView1.DataSource = dataTable; GridView1.DataBind();
}
2.客户端上下移
首先在gridview或dataGrid中创建模板列,模板列中加上同容:
<input id="but_up" type="button" value="上" onclick="moveUp(this)" /><input id="but_dn" type="button"value="下" onclick="moveDown(this)" /></div>
在</from>后面加上下面的代码
<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
//遍历element的子结点
if(element==null)
return;
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
//判断是否是空白文本结点，如果是，则删除该结点
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//获得表格对象
var _table=document.getElementById("dg_SelectedItem");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a)
{
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是第一行，则与上一行交换顺序
if(_row.previousSibling)
swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a)
{
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是最后一行，则与下一行交换顺序
if(_row.nextSibling)
swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
//获取父结点
var _parent=node1.parentNode;
//获取两个结点的相对位置
var _t1=node1.nextSibling;
var _t2=node2.nextSibling;
//将node2插入到原来node1的位置
if(_t1)_parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//将node1插入到原来node2的位置
if(_t2)_parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
//-->
</script>
对gridview进行数据绑定后即可.
本文作者:网友 来源:网络 http://hi.baidu.com/net1979/