TreeView(扩充XMLSelTree)
基于XML、JavaScript的TreeView。
参考http://61.163.246.155/pro/XMLSelTree/感谢XMLSelTree程序的作者。
增加功能:右键添加删除节点、保存Check状态、展开所有节点、合并所有节点等。
效果图:
合并
获取XML,获取树结构的XML字符串
右键菜单操作:
修改:
结果新增:
结果删除:
结果:
实现:
TreeNode.xml结构修改为:
<?xml version='1.0' encoding='gb2312'?>
<Root>
<TreeNode Title='测试001' CheckData="001" Checked="true">
<TreeNode Title='目录测试001' CheckData="002" Checked="true"/>
<TreeNode Title='测试0011' CheckData="003" Checked="true">
<TreeNode Title='目录测试001' CheckData="004" Checked="false"/>
<TreeNode Title='目录测试222' CheckData="005" Checked="true"/>
<TreeNode Title='目录测试333' CheckData="006" Checked="false"/>
<TreeNode Title='目录测试444' CheckData="007" Checked="false"/>
</TreeNode>
<TreeNode Title='测试0012' CheckData="008" Checked="false">
<TreeNode Title='目录测试001' CheckData="009" Checked="false"/>
<TreeNode Title='目录测试222' CheckData="010" Checked="false"/>
<TreeNode Title='目录测试333' CheckData="011" Checked="false"/>
<TreeNode Title='目录测试444' CheckData="012" Checked="false"/>
</TreeNode>
</TreeNode>
</Root>
增加attribute:Checked标识是否选中。
下载XMLSelTree,添加下面代码。
/*
功能:将xml选中信息转换为html的选择
作者:申旺
*/
function SetISCheck(s_Html)
{
var strReplace="CHK=\"true\"";
s_Html=s_Html.replace(strReplace,"Checked");
strReplace="CHK=\"false\"";
s_Html=s_Html.replace(strReplace,"");
return s_Html;
}
/*
修改:申旺
*/
/*
功能:展开所有节点
*/
function ExpandAll()
{
m_oConfig.bExpand=true;
RecursionTree(m_oConfig.oSrcDiv.children[0]);
}
/*
功能:收起所有节点
*/
function UnExpandAll()
{
m_oConfig.bExpand=false;;
RecursionTree(m_oConfig.oSrcDiv.children[0]);
}
/*
功能:递归所有节点
*/
function RecursionTree(obj)
{
if(obj.children.length==0)
{
if(obj.tagName=="IMG")
{
if(m_oConfig.bExpand)
{
if(obj.nameProp=="NodeImg1.gif")
{
MouseClick(obj);
}
}
else
{
if(obj.nameProp=="NodeImg2.gif")
{
MouseClick(obj);
}
}
}
}
else
{
var i;
for(i=0;i<obj.children.length;i++)
{
RecursionTree(obj.children[i]);
}
}
}
/*新增节点*/
function AddNode(s_Text,s_Value)
{
var oXMLDom = new ActiveXObject("Microsoft.XMLDOM") ;
oXMLDom.async = false ;
oXMLDom.loadXML(TreeXML);
var RootNode = oXMLDom.selectNodes("/Root").item(0);
ReadNode(RootNode,s_Text,s_Value,"ADD",oXMLDom);
TreeXML=oXMLDom.xml;
window.onload();
ExpandAll();
}
/*修改节点*/
function ModifyNode(s_Text,s_Value)
{
var oXMLDom = new ActiveXObject("Microsoft.XMLDOM") ;
oXMLDom.async = false ;
oXMLDom.loadXML(TreeXML);
var RootNode = oXMLDom.selectNodes("/Root").item(0);
ReadNode(RootNode,s_Text,s_Value,"MODIFY");
TreeXML=oXMLDom.xml;
window.onload();
ExpandAll();
}
/*删除节点*/
function DeleteNode(s_Text,s_Value)
{
var oXMLDom = new ActiveXObject("Microsoft.XMLDOM") ;
oXMLDom.async = false ;
oXMLDom.loadXML(TreeXML);
var RootNode = oXMLDom.selectNodes("/Root").item(0);
ReadNode(RootNode,s_Text,s_Value,"DELETE");
TreeXML=oXMLDom.xml;
window.onload();
ExpandAll();
}
function ReadNode(Element,s_Text,s_Value,OP,oXMLDom)
{
if(Element.hasChildNodes)
{
if(Element.nodeName=="TreeNode")
{
if((Element.getAttribute("Title")==s_Text) && (Element.getAttribute("CheckData")==s_Value))
{
switch(OP)
{
case "ADD":
var NewNode = oXMLDom.createNode(1, "TreeNode", "");
NewNode.setAttribute("Title",ipt_Title.value);
NewNode.setAttribute("CheckData","000");
NewNode.setAttribute("CHK","true");
Element.appendChild(NewNode);
break;
case "MODIFY":
Element.setAttribute("Title",ipt_Title.value);
Element.setAttribute("Caption",ipt_Caption.value);
break;
case "DELETE":
Element.parentNode.removeChild(Element);
break;
default:
break;
}
}
}
var i;
for(i=0;i<Element.childNodes.length;i++)
{
if(OP=="ADD")
{
ReadNode(Element.childNodes[i],s_Text,s_Value,OP,oXMLDom);