DataGrid中跨页面选择功能

最新推荐文章于 2020-05-07 09:50:26 发布
最新推荐文章于 2020-05-07 09:50:26 发布
阅读量519 收藏
点赞数
分类专栏： asp.net 文章标签： datagrid server dataset button object asp.net
跨页面实现多选
作者：孟宪会 发表于：2004-10-03 15:33:40
本文介绍如何在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" οnclick="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.cs
using 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 
}
}

利用checkbox实现全选功能，删除，显示功能

C# 版本

CheckBoxDataGrid.aspx

<%@ Page language="c#" enableViewState = "true" Codebehind="DataGridCheckBox.aspx.cs"
AutoEventWireup="false" Inherits="eMeng.Exam.DataGridCheckBox.DataGridCheckBox" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>为DataGrid添加CheckBox控件的例子</title>
</HEAD>
<body>
<form id="frmMain" method="post" runat="server">
<asp:DataGrid id="dgMain" runat="server" Width="98%" AutoGenerateColumns="False" Font-Size="9pt" Font-Names="宋体">
 <AlternatingItemStyle ForeColor="ControlText" BackColor="White" />
 <ItemStyle ForeColor="ControlText" BackColor="WhiteSmoke" />
 <HeaderStyle Font-Bold="True" HorizontalAlign="Center" ForeColor="Black" VerticalAlign="Middle"
  BackColor="Control"></HeaderStyle>
 <Columns>
  <asp:TemplateColumn HeaderText="操作">
   <HeaderStyle HorizontalAlign="Center" Width="50px"></HeaderStyle>
   <ItemTemplate>
    <input type="hidden" id="SelectedID" runat="server"
    value='<%# DataBinder.Eval(Container.DataItem, "id")%>'/>
    <asp:CheckBox ID="chkExport" Runat="server" />
   </ItemTemplate>
  </asp:TemplateColumn>
  <asp:BoundColumn DataField="id" ReadOnly="True" HeaderText="序号">
   <HeaderStyle Width="50px"></HeaderStyle>
  </asp:BoundColumn>
  <asp:TemplateColumn SortExpression="demo" HeaderText="标题">
   <ItemTemplate>
    <asp:Label Text='<%# Server.HtmlEncode((string)DataBinder.Eval(Container.DataItem, "Title"))%>'
     runat="server" Width="80%" ID="lblColumn" />
   </ItemTemplate>
  </asp:TemplateColumn>
 </Columns>
</asp:DataGrid>
<asp:Button id="cmdSelectAll" runat="server" Text="全部选中"></asp:Button>
<asp:Button id="cmdFindSelected" runat="server" Text="查看选中的项目"></asp:Button>
<br>
<asp:Label id="Label1" runat="server"></asp:Label>
<hr>
<asp:Label id="Label2" runat="server"></asp:Label>
</form>
</body>
</HTML>
DataGridCheckBox.aspx.cs

using 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.DataGridCheckBox
{
 /// <summary>
 /// DataGridCheckBox 的摘要说明。
 /// 【孟宪会之精彩世界】
 /// </summary>
 public class DataGridCheckBox : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.Button cmdSelectAll;
  protected System.Web.UI.WebControls.Button cmdFindSelected;
  protected System.Web.UI.WebControls.DataGrid dgMain;
  protected System.Web.UI.WebControls.Label Label1;
  protected System.Web.UI.WebControls.Label Label2;
  DataView oDataView;
  string sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
  + HttpContext.Current.Server.MapPath("../../aspxWeb.mdb.ascx");
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   dgMain.Columns[0].HeaderText = "选项";
   dgMain.Columns[1].HeaderText = "序号";
   dgMain.Columns[2].HeaderText = "标题";
   cmdFindSelected.Text = "查看选中的项目";
   RefreshGrid();
   if( !this.IsPostBack)
   {
    cmdSelectAll.Text = "全部选中";
    dgMain.DataBind();
   }
  }
 #region Web Form Designer generated code
 override protected void OnInit(EventArgs e)
 {
  //
  // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
  //
  InitializeComponent();
  base.OnInit(e);
 }

 /// <summary>
 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
 /// 此方法的内容。
 /// </summary>
 private void InitializeComponent()
 {   
  this.cmdSelectAll.Click += new System.EventHandler(this.cmdSelectAll_Click);
  this.cmdFindSelected.Click += new System.EventHandler(this.cmdFindSelected_Click);
  this.Load += new System.EventHandler(this.Page_Load);

 }
 #endregion

  private void cmdSelectAll_Click(object sender, System.EventArgs e)
  {
   selectAll();
  }

  private void selectAll()
  {
   System.Web.UI.WebControls.CheckBox chkExport ;
   if( cmdSelectAll.Text == "全部选中")
   {
    foreach(DataGridItem oDataGridItem in dgMain.Items)
    {
     chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
     chkExport.Checked = true;
    }
    cmdSelectAll.Text = "全部不选";
   }
   else
   {
    foreach(DataGridItem oDataGridItem in dgMain.Items)
    {
     chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
     chkExport.Checked = false;
    }
    cmdSelectAll.Text = "全部选中";
   }
  }

  private void RefreshGrid()
  {
   OleDbConnection oConnection;
   OleDbDataAdapter oCommand ;
   DataSet oDataSet = new DataSet();
   try
   {
    string sSQL = "Select top 10 * from Document order by CreateDate DESC";
    oConnection = new OleDbConnection(sConnectionString);
    oCommand = new OleDbDataAdapter(sSQL.ToString(), oConnection);
    oCommand.Fill(oDataSet, "Document");
    oDataView = new DataView(oDataSet.Tables["Document"]);
    dgMain.DataSource = oDataView;
    oConnection.Close();
   }
   catch(Exception ex)
   {
    Label1.Text = ex.Message.ToString();
   }
  }

  private void cmdFindSelected_Click(object sender, System.EventArgs e)
  {
   System.Web.UI.WebControls.CheckBox chkExport;
   System.Collections.ArrayList oExArgs = new System.Collections.ArrayList();
   string sID;
   Label1.Text = "";
   Label2.Text = "";
   foreach(DataGridItem oDataGridItem in dgMain.Items)
   {
      chkExport = (CheckBox)oDataGridItem.FindControl("chkExport");
      if( chkExport.Checked)
      {
         //如果要进行删除，可以在这里构造sql语句进行删除
         string sql = "DELETE FROM Document WHERE id ="
            + ((HtmlInputHidden)oDataGridItem.FindControl("SelectedID")).Value;
         Label2.Text += "<li>" + sql;
         sID = ((HtmlInputHidden)oDataGridItem.FindControl("SelectedID")).Value;
         oExArgs.Add(sID);
         int i = 0;
         Label1.Text = "";
         for( i = 0;i<oExArgs.Count;i++)
         {
            Label1.Text += oExArgs[i] + "<br>";
         }
      }
   }
   Label2.Text += "<br><font color=red>执行SQL语句即可删除，这里省略。</font>";
  }
 }
}


zhiguo2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui datagrid 跨页选择
有一个同学叫小明
01-28 347
项目中遇到跨页选择（项目使用easyui）：有多页数据，在当前页面选择后，下一页继续选择，返回之前页面时，仍然能记住之前选中的行。最后对多页选中的数据统一提交。 翻看easyui文档，官方并没有提供相应方法，easyui当前最新版本1.3.2也没有找到，最后使用了一个比较传统的方式，各位看官如果有更好的方式，劳烦告知，感激不尽。 声明全局数组变量 [cod...
实现DataGrid跨页多选
njdxbzu的专栏
06-22 1093
SelectMultiPages.aspx ----------------------------------------------------------------------------------------------- AutoEventWireup="false" Inherits="eMeng.Exam.SelectMultiPages" %> 跨页面实现多选 *
easyui datagrid 跨页抉择
shan1774965666的专栏
10-26 1860
easyui datagrid 跨页选择        项目中遇到跨页选择（项目使用easyui）：有多页数据，在当前页面选择后，下一页继续选择，返回之前页面时，仍然能记住之前选中的行。最后对多页选中的数据统一提交。        翻看easyui文档，官方并没有提供相应方法，easyui当前最新版本1.3.2也没有找到，最后使用了一个比较传统的方式，各位看官如果有更好的方式，劳烦告知，感激不
easyui-datagrid分页及跨页勾选
yournevermore的博客
08-05 1618
本人刚开始接触easy-ui,之前需要做一个功能是将后台取到的数据在datagrid中展示,由于数据量太大,datagrid在ie中的效率极低导致页面卡顿，所以选择后台分页处理。 一直奇怪翻页时如何让后台拿到分页的信息，后来发现每次点击分页栏的翻页按钮时，easyui都会默认向请求的url中加入rows和page两个参数，在后台只需拿着这两个参数 去数据库找数据就可以了。另外要做到跨页勾选需要
DataGrid的跨页面多选
飞天小鱼
07-07 648
    跨页面多选            function AddId(obj)        {            var hidden = document.getElementById(HiddenSelect);            if(obj.checked)            {                hidden.value += "," + obj.valu
easyui 中的datagrid跨页勾选问题的实现方法
08-31
当用户需要在多页中选择多个项目时，如何实现跨页勾选功能呢？标题和描述中提到的问题，实际上在EasyUI的框架内是可以解决的，只需要正确配置datagrid的属性和设置。 首先，我们需要理解EasyUI的datagrid是如何处理...
datagrid-export.zip
01-22
在“datagrid-export.html”中，可能包含了一个HTML页面，展示了如何触发导出操作，并可能包含了样式和结构的定义。在“datagrid-export.js”文件中，很可能包含了实际的JavaScript代码，用于处理数据获取和转换逻辑...
具有内置过滤器功能的DataGrid
04-11
标题中的“具有内置过滤器功能的DataGrid”指的是在编程中对DataGrid控件的扩展，使其具备了数据实时过滤的能力。DataGrid是.NET Framework中常用的一个数据展示控件，通常用于显示数据库或其他数据源中的表格数据。...
通过PHP实现DataGrid功能
01-21
### 通过PHP实现DataGrid功能 #### 创建测试数据库与表 在进行PHP实现DataGrid功能之前，首先要确保有一...这种灵活性使得phpMyDataGrid成为一个值得推荐的选择，尤其是在需要快速构建具有复杂数据管理功能的应用时。
datagrid 基于window和jqpring打印
01-10
在本主题中，“datagrid基于window和jqprint打印”指的是如何将`datagrid`中的列表数据通过浏览器的内置功能`window.print()`以及第三方库`jqprint`进行打印。 首先，`window.print()`是JavaScript的一个内建方法，...
在DataGrid中跨页面实现多选
qwert
05-09 1174
实现效果：SelectValueInMulPage.aspx 跨页面实现多选 * {FONT-SIZE:12PX} #Status {text-align:left} function AddRemoveValues(oChk) { //在处理这个地方需要注意的是：你保存的值应该具有唯一性，这样才能不会替换错误的项。 if(oChk.checked) SelectMu
easyui 中的datagrid跨页勾选问题
9527KX的博客
01-18 5993
easyui的datagrid分页显示数据，如果有需求要求勾选多条数据且不再同一页中，easyui会保存在其他页选中的数据吗？ 一开始在网上查阅有人说easyui中没有此方法，需要自己写，但其实至少在1.4版本后只要在datagrid中加入   idField:'id',给每条数据id属性，easyui就默认就会保留之前勾选的信息，如果没有id，才会出现换页后，之前勾选的信息没有的情况。
datagrid中多页的数据实现同时被选择
qq_43128070的博客
05-07 204
所需效果：点击序号全选第一页的所有数据。转换到第二页，再回到第一页，选择仍然存在。这样可以实现多页同时多选的效果 前台： <asp:DataGrid ID="DtgrdUser" runat="server" CssClass="datagrid1" AutoGenerateColumns="False" CellPadding="3" CellSpacing="1" GridL...
【EasyUI DataGrid】实现跨页保持多选checkbox状态
wilson_m的博客
08-11 4354
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;为了实现对EasyUi DataGrid的批量操作，需要对多行的数据进行选中，经过测试发现一个问题：进行多选的时候，经过翻页，上一页的数据选择状态被清空。然而在实际中这是不符合要求的，我们经过翻页上一页数据的选中状态应该仍然保持选中，而不是被清除。 &amp;nbsp;&amp;nbsp;&amp
easyUI的datagrid 分页保存选中状态
cwj1103
07-27 2626
onLoadSuccess:function(data){ var rows = data.rows; //从编辑页面传过来的指标编码 var indeCodes=$("#indeCodes").val(); var n=indeCodes.split(';').length-1
关于EasyUI多选，easyui datagrid 分页并保持checkbox选中状态
weixin_34290631的博客
12-24 603
2019独角兽企业重金招聘Python工程师标准>>> ...
miniUI-SelectGrid 弹出选择表格-翻页选中
weixin_30629653的博客
07-14 409
介绍 mini中已经给出 弹出表格的里例子 ：MiniUi版本 但是在应用过程中遇到写小问题就是没有办法翻页后一并连之前翻页选中的一起提交 以下是解决方案 正文 下面首先介绍 JS 代码 //存储已经选中的元素 var selectMaps = []; //获得表格 var grid = mini.get("gridSelec...
原生JavaScript实现简易Datagrid表格教程：功能与示例
本文档详细介绍了如何使用原生JavaScript实现一个简单的数据表格（Datagrid）功能。Datagrid是一种常见的前端展示大量数据的组件，常用于表格数据的展示、排序、编辑、筛选和分页等功能。以下将逐步探讨实现这些功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值