DataGrid CheckBox实现类似于HotMail 全选

转载 2006年06月09日 13:31:00
图一:(未选前)

图二:(选中几项后)

图三:(全选后)

代码如下:
CheckBoxOnDataGrid.aspx

<%@ Page language="c#" Codebehind="CheckBoxOnDataGrid.aspx.cs" AutoEventWireup="false" Inherits="Text_WebApp.CheckBoxOnDataGrid" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
        <title>CheckBoxOnDataGrid</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" src="CheckBox.js"></script>
        <LINK href="style.css" rel="stylesheet" type="text/css">
  </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1"  method="post" runat="server" name="Form1">
            <FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face=宋体></FONT>
            <br>
            <ASP:DataGrid id="MyDataGrid" runat="server" Width="696px" BackColor="white" BorderColor="black"
                CellPadding="3" CellSpacing="0" Font-Size="9pt" AutoGenerateColumns="False" HeaderStyle-BackColor="darkred"
                HeaderStyle-ForeColor="white" Height="160px">
                <Columns>
                    <asp:TemplateColumn>
                        <HeaderTemplate>
                            <input type=checkbox name="allbox" onclick="CA();">
                            <font face="Webdings" color="white" size="4">a</font>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="DeleteThis" onclick="javascript:CCA(this);" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn>
                        <HeaderTemplate>
                            ID
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="StoreID" Text=’<%# DataBinder.Eval (Container.DataItem, "ID") %>’ runat="server"/>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:BoundColumn HeaderText="Store" Datafield="Store" runat="server" />
                    <asp:BoundColumn HeaderText="Address" Datafield="Address" runat="server" />
                    <asp:BoundColumn HeaderText="City" Datafield="City" runat="server" />
                    <asp:BoundColumn HeaderText="State" Datafield="State" runat="server" />
                    <asp:BoundColumn HeaderText="Zip" Datafield="Zip" runat="server" />
                </Columns>
            </ASP:DataGrid>
            <br>
            <asp:Button Text="Delete Items" ID="Confirm" runat="server" />
            <span id="OutputMsg" EnableViewState="false" runat="server" />
        </form>
    </body>
</HTML>

CheckBoxOnDataGrid.aspx.cs

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;
using System.Data.SqlClient;

namespace Text_WebApp
{
    /**//// <summary>
    /// CheckBoxOnDataGrid 的摘要说明。
    /// </summary>
    public class CheckBoxOnDataGrid : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataGrid MyDataGrid;
        protected System.Web.UI.WebControls.Button Confirm;
        protected System.Web.UI.HtmlControls.HtmlGenericControl OutputMsg;
        private SqlConnection objConnect;
    
        private void Page_Load(object sender, System.EventArgs e)
        {
            // 在此处放置用户代码以初始化页面
            objConnect = new SqlConnection ("server=(local);database=pubs;uid=sa;pwd=;");
            if (!IsPostBack) 
            {
                BindData();
            }

        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {    
            this.Confirm.Click += new System.EventHandler(this.Confirm_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion

        public void BindData() 
        {
            String sqlQuery = "Select stor_id As Id, stor_name As Store, City, State, Zip, stor_Address As Address from Stores";
            DataSet ds=new DataSet();
            SqlDataAdapter Sda=new SqlDataAdapter(sqlQuery,objConnect);
            Sda.Fill(ds,"Tb");
            MyDataGrid.DataSource =ds.Tables["Tb"];
            MyDataGrid.DataBind();
            objConnect.Close();
            objConnect = null;
        }

        private void Confirm_Click(object sender, System.EventArgs e)
        {
            string dgIDs = "";
            bool BxsChkd = false; 
            foreach (DataGridItem i in MyDataGrid.Items) 
            {
                CheckBox deleteChkBxItem = (CheckBox) i.FindControl ("DeleteThis");
                if (deleteChkBxItem.Checked) 
                {
                    BxsChkd = true;
                    dgIDs += ((Label) i.FindControl ("StoreID")).Text.ToString() + ",";
                }
            }
            string deleteSQL = "DELETE from Stores WHERE stor_id IN (" + dgIDs.Substring (0, dgIDs.LastIndexOf (",")) + ")";

            if (BxsChkd == true) 
            { 
                
                try 
                {
                    //SqlHelper.ExecuteNonQuery (objConnect, CommandType.Text, deleteSQL);
                    OutputMsg.InnerHtml+="删除"+dgIDs.ToString().Trim()+"成功";
                    OutputMsg.Style["color"] = "#3366cc";
                } 
                catch (SqlException err) 
                { 
                    OutputMsg.InnerHtml += err.Message.ToString(); 
                    OutputMsg.Style["color"] = "#6699cc";
                }
                BindData();
            }
        }
    }
}

CheckBox.js

//CheckBox全选
function CA(){
var frm=document.Form1;
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ((e.name != ’allbox’) && (e.type==’checkbox’))
{
e.checked=frm.allbox.checked;
if (frm.allbox.checked)
{
hL(e);
}//endif
else
{
dL(e);
}//endelse

}//endif
}//endfor
}


//CheckBox选择项
function CCA(CB)
{
var frm=document.Form1;
if (CB.checked)
hL(CB);
else
dL(CB);

var TB=TO=0;
for (var i=0;i<frm.elements.length;i++)
{
var e=frm.elements[i];
if ((e.name != ’allbox’) && (e.type==’checkbox’))
{
TB++;
if (e.checked)
TO++;
}
}
frm.allbox.checked=(TO==TB)?true:false;
}


function hL(E){
while (E.tagName!="TR")
{E=E.parentElement;}
E.className="H";
}

function dL(E){
while (E.tagName!="TR")
{E=E.parentElement;}
E.className="";
}

style.css

.{}{
    font-size : 9pt;
}
.H{}{
    font-size : 9pt;
        cursor:hand;
        color:#3366ff;
        background : #FFF3F3;
  }

 

WPF-DataGrid中CheckBox实现全选与非全选

例子中使用的是ObservableCollection集合,代码下载地址:
  • duanzi_peng
  • duanzi_peng
  • 2014年10月27日 15:38
  • 1670

WPF中DataGrid 添加checkbox实现全选、多选

在机房合作项目中,有一个窗体是这样子的               简单介绍一下:就是通过查询出正在上机的学生,可以通过勾选前面的checkbox,选中该行,然后可以进行部分下机和全部下机。如...
  • kwy15732621629
  • kwy15732621629
  • 2016年07月26日 14:41
  • 7346

在DataGrid中利用CheckBox全选所有行

                                                    在DataGrid中利用CheckBox全选所有行 效果图:背景:asp.net中的DataGr...
  • soarheaven
  • soarheaven
  • 2006年09月20日 23:05
  • 2653

DataGrid +CheckBox(全选)

  • happyrabbit456
  • happyrabbit456
  • 2013年03月05日 16:25
  • 1024

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法

 在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感...
  • u011589095
  • u011589095
  • 2014年08月14日 14:53
  • 1153

EasyUI入门2 datagrid复选框全选效果(通过约束条件实现部分项参与的全选效果)

datagrid如果有一些项因为约束条件(比如这一项需要显示出来,但是复选框是disable的),那么在点击全选或全否复选框的时候,这些状态是disable的行是不应该被选中的...
  • xiangcns
  • xiangcns
  • 2017年06月26日 08:40
  • 2212

WPF DataGrid表头Checkbox 全选与全反选

WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列,特别是id列     例如下面这种效果:          WPF 要实现DataGrid checkbox全选与全反选,方...
  • aojiancc2
  • aojiancc2
  • 2017年02月09日 16:12
  • 2897

用javascript实现DataGrid CheckBox类似于HotMail 全选

代码如下:CheckBoxOnDataGrid.aspx@ Page language="c#" Codebehind="CheckBoxOnDataGrid.aspx.cs" AutoEventWi...
  • daishengs
  • daishengs
  • 2005年07月16日 11:01
  • 1701

WPF中DataGrid实现全选

方法一:使用模板列 前台代码如下 后台实现如下  DataGridTemplateColumn templeColum...
  • asciil
  • asciil
  • 2016年11月22日 21:18
  • 1459

用javascript实现DataGrid CheckBox类似于HotMail 全选

代码如下:CheckBoxOnDataGrid.aspx@ Page language="c#" Codebehind="CheckBoxOnDataGrid.aspx.cs" AutoEventWi...
  • nnsword
  • nnsword
  • 2007年10月28日 14:07
  • 632
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DataGrid CheckBox实现类似于HotMail 全选
举报原因:
原因补充:

(最多只允许输入30个字)