页面代码如下:
<script src="../../JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<asp:DataGrid ID="dgData" runat="server" SkinID="IDGrid" OnItemDataBound="dgData_ItemDataBound">
<Columns>
<asp:TemplateColumn HeaderStyle-Width="3%" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<input id="chkIDV4" runat="server" class="idbox" type="checkbox" οnclick="selectTableAll(dgData,this)" /></HeaderTemplate>
<ItemTemplate>
<input id="chkIDV3" runat="server" class="idbox" type="checkbox" οnclick="selectParentNote(dgData,this)" value='<%# Eval("SubjectID") %>'
parentid='<%# Eval("ParentSubjectID") %>' subjectno='<%# Eval("SubjectNo")%>' subjectname='<%# Eval("SubjectName")%>' />
</ItemTemplate>
</asp:TemplateColumn>
</asp:DataGrid>
后台代码如下:
1、获取选中的CheckBox控件的值
//此处循环判断每一行的复选框选中没有,并取出相关的值
HtmlInputCheckBox cb = new HtmlInputCheckBox();//注意此处的控件类型
List<string> SubjecID = new List<string>();
Table tab = (Table)(this.dgData.Controls[0]);
TableRow tabTr = tab.Rows[0];
//获取<HeaderTemplate>中控件chkIDV4
cb = (HtmlInputCheckBox)(tabTr.FindControl("chkIDV4"));
if (!cb.Checked)//判断是否全选
{
foreach (DataGridItem dgI in this.dgData.Items)
{
cb = (HtmlInputCheckBox)dgI.Cells[0].FindControl("chkIDV3");
if (cb.Checked)//判断选择的行
{
SubjecID.Add(cb.Value.ToString().Trim());
}
}
js文件代码如下:
2、selectParentNote实现如果选择父的话,默认选中所有子;如果选择一个子的话,默认选中他的父
3、selectRow实现多选,无父子关系限制
// 获取表格table中第rowIndex行的标记为tagName的HTML控件数组中的第tagIndex个控件
function getObjTR(table, rowIndex, tagName, tagIndex)
{
var obj = null;
if (table.rows(rowIndex).getElementsByTagName(tagName).length > tagIndex)
{
obj = table.rows(rowIndex).getElementsByTagName(tagName).item(tagIndex);
}
return obj;
}
// 单击复选框选择某行(单击全选复选框时调用)
function selectRowFromSelectAll(obj)
{
var row = obj.parentNode.parentNode;
var table = row.parentNode.parentNode;
if (obj.type.toLowerCase() == "checkbox")
{
row.className = obj.checked ? 'dg_rowselected' : (row.rowIndex % 2 == 1 ? 'dg_row' : 'dg_altrow');
}
else if (obj.type.toLowerCase() == "radio")
{
for (var i = 0; i < table.rows.length; i++)
{
table.rows(i).className = (table.rows(i).rowIndex % 2 == 1 ? 'dg_row' : 'dg_altrow');
}
row.className = 'dg_rowselected';
}
rowClass = row.className;
}
//如果选择父的话,默认选中所有子;如果选择一个子的话,默认选中他的父
function selectParentNote(table, chk)
{
selectRowFromSelectAll(chk);
for( var i = 0 ;i < table.rows.length; i++)
{
var opt = getObjTR(table, i, "input", 0);
if(opt != null && opt.type.toLowerCase() == "checkbox")
{
//子节点勾选则父节点也勾选上
if(opt.value == chk.parentid && chk.checked)
{
opt.checked=chk.checked;
selectRowFromSelectAll(opt);//为是否勾选的行更改相应样式
}
//判断父节点是否勾选,若勾选则其子都勾选,反之则其子都不勾选
if(chk.value == opt.parentid)
{
opt.checked=chk.checked;
selectRowFromSelectAll(opt);
selectParentNote(table,opt);
}
}
}
}
//单击表格的全选复选框,只全选本表格的所有行
function selectTableAll(table, chk)
{
for (var i = 1; i < table.rows.length; i++)
{
var opt = getObjTR(table, i, "input", 0);
if (opt != null && opt.type.toLowerCase() == "checkbox" && opt.checked != chk.checked)
{
opt.checked = chk.checked;
selectRowFromSelectAll(opt);
}
}
}
//单击选择框选择某行(单击某行的选择框或单元格时调用,如为复选,则检查是否全选)
function selectRow(obj)
{
var row = obj.parentNode.parentNode;
var table = row.parentNode.parentNode;
if (obj.type.toLowerCase() == "checkbox")
{
row.className = obj.checked ? 'dg_rowselected' : (row.rowIndex % 2 == 1 ? 'dg_row' : 'dg_altrow');
var chkAll = getObjTR(table, 0, "input", 0);
if (chkAll != null && chkAll.type.toLowerCase() == "checkbox")
{
checkSelectAll(table);
}
}
else if (obj.type.toLowerCase() == "radio")
{
for (var i = 1; i < table.rows.length; i++)
{
if(table.rows(i).className=='dg_rowselected')
{
table.rows(i).className = (table.rows(i).rowIndex % 2 == 1 ? 'dg_row' : 'dg_altrow');
getObjC(table.rows(i),"input",0).checked=false;
break;
}
}
row.className = 'dg_rowselected';
}
rowClass = row.className;
}