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;
  }

 

相关文章推荐

flex datagrid 嵌checkbox实现全选与数据存储(非绑定数据源)

重写了DataGrid,主要是为了得到DataGrid的listItems属性,listItems保存了当前现显示的每一行的信息,还用了个ArrayCollection保存被选中了行的信息。 MyD...

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

CheckBoxHeaderRenderer.as view plain package    {              import flash.events.Event;     ...

在Flex中简单实现 dataGrid结合CheckBox使项目可选、全选、反选

对用户来讲,软件的功能性之外还要求其易用习惯性。非专业用户习惯了用鼠标点而不大适应键盘+鼠标。Flex的DataGrid虽然可以允许用户多选项目,但是这个多选需要结合Ctrl或Shift键来完成。而我...

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

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

checkbox实现的类似邮箱的全选和反选功能

这是我自己在网上看到的别人写的jquery 实现的类似邮箱的全选和反选功能。 代码如下:...

Flex DataGrid中嵌套Checkbox实现全选 另分享一个checkbox居中,圆形布局代码

这个页面的最终效果如果所示:         当CheckBox没有被选中时第二列不能被编辑,第三列可以被编辑。         当CheckBox被选中时,第二列可以被编辑,第三列不能被编辑。 ...

wpf中为DataGrid添加checkbox支持多选全选

项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellContr...

WPF DataGrid表头Checkbox 全选与全反选

WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列,特别是id列     例如下面这种效果:          WPF 要实现DataGrid checkbox全选与全反选,方...

js实现checkbox 全选和取消

  • 2014年07月16日 17:29
  • 921B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DataGrid CheckBox实现类似于HotMail 全选
举报原因:
原因补充:

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