在DataGrid加了个模板列实现多选，处理翻页...

本文介绍如何在ASP.NET中实现多页面选择的问题。其具体思路很简单：用隐藏的INPUT记住每次选择的项目，在进行数据绑定时，检查保存的值，再在DataGrid中进行选中显示。下面时完整的代码和例子：查看例子SelectMultiPages.aspx<%@ Page EnableViewState="true" CodeBehind="SelectMultiPages.aspx.cs" Language="c#"
AutoEventWireup="false" Inherits="eMeng.Exam.SelectMultiPages" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>跨页面实现多选</title>
<META http-equiv="content-type" content="text/html; charset=gb2312">
<style>
* {FONT-SIZE:12PX}
#Status {text-align:left}
</style>
<script language="JAVASCRIPT">
function AddRemoveValues(oChk) {
//在处理这个地方需要注意的是：你保存的值应该具有唯一性，这样才能不会替换错误的项。
if(oChk.checked)
SelectMultiPage.HdnSelectedValues.value += "," + oChk.value;
else
SelectMultiPage.HdnSelectedValues.value = SelectMultiPage.HdnSelectedValues.value.replace("," + oChk.value,"");
}
</script>
</HEAD>
<BODY>
<form id="SelectMultiPage" runat="server">
<asp:datagrid id="DataGrid1" HorizontalAlign="Center" AutoGenerateColumns="False" Width="600px"
AllowPaging="True" runat="server">
<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>
<HeaderStyle BackColor="#AAAADD" Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" Visible="True"></PagerStyle>
<Columns>
<asp:TemplateColumn HeaderText="选择">
<ItemTemplate>
<input type="checkbox" runat="server" id="chkSelect" onclick="AddRemoveValues(this)"
value='<%#DataBinder.Eval(Container.DataItem,"Title")%>'/>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="文章标题">
<ItemTemplate>
<asp:Literal Text='<%# DataBinder.Eval(Container.DataItem, "Title") %>' runat="server" ID="TitleShow"/>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="发布时间">
<ItemTemplate>
<asp:Literal Text='<%# DataBinder.Eval(Container.DataItem, "CreateDate").ToString() %>' runat="server"/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
<div align=center>
<asp:button id="Button1" runat="server" Text="得到所选的值"></asp:button>
<div id="Status">
<asp:label id="Label1" runat="server"></asp:label>
</div>
<INPUT id="HdnSelectedValues" type="hidden" name="HdnSelectedValues" runat="server">
</div>
</form>
</BODY>
</HTML>SelectMultiPages.aspx.csusing System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;namespace eMeng.Exam
{
/// <summary>
/// SelectMultiPages 的摘要说明。
/// </summary>
public class SelectMultiPages : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.HtmlControls.HtmlInputHidden HdnSelectedValues;
protected System.Web.UI.WebControls.DataGrid DataGrid1;private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!Page.IsPostBack)
BindData();
}
private void DataGrid1_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
{
DataGrid1.CurrentPageIndex = e.NewPageIndex;
BindData();
}void BindData()
{
OleDbConnection cn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
+ HttpContext.Current.Server.MapPath("aspx.mdb"));
OleDbDataAdapter da = new OleDbDataAdapter("Select Title, CreateDate from Document",cn);
DataSet ds = new DataSet();
da.Fill(ds);
DataGrid1.DataSource= ds;
DataGrid1.DataBind();
}private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
//重新显示所选择的项目
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if(HdnSelectedValues.Value.IndexOf(((Literal)e.Item.Cells[1].FindControl("TitleShow")).Text) >= 0 )
{
HtmlInputCheckBox ChkSelected = (HtmlInputCheckBox)(e.Item.Cells[0].FindControl("ChkSelect"));
ChkSelected.Checked = true;
}
}
}
private void Button1_Click(object sender, System.EventArgs e)
{
//为了显示的方便进行替换的
Label1.Text = HdnSelectedValues.Value.Replace(",","<li>");
}#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.DataGrid1.ItemDataBound +=
new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
this.DataGrid1.PageIndexChanged +=
new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.DataGrid1_PageIndexChanged);
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);}
#endregion }
}
<%@ Page language="c#" Codebehind="DataGrid翻页多选.aspx.cs" AutoEventWireup="false" Inherits="bsTest2005_8_16.Samples.DataGrid翻页多选" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DataGrid翻页多选</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function selectAll(obj)
{
var i = 3;
var cbname = "DataGrid1__ctl"+i+"_CheckBox1";//DataGrid里嵌套的CheckBox的id是有规律的，利用之
while(document.getElementById(cbname)!=null)
{
    document.getElementById(cbname).checked = obj.checked;
selectOne(document.getElementById(cbname));
i = i+1;
cbname = "DataGrid1__ctl"+i+"_CheckBox1";
}
}

function selectOne(obj)
{
var curID = obj.parentElement.parentElement.cells[1].innerText;
var selectedID = document.getElementById('TextBox1').value;
if(obj.checked)
{
if(selectedID.indexOf(curID)<0)
document.getElementById('TextBox1').value = selectedID + curID + ',';
}
else
{
document.getElementById('TextBox1').value = selectedID.replace(curID,'').replace(",,",",");
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 8px" cellSpacing="0"
cellPadding="0" width="80%" border="0">
<TR>
<TD>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button"></asp:Button></TD>
</TR>
<TR id="tr1">
<TD id="td1">
<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False" PageSize="8" AllowPaging="True">
<Columns>
<asp:TemplateColumn>
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
<HeaderTemplate>
<asp:CheckBox id="CheckBoxAll" runat="server" Text="本页全选"></asp:CheckBox>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="field1"></asp:BoundColumn>
<asp:BoundColumn DataField="field2"></asp:BoundColumn>
<asp:BoundColumn DataField="field3"></asp:BoundColumn>
</Columns>
</asp:DataGrid></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;namespace bsTest2005_8_16.Samples
{
/// <summary>
/// DataGrid翻页多选的摘要说明。
/// </summary>
public class DataGrid翻页多选 : System.Web.UI.Page
{
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.WebControls.Button Button1;
        protected System.Web.UI.WebControls.DataGrid DataGrid1;

        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!IsPostBack)
                BindData();
        }        private void BindData()
        {
            //模拟出一些原始数据绑定DataGrid
            DataTable dt1 = new DataTable();
            dt1.Columns.Add("field1");
            dt1.Columns.Add("field2");
            dt1.Columns.Add("field3");            Random radm = new Random();
            for(int i=1;i<30;i++)
                dt1.Rows.Add(new object[]{"id"+i.ToString(),(i+1)*(i+2)," ABC"+radm.Next(10000).ToString()});

            this.DataGrid1.DataSource=dt1;
            this.DataGrid1.DataBind();
        }        private void DataGrid1_PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
        {
            this.DataGrid1.CurrentPageIndex = e.NewPageIndex;
            BindData();
        }
        private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            if(e.Item.ItemType == ListItemType.Header)
            {
                CheckBox cb = e.Item.Cells[0].FindControl("CheckBoxAll") as CheckBox;
                cb.Attributes.Add("onclick","selectAll(this);");//本页全选或取消的脚本函数
            }
            if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                CheckBox cb = e.Item.Cells[0].FindControl("CheckBox1") as CheckBox;
                cb.Attributes.Add("onclick","selectOne(this);");//选中或取消当前行的脚本函数                //如果当前行已选，那么checkbox应该勾上
                string curID = e.Item.Cells[1].Text;
                if(this.TextBox1.Text.IndexOf(curID)>-1)
                    cb.Checked = true;
            }        }        private void Button1_Click(object sender, System.EventArgs e)
        {
            string a = this.TextBox1.Text;

        } #region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
            this.Button1.Click += new System.EventHandler(this.Button1_Click);
            this.DataGrid1.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.DataGrid1_PageIndexChanged);
            this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
            this.Load += new System.EventHandler(this.Page_Load);        }
#endregion

}
}

调试易

在DataGrid加了个模板列实现多选，处理翻页...

解决方案 »