关闭

DataGrid CheckBox实现类似于HotMail 全选

标签: datagridaspjavascriptclasswebappdatabase
749人阅读 评论(0) 收藏 举报
图一:(未选前)

图二:(选中几项后)

图三:(全选后)

代码如下:
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;
  }

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1372315次
    • 积分:19849
    • 等级:
    • 排名:第411名
    • 原创:448篇
    • 转载:1067篇
    • 译文:4篇
    • 评论:143条
    文章存档
    最新评论