学步园

页面代码如下：

<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" onclick="selectTableAll(dgData,this)" /></HeaderTemplate>
                <ItemTemplate>
                    <input id="chkIDV3" runat="server" class="idbox" type="checkbox" onclick="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;
}