<ASP:DATAGRID id="MyDataGrid" runat="server" Width="667px" Font-Size="10pt" AutoGenerateColumns="False"
HeaderStyle-BackColor="darkred" HeaderStyle-ForeColor="white" Height="160px">
<HeaderStyle ForeColor="White" BackColor="DarkRed"></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<input type="checkbox" name="allbox" οnclick="SelectAll();"/>
<font face="Webdings" color="white" size="4">选择</font>
<HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="SelectCheckBox" οnclick="javascript:Select(this);" runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="NAME" HeaderText="文字说明"></asp:BoundColumn>
</Columns>
</ASP:DATAGRID>+br>
相关的js文件
//CheckBox全选
function SelectAll(){
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 Select(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;
}
//以下两个用于控制被选择的行的颜色显示的变化 需要相关的css文件配合
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="";
}
//相关css文件如下:
.{
font-size : 12pt;
}
.H{
/*用于select*/
font-size : 12pt;
/*cursor:hand;*/
color:#3366ff;
background : #FFF3F3;
border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
}