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

代码如下:
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 窗体设计器生成的代码

        
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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值