GridView如何实现多选

zy41796745 2010-05-20 05:50:04

现在需要实现如上效果，在gridview上单击某一行，实现选中或取消选中某一行，然后再通过页面上的功能按钮来对选中行作相应操作，如（删除）

实现路如下：

1、在服务器端程序中，RowDataBound事件中，对每一行数据进行JS脚本事件绑定

protected void GridViewUnread_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
boundScriptToCell(e);
}
}

private void boundScriptToCell(GridViewRowEventArgs e)
{
e.Row.Attributes.Add("id", e.Row.ClientID);
e.Row.Attributes.Add("onclick", string.Format("AddOrRemove('{0}','{1}')", ((UserTask)e.Row.DataItem).TaskID, e.Row.ClientID));
}

2、用页面的JS程序来实现，选中或取消选中行，实现思路就是每单击一行时，将该行的数据值（主键）用字符串相加的方式，存放到页面某一隐藏r的服务端控件中，取消选中某一行时，反之从控件值中删除该行主键值（注意JS脚本位置须放在页面底部，要不然页面控件元素未加载完成，JS会报错）

<script type="text/javascript">
//向ForMove控件中添加数据，或者删除数据
function AddOrRemove(ForMoveTaskID,rowid)
{

var index = document.getElementById("<%=UnreadTaskID.ClientID%>").value.indexOf(ForMoveTaskID+"#");
if(index == -1)
{
document.getElementById(rowid).style.backgroundColor = "#FFEBBB";
document.getElementById("<%=UnreadTaskID.ClientID%>").value +=ForMoveTaskID+"#";
}
else
{
document.getElementById(rowid).style.backgroundColor = "";
var temp = document.getElementById("<%=UnreadTaskID.ClientID%>").value;
document.getElementById("<%=UnreadTaskID.ClientID%>").value = temp.replace(ForMoveTaskID+"#","");
}
ShowButton();
}
//根据选定内容决定是否显示提交按钮
function ShowButton()
{
if(document.getElementById("<%=UnreadTaskID.ClientID%>").value == "")
{
document.getElementById("<%=DoMoveButton.ClientID%>").style.visibility="hidden";
}
else
{
document.getElementById("<%=DoMoveButton.ClientID%>").style.visibility="visible";
}
}
</script>

3、功能按钮，实现操作，这个就跟普通按钮一样，写一个服务器端click事件，事件触发后，直接从存储选中值的那个服务端控件中取出值，然后再进行相应操作就行了。

protected void DoMoveButton_Click(object sender, EventArgs e)
{
string[] TaskIDs = this.UnreadTaskID.Value.Split('#');

　　//操作去吧

}

...全文