复选树TreeList，取消下级最后一个节点，同时取消上级关联父节点

Question

用JavaScript实现 复选树TreeList，取消下级最后一个节点，同时取消上级关联父节点目前已经实现了选择节点，上级和下级自动选中取消节点，下级取消，另外一种情况没有实现：取消节点，如果是该节点是它父节点的最后一个选中节点，则父节点也取消选中请各位给点建议

Answer 1

functionTreeView_HoverNode(data, node) {
if (!data) {return;}node.hoverClass = data.hoverClass;WebForm_AppendToClassName(node, data.hoverClass);if (__nonMSDOMBrowser) {node = node.childNodes[node.childNodes.length - 1];}else {node = node.children[node.children.length - 1];}node.hoverHyperLinkClass = data.hoverHyperLinkClass;WebForm_AppendToClassName(node, data.hoverHyperLinkClass);}functionTreeView_GetNodeText(node) {
var trNode = WebForm_GetParentByTagName(node, "TR");var outerNodes;if (trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName) {outerNodes = trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName("A");if (!outerNodes || outerNodes.length == 0) {outerNodes = trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName("SPAN");}}var textNode = (outerNodes && outerNodes.length > 0) ?outerNodes[0].childNodes[0] :trNode.childNodes[trNode.childNodes.length - 1].childNodes[0];return (textNode && textNode.nodeValue) ? textNode.nodeValue : "";}functionTreeView_PopulateNode(data, index, node, selectNode, selectImageNode, lineType, text, path, databound, datapath, parentIsLast) {
if (!data) {return;}var context = new Object();context.data = data;context.node = node;context.selectNode = selectNode;context.selectImageNode = selectImageNode;context.lineType = lineType;context.index = index;context.isChecked = "f";var tr = WebForm_GetParentByTagName(node, "TR");if (tr) {var checkbox = tr.getElementsByTagName("INPUT");if (checkbox && (checkbox.length > 0)) {for (var i = 0; i < checkbox.length; i++) {if (checkbox[i].type.toLowerCase() == "checkbox") {if (checkbox[i].checked) {context.isChecked = "t";}break;}}}}var param = index + "|" + data.lastIndex + "|" + databound + context.isChecked + parentIsLast + "|" +text.length + "|" + text + datapath.length + "|" + datapath + path;TreeView_PopulateNodeDoCallBack(context, param);}functionTreeView_ProcessNodeData(result, context) {
var treeNode = context.node;if (result.length > 0) {var ci = result.indexOf("|", 0);context.data.lastIndex = result.substring(0, ci);ci = result.indexOf("|", ci + 1);var newExpandState = result.substring(context.data.lastIndex.length + 1, ci);context.data.expandState.value += newExpandState;var chunk = result.substr(ci + 1);var newChildren, table;if (__nonMSDOMBrowser) {var newDiv = document.createElement("div");newDiv.innerHTML = chunk;table = WebForm_GetParentByTagName(treeNode, "TABLE");newChildren = null;if ((typeof(table.nextSibling) == "undefined") || (table.nextSibling == null)) {table.parentNode.insertBefore(newDiv.firstChild, table.nextSibling);newChildren = table.previousSibling;}else {table = table.nextSibling;table.parentNode.insertBefore(newDiv.firstChild, table);newChildren = table.previousSibling;}newChildren = document.getElementById(treeNode.id + "Nodes");}else {table = WebForm_GetParentByTagName(treeNode, "TABLE");table.insertAdjacentHTML("afterEnd", chunk);newChildren = document.all[treeNode.id + "Nodes"];}if ((typeof(newChildren) != "undefined") && (newChildren != null)) {TreeView_ToggleNode(context.data, context.index, treeNode, context.lineType, newChildren);treeNode.href = document.getElementById ?"javascript:TreeView_ToggleNode(" + context.data.name + "," + context.index + ",document.getElementById('" + treeNode.id + "'),'" + context.lineType + "',document.getElementById('" + newChildren.id + "'))" :"javascript:TreeView_ToggleNode(" + context.data.name + "," + context.index + "," + treeNode.id + ",'" + context.lineType + "'," + newChildren.id + ")";if ((typeof(context.selectNode) != "undefined") && (context.selectNode != null) && context.selectNode.href &&(context.selectNode.href.indexOf("javascript:TreeView_PopulateNode", 0) == 0)) {context.selectNode.href = treeNode.href;}if ((typeof(context.selectImageNode) != "undefined") && (context.selectImageNode != null) && context.selectNode.href &&(context.selectImageNode.href.indexOf("javascript:TreeView_PopulateNode", 0) == 0)) {context.selectImageNode.href = treeNode.href;}}context.data.populateLog.value += context.index + ",";}else {var img = treeNode.childNodes ? treeNode.childNodes[0] : treeNode.children[0];if ((typeof(img) != "undefined") && (img != null)) {var lineType = context.lineType;if (lineType == "l") {img.src = context.data.images[13];}else if (lineType == "t") {img.src = context.data.images[10];}else if (lineType == "-") {img.src = context.data.images[16];}else {img.src = context.data.images[3];}var pe;if (__nonMSDOMBrowser) {pe = treeNode.parentNode;pe.insertBefore(img, treeNode);pe.removeChild(treeNode);}else {pe = treeNode.parentElement;treeNode.style.visibility="hidden";treeNode.style.display="none";pe.insertAdjacentElement("afterBegin", img);}}}}functionTreeView_SelectNode(data, node, nodeId) {
if (!data) {return;}if ((typeof(data.selectedClass) != "undefined") && (data.selectedClass != null)) {var id = data.selectedNodeID.value;if (id.length > 0) {var selectedNode = document.getElementById(id);if ((typeof(selectedNode) != "undefined") && (selectedNode != null)) {WebForm_RemoveClassName(selectedNode, data.selectedHyperLinkClass);selectedNode = WebForm_GetParentByTagName(selectedNode, "TD");WebForm_RemoveClassName(selectedNode, data.selectedClass);}}WebForm_AppendToClassName(node, data.selectedHyperLinkClass);node = WebForm_GetParentByTagName(node, "TD");WebForm_AppendToClassName(node, data.selectedClass)}data.selectedNodeID.value = nodeId;}functionTreeView_ToggleNode(data, index, node, lineType, children) {
if (!data) {return;}var img = node.childNodes[0];var newExpandState;try {if (children.style.display == "none") {children.style.display = "block";newExpandState = "e";if ((typeof(img) != "undefined") && (img != null)) {if (lineType == "l") {img.src = data.images[15];}else if (lineType == "t") {img.src = data.images[12];}else if (lineType == "-") {img.src = data.images[18];}else {img.src = data.images[5];}img.alt = data.collapseToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));}}else {children.style.display = "none";newExpandState = "c";if ((typeof(img) != "undefined") && (img != null)) {if (lineType == "l") {img.src = data.images[14];}else if (lineType == "t") {img.src = data.images[11];}else if (lineType == "-") {img.src = data.images[17];}else {img.src = data.images[4];}img.alt = data.expandToolTip.replace(/\{0\}/, TreeView_GetNodeText(node));}}}catch(e) {}data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);}functionTreeView_UnhoverNode(node) {
if (!node.hoverClass) {return;}WebForm_RemoveClassName(node, node.hoverClass);if (__nonMSDOMBrowser) {node = node.childNodes[node.childNodes.length - 1];}else {node = node.children[node.children.length - 1];}WebForm_RemoveClassName(node, node.hoverHyperLinkClass);}if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();这就是所有的treeview客户端方法，并且根据aspx页面生成的html页面，我们会看到，每个节点是个table，子节点在对应的div中，收缩和展开只要是通过div的显示和隐藏来实现的。所以我们在每添加一个节点的时候，就先添加一个table，然后添加一个div，作为他的子节点容器。addItemToTreeView(){..............
addTable(....);var divID = "...";addDiv(divID, containerId); //id,containerIdaddSubTable(divID,...);addSubTable(divID,...);}添加divfunctionaddDiv(id, containerID) {
var container = document.getElementById(containerID);var div = document.createElement("div");div.setAttribute("id", id);div.setAttribute("style", "display=block");container.appendChild(div);}添加tablefunction addTable(containerId,index, name,color) {
var container = document.getElementById(containerId);var table = document.createElement("table");table.setAttribute("cellSpacing", "0");table.setAttribute("cellPadding", "0");table.setAttribute("border", "0");var _tr = table.insertRow(-1);var _td1 = _tr.insertCell(0);_td1.innerHTML = "<div style=\"width: 20px; height: 1px\"></div>";var _td2 = _tr.insertCell(1);_td2.innerHTML = "<div style=\"width: 20px; height: 1px\"></div><img src=" + ModelTreeView_Data.images[6] + " alt=\"\" /></div>";var _td3 = _tr.insertCell(2);_td3.setAttribute("id", id);_td3.innerHTML = "<a href=\"javascript:TreeView_ToggleNode1(TreeView_Data," + index + ",document.getElementById('nodeId'),'t',document.getElementById('divId'))\"><img src=" + TreeView_Data.images[5] + " alt=\"Collapse " + name + "\" style=\"border-width:0;\" /></a>";var _td4 = _tr.insertCell(3);_td4.innerHTML = "<a class=\"TreeView_0\" href=\"javascript:void(0);\" id=\"TreeViewt" + index + "\" style=\"color:" + color + "\">" + name + "</a>";_td4.setAttribute("style", "color:"+color);container.appendChild(table);}

Answer 2

function setcheck(node,Pc)
            {
                var i;
                var ChildNode=new Array();
                ChildNode=node.getChildren();
                 
                if(parseInt(ChildNode.length)==0)
                    return;
                else
                {
                    for(i=0;i<ChildNode.length;i++)
                    {
                        var cNode;
                        cNode=ChildNode[i];
                        if(parseInt(cNode.getChildren().length)!=0)
                            setcheck(cNode,Pc);
                        cNode.setAttribute("checked",Pc);
                    }
                }
            }
            function FindCheckedFromNode(node) 
            {
                var i = 0;
                var nodes = new Array();
                nodes = node.getChildren();
                 
                for (i = 0; i < nodes.length; i++) {
                    
                    var cNode;
                    cNode = nodes[i];
                    
                   if (cNode.getAttribute("checked"))
                        AddChecked(cNode);
                    else {
                       AddUnChecked(cNode); }
                    if (parseInt(cNode.getChildren().length) != 0 ) 
                    {
                        FindCheckedFromNode(cNode);
                    }
                }
            }
function setParent(node,Pc)
{
var parentNode = node.getParent();
if(parentNode)
{    
var parentNodeFather = parentNode.getParent();
if(parentNodeFather)
{
setParent(parentNode,Pc);
}
if(Pc)
{parentNode.setAttribute("checked",Pc);}
else
{
checkBrother(parentNode,Pc,node.getAttribute("NodeData"))
}
}
}
function checkBrother(parentNode,Pc,nodeData)
{
var childNodes = new Array();
childNodes = parentNode.getChildren();
if(childNodes.length >0)
{
var bChecked = true;
for(var i=0;i<childNodes.length;i++)
{
if(childNodes[i].getAttribute("checked") == true &&  childNodes[i].getAttribute("NodeData") != nodeData)
{
bChecked = false;
break;
}
}
if(bChecked)
{
parentNode.setAttribute("checked",Pc);
}
else
{
setParent(parentNode,!Pc)
}
}
else
{
parentNode.setAttribute("checked",Pc);
}
}

Answer 3

更正：TreeList 为 TreeView,实在郁闷，这个都写错了

Answer 4

@人生如梦，这个方法在哪里：node.getChildren(); 

Answer 5

////设置节点的子节点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); 
         }
      }