获取选定CheckBox控件的值及js实现勾选时勾选相关父子关系
2011-09-07 13:45
429 查看
页面代码如下:
后台代码如下:
1、获取选中的CheckBox控件的值
js文件代码如下:
2、selectParentNote实现如果选择父的话,默认选中所有子;如果选择一个子的话,默认选中他的父
3、selectRow实现多选,无父子关系限制
<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; }
相关文章推荐
- js在repeater控件内每一行<input type="checkbox"/>实现全选,全不选,然后获取每一行的ID删除
- 通过js实现将所当页的checkbox全选 并且获取其value值
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- Js获取下拉框选定项的值和文本的实现代码
- easyui treegrid实现显示checkbox并能获取到选定值的
- 通达OA列表控件添加js代码,实现js的获取和赋值
- 使用masterpage的情况下如何使用js实现repeater控件里的checkbox全选
- js如何获取file控件的完整路径具体实现代码
- js和jQuery实现获取id和点击checkbox全选功能
- Ext.Net(Coolite) 页面(js)获取控件相关值
- js如何获取file控件的完整路径具体实现代码
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js
- JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作,实现全选与删除
- 实用js小汇总--获取iframe引用的页面中的控件ID,或赋值的实现方法
- js获取列表控件某行下拉框的选定值
- ASP.NET WebForm 的CheckBoxList控件通过js获取Value值问题
- Js获取下拉框选定项的值和文本的实现代码
- JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作,实现全选与删除
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- TreeView控件的CheckBox自动实现父子节点递归选定