请教各位个树形控件的使用问题

caibird1984 2008-07-04 05:36:49
小弟比较笨,而且也没怎么用过树型控件。目前维护的项目中有这么个问题:一个树型控件,当点击包含有下级节点的节点时,将该节点的下级及更下级的全部节点均选中。目前此功能在新建记录时表现正确,但是当编辑的时候,似乎用脚本判断节点的选中状态与实际情况是相反的。比如默认状态中一个节点及所有下级节点是选中的,那么第一次点击这个节点,该节点本身变为未选中状态,下级节点没有变化;而再次点击时,该节点本身变为选中状态,而全部的下级节点均变成了未选中!下面是这个功能相关的部分代码:

……
myTreeView.Attributes.Add("oncheck", "NodeOnClick();");
……



<script language="javascript">
function NodeOnClick()
{
var node = document.getElementById("TreeViewAdmin").getTreeNode(event.treeNodeIndex);
var checked = node.getAttribute("Checked");
setCheck(node, checked, node.getNodeIndex());
document.getElementById("TreeViewAdmin").queueEvent("onclick", node.getNodeIndex());
}

function setCheck(node, Checked, ni)
{
var ChildNode = new Array();
ChildNode = node.getChildren();
if(parseInt(ChildNode.length) != 0)
{
for (var i = 0; i < ChildNode.length; i++)
{
var cNode = ChildNode[i];
if(cNode.getAttribute("checked") != Checked)
{
if(parseInt(cNode.getChildren().length) != 0)
{
setCheck(cNode, Checked, ni + "." + i);
}
cNode.setAttribute("checked", Checked);
document.getElementById("TreeViewAdmin").queueEvent('oncheck', ni + '.' + i);
}
}
}
}
</script>


该树型控件生成的HTML源文件片段:

<tvns:treenode Expanded="True" Checked="true" NodeData="1" ImageUrl="/EcoMgr/image/TreeView/folder.gif" ExpandedImageUrl="/EcoMgr/image/TreeView/folderopen.gif" Target="Main" CheckBox="True" ID="112">Top1
<tvns:treenode Expanded="True" Checked="true" NodeData="2" ImageUrl="/EcoMgr/image/TreeView/Page.gif" ExpandedImageUrl="/EcoMgr/image/TreeView/Page.gif" CheckBox="True" ID="120">Node1</tvns:treenode>
<tvns:treenode Expanded="True" Checked="true" NodeData="2" ImageUrl="/EcoMgr/image/TreeView/Page.gif" ExpandedImageUrl="/EcoMgr/image/TreeView/Page.gif" CheckBox="True" ID="113">Node2</tvns:treenode>
</tvns:treenode>


从HTML源文件上看,似乎生成树型控件的时候Checked属性是正确的,但是当点击的时候无论该节点是否为选中状态,checked的值均为true。小弟实在找不出哪里有问题了,还希望各位高手帮忙!不胜感激
...全文
139 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
caibird1984 2008-07-09
  • 打赏
  • 举报
回复
好吧,感谢大家。虽然实际上问题不是出在程序上。

小弟维护的项目是.NET 2003开发的。由于本身没有TreeView,所以使用了微软后来发布的Microsoft.Web.UI.WebControls命名控件下的树型控件。不过这个控件有个小问题,在于如果后台对TreeView本身进行初始化后,在前端使用TreeNode.getAttribute("checked")获取不到后台设置的值,这是导致问题出现的原因。修正方法是修改安装控件时拷贝到wwwroot目录下的webctrl_client文件夹中的treeview.htc。大概修正的方法如下:


//
// doCheckboxClick()
//
function doCheckboxClick(el)
{
//el.checked = !el.checked;
el.checked = !el.getAttribute("checked");
var evt = createEventObject();
evt.treeNodeIndex = getNodeIndex(el);
g_nodeClicked = el;
_tvevtCheck.fire(evt);
}


注释掉的语句是原来TreeView.htc文件中的,我把它改成“el.checked = !el.getAttribute("checked");”,这个问题就解决了。

再次感谢大家,结贴给分
Jinglecat 2008-07-04
  • 打赏
  • 举报
回复
没有用过这个 tvns
Jinglecat 2008-07-04
  • 打赏
  • 举报
回复
别轻易说自己笨!
toxxj 2008-07-04
  • 打赏
  • 举报
回复
顶下
honkerhero 2008-07-04
  • 打赏
  • 举报
回复
queueEvent('oncheck', ni + '.' + i);
是不是有问题啊,上边设置一次,你又激发一次,
SSXYC 2008-07-04
  • 打赏
  • 举报
回复
收藏先...
mengxj85 2008-07-04
  • 打赏
  • 举报
回复
学习,帮忙顶一下,收藏咯,我也要用到树
JeffChung 2008-07-04
  • 打赏
  • 举报
回复
把以前博客上写过的翻出来给你看看。
-----------------------------------

  这里使用asp.net2.0的TreeView控件结合JavaScript实现权限树的部分功能。
  假设权限树中有如下三条规则:
  1、该节点可以访问,则他的父节点也必能访问;
  2、该节点可以访问,则他的子节点也都能访问;
  3、该节点不可访问,则他的子节点也不能访问。


//获取元素指定tagName的父元素
function public_GetParentByTagName(element, tagName)
{
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
//如果这个元素还不是想要的tag就继续上溯
while (parent && (parent.tagName.toUpperCase() != upperTagName))
{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}

//设置节点的父节点Cheched——该节点可访问,则他的父节点也必能访问
function setParentChecked(objNode)
{
var objParentDiv = public_GetParentByTagName(objNode,"div");
if(objParentDiv==null || objParentDiv == "undefined")
{
return;
}
var objID = objParentDiv.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("Nodes"));
objID = objID+"CheckBox";
var objParentCheckBox = document.getElementById(objID);
if(objParentCheckBox==null || objParentCheckBox == "undefined")
{
return;
}
if(objParentCheckBox.tagName!="INPUT" && objParentCheckBox.type == "checkbox")
return;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}

//设置节点的子节点uncheched——该节点不可访问,则他的子节点也不能访问
function setChildUnChecked(divID)
{
var objchild = divID.children;
var count = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="INPUT" && tempObj.type == "checkbox")
{
tempObj.checked = false;
}
setChildUnChecked(tempObj);
}
}

//设置节点的子节点cheched——该节点可以访问,则他的子节点也都能访问
function setChildChecked(divID)
{
var objchild = divID.children;
var count = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="INPUT" && tempObj.type == "checkbox")
{
tempObj.checked = true;
}
setChildChecked(tempObj);
}
}

//触发事件
function CheckEvent()
{

var objNode = event.srcElement;

if(objNode.tagName!="INPUT" || objNode.type!="checkbox")
return;

if(objNode.checked==true)
{
setParentChecked(objNode);
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"Nodes");
if(objParentDiv==null || objParentDiv == "undefined")
{
return;
}
setChildChecked(objParentDiv);
}
else
{
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"Nodes");
if(objParentDiv==null || objParentDiv == "undefined")
{
return;
}
setChildUnChecked(objParentDiv);
}
}



然后在page_load事件中将TreeView与js事件绑定上:
this.TreeView1.Attributes.Add("onclick", "CheckEvent()");
xhan2000 2008-07-04
  • 打赏
  • 举报
回复
function public_GetChildChecked(element)
{
var child = element.children;
for(var i=0;i <child.length;i++)
{
var tempObj=child[i];
if(tempObj.tagName== "INPUT"&&tempObj.type=="checkbox")
{
if(tempObj.checked)
{
return true;
}
}
else
{
if(public_GetChildChecked(tempObj))
{
return true;
}
}
}
return false;
}

//设置节点的父节点Cheched——该节点可访问,则他的父节点也必能访问
function setParentChecked(objNode)
{
var objParentDiv=public_GetParentByTagName(objNode, "div");
if(objParentDiv==null||objParentDiv=="undefined")
{
return;
}
var objID = objParentDiv.getAttribute( "ID");
objID = objID.substring(0,objID.indexOf( "Nodes"));
objID = objID+ "CheckBox";
var objParentCheckBox = document.getElementById(objID);
if(objParentCheckBox==null||objParentCheckBox=="undefined")
{
return;
}
if(objParentCheckBox.tagName!= "INPUT"&&objParentCheckBox.type=="checkbox")
{
return;
}
if(objNode.checked)
{
objParentCheckBox.checked=true;
}
else
{
objParentCheckBox.checked=public_GetChildChecked(objParentDiv);
}
setParentChecked(objParentCheckBox);
}


//设置节点的子节点cheched——该节点可以访问,则他的子节点也都能访问
function setChildChecked(divID,value)
{
var objchild = divID.children;
var count = objchild.length;
for(var i=0;i <objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName== "INPUT"&&tempObj.type=="checkbox")
{
tempObj.checked=value;
}
setChildChecked(tempObj,value);
}
}

62,130

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧