treeView中CheckBox如何设置子节点Check属性
2009-11-16 15:34
363 查看
Asp.net 2.0 中带有CheckBox的TreeView控件, 父节点CheckBox属性改了后如何修改其子节点的Check状态?
有两种方法:
一是PostBack回服务器端处理:
这种方法,每次PostBack都会刷新页面,同时展开收缩节点也会PostBack回去,刷新页面,用户体验很是不好。
首先在代码中注册属性:
this.TreeView1.Attributes.Add("onclick", "postBackByObject()");
设置TreeView1的属性:
OnTreeNodeCheckChanged="TreeNodeCheckChangeFunction"
JavaScript脚本如下所示:
<script language="javascript">
function postBackByObject()
{
var o = window.event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
__doPostBack("","");
}
}
</script>
然后在服务器段代码中对TreeView的Node子节点选中。
protected void TreeNodeCheckChangeFunction(object sender, TreeNodeEventArgs e)
{
SetChildChecked(e.Node);
}
第二种方法:注册javascript脚本事件,然后在客户端是JavaScript实现.用这种方法页面少了很多不必要Postback,减少服务器的负担。
设置TreeView1的属性:
EnableClientScript="true"
加入OnClick事件:
this.TreeView1.Attributes.Add("onclick", "postBackByObject()");
JavaScript的脚本,如下:
<script language="javascript">
function postBackByObject()
{
var element = window.event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
var checkedState = element.checked;
while (element.tagName != "TABLE")
element = element.parentElement;
UnCheck(element);
element = element.nextSibling;
if (element == null)
return;
var childTables = element.getElementsByTagName("TABLE");
for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++)
Check(childTables[tableIndex], checkedState);
}
}
function UnCheck(table)
{
if (table == null || table.rows[0].cells.length == 2) // This is the root
return;
var parentTable = table.parentElement.previousSibling;
Check(parentTable, false);
UnCheck(parentTable);
}
function Check(table, checked)
{
var checkboxIndex = table.rows[0].cells.length - 1;
var cell = table.rows[0].cells[checkboxIndex];
var checkboxes = cell.getElementsByTagName("INPUT");
if (checkboxes.length == 1)
checkboxes[0].checked = checked;
}
</script>
同时最好给TreeNode的属性SelectAction 设置一下。
treeNode.SelectAction = TreeNodeSelectAction.None;
这样,整个有CheckBox的TreeView控件,基本上就不会有什么和服务器交互的情况了,获得更好的用户体验。
有两种方法:
一是PostBack回服务器端处理:
这种方法,每次PostBack都会刷新页面,同时展开收缩节点也会PostBack回去,刷新页面,用户体验很是不好。
首先在代码中注册属性:
this.TreeView1.Attributes.Add("onclick", "postBackByObject()");
设置TreeView1的属性:
OnTreeNodeCheckChanged="TreeNodeCheckChangeFunction"
JavaScript脚本如下所示:
<script language="javascript">
function postBackByObject()
{
var o = window.event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
__doPostBack("","");
}
}
</script>
然后在服务器段代码中对TreeView的Node子节点选中。
protected void TreeNodeCheckChangeFunction(object sender, TreeNodeEventArgs e)
{
SetChildChecked(e.Node);
}
第二种方法:注册javascript脚本事件,然后在客户端是JavaScript实现.用这种方法页面少了很多不必要Postback,减少服务器的负担。
设置TreeView1的属性:
EnableClientScript="true"
加入OnClick事件:
this.TreeView1.Attributes.Add("onclick", "postBackByObject()");
JavaScript的脚本,如下:
<script language="javascript">
function postBackByObject()
{
var element = window.event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
var checkedState = element.checked;
while (element.tagName != "TABLE")
element = element.parentElement;
UnCheck(element);
element = element.nextSibling;
if (element == null)
return;
var childTables = element.getElementsByTagName("TABLE");
for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++)
Check(childTables[tableIndex], checkedState);
}
}
function UnCheck(table)
{
if (table == null || table.rows[0].cells.length == 2) // This is the root
return;
var parentTable = table.parentElement.previousSibling;
Check(parentTable, false);
UnCheck(parentTable);
}
function Check(table, checked)
{
var checkboxIndex = table.rows[0].cells.length - 1;
var cell = table.rows[0].cells[checkboxIndex];
var checkboxes = cell.getElementsByTagName("INPUT");
if (checkboxes.length == 1)
checkboxes[0].checked = checked;
}
</script>
同时最好给TreeNode的属性SelectAction 设置一下。
treeNode.SelectAction = TreeNodeSelectAction.None;
这样,整个有CheckBox的TreeView控件,基本上就不会有什么和服务器交互的情况了,获得更好的用户体验。
相关文章推荐
- treeView中CheckBox如何设置子节点Check属性
- 在TreeView 控件上,如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次(从false到true 再从true到false),请问该如何解决,谢谢!
- 如何设置Select下拉框、CheckBox、Radio的ReadOnly属性?
- 如何设置treeview的节点注释
- 如何自动设置网页中meta节点keywords属性-【SEO】
- 如何让treeview的所有节点前面的checkbox全部取消选中?
- Flex中如何通过errorString属性在CheckBox控件上设置一个错误信息显示字符串的例子
- Flex中如何通过给openItems属性,设置一个XMLList或Array对象来打开Tree的一个节点
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)
- jQuery设置radio、select、checkbox只读属性后,如何在后台得到数据
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)
- 如何取得treeview的节点的checkbox的value值
- Flex中如何利用firstVisibleItem属性设置或取得第一个显示节点的例子
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)
- asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)2005-12-23更新
- Flex中如何通过给openItems属性设置一个XMLList或Array对象来打开Tree的一个节点的例子
- TreeView控件如何设置节点显示与隐藏,主要是用来做后台权限,没有权限的就隐藏,有权限的就显示?
- Flex中如何利用firstVisibleItem属性,设置或取得第一个显示节点
- ASP.NET 2005 C#如何在TreeView中设置节点之间的间距,节点上下间距?