用javascript实现DataGrid CheckBox类似于HotMail 全选
来源:互联网 发布:js的this 编辑:程序博客网 时间:2024/06/06 08:44
代码如下:
CheckBoxOnDataGrid.aspx
CheckBoxOnDataGrid.aspx.cs
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
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>
<!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();
}
}
}
}
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;
}
font-size : 9pt;
}
.H{}{
font-size : 9pt;
cursor:hand;
color:#3366ff;
background : #FFF3F3;
}
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- DataGrid CheckBox实现类似于HotMail 全选
- JavaScript实现DataGrid中的CheckBox全选与否
- JavaScript实现DataGrid中的CheckBox全选与否
- javascript实现DataGrid中的CheckBox全选与否
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- Javascript实现在DataGrid上的CheckBox全选和取消
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- javascript实现datagrid客户端checkbox列的全选,反选
- [豆趣]去火
- [领域]javascript hacking guide 第3部分
- [领域]javascript hacking guide part 4
- asp.net
- [领域]javascript hacking guide 第5部分
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- [领域]javascript hacking guide part 6
- [领域]javascript hacking guide 第7部分
- [个人]排错记
- [个人] 感受冬去春来
- 长城长
- 技术大会英雄谱
- 部门预算进行时
- 刺激微软