Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="tree-min/tree.js"></script>
<script type="text/javascript">
window.onload=function(){
initData();
simple01();
simple02(treeClick, treeDblClick, treeContextmenu);
simple03();
simple04();
simple05();
simple06();
}
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
function simple01(){
var tree=new Tree('simple-01');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList);
tree.show('simple-01-parent', undefined, true);
}
function simple02(click, dblclick, contextmenu){
var tree=new Tree('simple-02');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, click, dblclick, contextmenu);
tree.show('simple-02-parent', undefined, true);
}
function simple03(){
var tree=new Tree('simple-03');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, undefined, undefined, undefined, "#AAAAAA");
tree.show('simple-03-parent', undefined, true);
}
function simple04(){
var tree=new Tree('simple-04');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
var node=new TreeNode({
id : '-1',
name : '动态增加',
click : dyclick,
open : true
});
tree.append(node);
tree.show('simple-04-parent', undefined, true);
}
function simple05(){
var tree=new Tree('simple-05');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, undefined, undefined, undefined, undefined, {});
tree.show('simple-05-parent', undefined, true);
}
function simple06(){
var tree=new Tree('simple-06');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, undefined, undefined, undefined, undefined, {click:function(){return false;}});
tree.show('simple-06-parent', undefined, true);
}
function parseTreeNode(parentNode, parentId, dataList, click, dblclick, contextmenu, nodeNameColor, checkbox){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
click : click,
dblclick : dblclick,
contextmenu : contextmenu,
nameColor : nodeNameColor||"#000000",
checkbox : checkbox||undefined,
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList, click, dblclick, contextmenu, nodeNameColor, checkbox);
}
}
}
function treeClick(node){
document.getElementById("text-node").value="单击了："+node.name;
}
function treeDblClick(node){
document.getElementById("text-node").value="双击了："+node.name;
}
function treeContextmenu(node){
document.getElementById("text-node").value="右键了："+node.name;
return false;
}
function dyclick(node){
window.currNode=node;
}
function addTreeNode(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
var dialog=createDialog();
var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">增加树节点</div>';
inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
inner+='<div style="height:35px;"><input type="button" onclick="controlAddNode();" value="确认增加"></div>';
dialog.innerHTML=inner;
}
function controlAddNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
var nodeId=document.getElementById("nodeId");
var nodeName=document.getElementById("nodeName");
if(!nodeId.value){
alert('请输入节点ID');
nodeId.focus();
return false;
}
if(!nodeName.value){
alert('请输入节点名称');
nodeName.focus();
return false;
}
var tree=Tree.getTree('simple-04');
var tnode=tree.get(nodeId.value);
if(tnode){
alert('此节点已存在');
return false;
}
var node=new TreeNode({
id : nodeId.value,
name : nodeName.value,
click : dyclick,
open : true
});
window.currNode.append(node);
document.getElementById('dialog').style.display="none";
}
function insertTreeNode(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
var dialog=createDialog();
var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">插入树节点</div>';
inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
inner+='<div style="height:35px;"><input type="button" onclick="controlInsertNode();" value="确认增加"></div>';
dialog.innerHTML=inner;
}
function controlInsertNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
var nodeId=document.getElementById("nodeId");
var nodeName=document.getElementById("nodeName");
if(!nodeId.value){
alert('请输入节点ID');
nodeId.focus();
return false;
}
if(!nodeName.value){
alert('请输入节点名称');
nodeName.focus();
return false;
}
var tree=Tree.getTree('simple-04');
var tnode=tree.get(nodeId.value);
if(tnode){
alert('此节点已存在');
return false;
}
var node=new TreeNode({
id : nodeId.value,
name : nodeName.value,
click : dyclick,
open : true
});
window.currNode.parent.append(node,window.currNode.id);
document.getElementById('dialog').style.display="none";
}
function deleteTreeNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
window.currNode.removeTo();
}
function showJsCode(simpleType,event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
var code=document.getElementById("code-"+simpleType).innerHTML;
var dialog=createDialog(1000, 400);
dialog.innerHTML='<div style="margin:5px;line-height:20px;text-align:left;font-family:\'courier new\';width:1400px;">'+codeStyle(code)+"</div>";
}
function codeStyle(code){
code=code.replace(new RegExp('<','g'),'<');
code=code.replace(new RegExp('>','g'),'>');
code=code.replace(new RegExp('<div','g'),'<font color="green"><div</font>');
code=code.replace(new RegExp('\t\t\t\t\t','g'),'');
code=code.replace(new RegExp(' ','g'),' ');
code=code.replace(new RegExp('\n','g'),'<br/>');
code=code.replace(new RegExp('\t','g'),' ');
code=code.replace(new RegExp('function','g'),'<font color="#7f0055">function</font>');
code=code.replace(new RegExp('var','g'),'<font color="#7f0055">var</font>');
code=code.replace(new RegExp('return','g'),'<font color="#7f0055">return</font>');
code=code.replace(new RegExp('false','g'),'<font color="#7f0055">false</font>');
code=code.replace(new RegExp('true','g'),'<font color="#7f0055">true</font>');
return code;
}
function createDialog(initWidth, initHeight){
var dialog=document.getElementById('dialog');
if(!dialog){
var width=initWidth||500;
var height=initHeight||200;
var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
var left=(screenWidth()-width)/2;
dialog=document.createElement("div");
dialog.id="dialog";
dialog.style.cssText='width:'+width+'px;height:'+height+'px;position:absolute;z-index:1000;top:'+top+'px;left:'+left+'px;border:3px solid blue;background:#FFFFFF;text-align:center;overflow:auto;';
dialog.onclick=function(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
return false;
}
document.body.appendChild(dialog);
document.body.onclick=function(){
document.getElementById('dialog').style.display="none";
}
}else{
var width=initWidth||500;
var height=initHeight||200;
var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
var left=(screenWidth()-width)/2;
dialog.style.display="";
dialog.style.top=top+"px";
dialog.style.left=left+"px";
dialog.style.width=width+"px";
dialog.style.height=height+"px";
}
return dialog;
}
function screenWidth(){
return document.documentElement.clientWidth||document.documentElement.offsetWidth||document.body.clientWidth||document.body.offsetWidth;
};
function screenHeight(){
return document.documentElement.clientHeight||document.documentElement.offsetHeight||document.body.clientHeight||document.body.offsetHeight;
};
</script>
<style type="text/css">
html,body{padding:0px;margin:0px;font-size:13px;}
</style>
</head>
<body>
<div style="text-align:center;">
<h1>欢迎使用宇燕js树</h1>
</div>
<hr/>
<div>
<span style="float:left;margin:3px;width:302px;">
<div>例1：展示各种树节点</div>
<div id="simple-01-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('01',event);">js代码</a></div>
<div id="code-01" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
//页面初始化
window.onload=function(){
initData();
simple01();
}
//初始化树数据，默认存储为一个列表
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
//例1方法，创建树及显示树
function simple01(){
var tree=new Tree('simple-01');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList);
tree.show('simple-01-parent', undefined, true);
}
//解析初始化的数据列表
function parseTreeNode(parentNode, parentId, dataList){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList);
}
}
}
<!-- 页面html代码 -->
<div id="simple-01-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;float:left;margin:3px;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:302px;">
<div>例2：单击、双击、右键<input type="text" id="text-node" style="color:red;"/></div>
<div id="simple-02-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('02',event);">js代码</a></div>
<div id="code-02" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
window.onload=function(){
initData();
//treeClick、treeDblClick、treeContextmenu分别为单击、双击、右击事件方法名称，在下面有声明
simple02(treeClick, treeDblClick, treeContextmenu);
}
//初始化树数据，默认存储为一个列表
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
//例2方法，创建树及显示树
function simple02(click, dblclick, contextmenu){
var tree=new Tree('simple-02');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, click, dblclick, contextmenu);
tree.show('simple-02-parent', undefined, true);
}
//解析初始化的数据列表
function parseTreeNode(parentNode, parentId, dataList, click, dblclick, contextmenu){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
click : click,
dblclick : dblclick,
contextmenu : contextmenu,
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList, click, dblclick, contextmenu);
}
}
}
//树节点单击事件
function treeClick(node){
document.getElementById("text-node").value="单击了："+node.name;
}
//树节点双击事件
function treeDblClick(node){
document.getElementById("text-node").value="双击了："+node.name;
}
//树节点右击事件
function treeContextmenu(node){
document.getElementById("text-node").value="右键了："+node.name;
return false;
}
<!-- 页面html代码 -->
<input type="text" id="text-node" style="color:red;"/>
<div id="simple-02-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:302px;">
<div>例3：灰色树</div>
<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('03',event);">js代码</a></div>
<div id="code-03" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
window.onload=function(){
initData();
simple03();
}
//初始化树数据，默认存储为一个列表
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
//例3方法，创建树及显示树
function simple03(){
var tree=new Tree('simple-03');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, "#AAAAAA");
tree.show('simple-03-parent', undefined, true);
}
//解析初始化的数据列表
function parseTreeNode(parentNode, parentId, dataList, nodeNameColor){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
nameColor : nodeNameColor||"#000000",
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList, nodeNameColor);
}
}
}
<!-- 页面html代码 -->
<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:302px;">
<div>例4：动态操作<input type="button" value="增加" onclick="addTreeNode(event);"><input type="button" value="插入" onclick="insertTreeNode(event);"><input type="button" value="删除" onclick="deleteTreeNode(event);"></div>
<div id="simple-04-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('04',event);">js代码</a></div>
<div id="code-04" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
window.onload=function(){
simple04();
}
//实例4方法，创建树及显示树
function simple04(){
var tree=new Tree('simple-04');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
var node=new TreeNode({
id : '-1',
name : '动态增加',
click : dyclick,
open : true
});
tree.append(node);
tree.show('simple-04-parent', undefined, true);
}
//选中节点时触发
function dyclick(node){
window.currNode=node;
}
//在选中节点中增加节点
function addTreeNode(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
var dialog=createDialog();
var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">增加树节点</div>';
inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
inner+='<div style="height:35px;"><input type="button" onclick="controlAddNode();" value="确认增加"></div>';
dialog.innerHTML=inner;
}
//确认增加
function controlAddNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
var nodeId=document.getElementById("nodeId");
var nodeName=document.getElementById("nodeName");
if(!nodeId.value){
alert('请输入节点ID');
nodeId.focus();
return false;
}
if(!nodeName.value){
alert('请输入节点名称');
nodeName.focus();
return false;
}
var tree=Tree.getTree('simple-04');
var tnode=tree.get(nodeId.value);
if(tnode){
alert('此节点已存在');
return false;
}
var node=new TreeNode({
id : nodeId.value,
name : nodeName.value,
click : dyclick,
open : true
});
window.currNode.append(node);
document.getElementById('dialog').style.display="none";
}
//在选中节点之前插入节点
function insertTreeNode(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
var dialog=createDialog();
var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">插入树节点</div>';
inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
inner+='<div style="height:35px;"><input type="button" onclick="controlInsertNode();" value="确认增加"></div>';
dialog.innerHTML=inner;
}
//确认插入
function controlInsertNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
var nodeId=document.getElementById("nodeId");
var nodeName=document.getElementById("nodeName");
if(!nodeId.value){
alert('请输入节点ID');
nodeId.focus();
return false;
}
if(!nodeName.value){
alert('请输入节点名称');
nodeName.focus();
return false;
}
var tree=Tree.getTree('simple-04');
var tnode=tree.get(nodeId.value);
if(tnode){
alert('此节点已存在');
return false;
}
var node=new TreeNode({
id : nodeId.value,
name : nodeName.value,
click : dyclick,
open : true
});
window.currNode.parent.append(node,window.currNode.id);
document.getElementById('dialog').style.display="none";
}
//删除选中节点
function deleteTreeNode(){
if(!window.currNode){
alert('请选择节点');
return false;
}
window.currNode.removeTo();
}
//创建弹出层，居中显示
function createDialog(initWidth, initHeight){
var dialog=document.getElementById('dialog');
if(!dialog){
var width=initWidth||500;
var height=initHeight||200;
var top=(screenHeight()-height)/2;
var left=(screenWidth()-width)/2;
dialog=document.createElement("div");
dialog.id="dialog";
dialog.style.cssText='width:'+width+'px;height:'+height+'px;position:absolute;z-index:1000;top:'+top+'px;left:'+left+'px;border:3px solid blue;background:#FFFFFF;text-align:center;overflow:auto;';
dialog.onclick=function(event){
var event=event||window.event;
if(event){
event.returnValue=false;
event.cancelBubble=true;
}
return false;
}
document.body.appendChild(dialog);
document.body.onclick=function(){
document.getElementById('dialog').style.display="none";
}
}else{
var width=initWidth||500;
var height=initHeight||200;
var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
var left=(screenWidth()-width)/2;
dialog.style.display="";
dialog.style.top=top+"px";
dialog.style.left=left+"px";
dialog.style.width=width+"px";
dialog.style.height=height+"px";
}
return dialog;
}
//计算浏览器可视区域宽度
function screenWidth(){
return document.documentElement.clientWidth||document.documentElement.offsetWidth||document.body.clientWidth||document.body.offsetWidth;
};
//计算浏览器可视区域高度
function screenHeight(){
return document.documentElement.clientHeight||document.documentElement.offsetHeight||document.body.clientHeight||document.body.offsetHeight;
};
<!-- 页面html代码 -->
<input type="button" value="增加" onclick="addTreeNode(event);">
<input type="button" value="插入" onclick="insertTreeNode(event);">
<input type="button" value="删除" onclick="deleteTreeNode(event);">
<div id="simple-04-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:302px;">
<div>例5：带有复选框的树(选中父时子选中)</div>
<div id="simple-05-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('05',event);">js代码</a></div>
<div id="code-05" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
window.onload=function(){
initData();
simple05();
}
//初始化树数据，默认存储为一个列表
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
//例5方法，创建树及显示树
function simple05(){
var tree=new Tree('simple-05');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, {});
tree.show('simple-05-parent', undefined, true);
}
//解析初始化的数据列表
function parseTreeNode(parentNode, parentId, dataList, checkbox){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
checkbox : checkbox||undefined,
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList, checkbox);
}
}
}
<!-- 页面html代码 -->
<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:302px;">
<div>例6：带有复选框的树(选中父时子不选中)</div>
<div id="simple-06-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
<div><a href="javascript:;" onclick="showJsCode('06',event);">js代码</a></div>
<div id="code-06" style="display: none;">//引用js，src路径根据具体开发时设置
<script type="text/javascript" src="tree-min/tree.js"></script>
window.onload=function(){
initData();
simple06();
}
//初始化树数据，默认存储为一个列表
function initData(){
window.dataList=[];
dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
}
//例6方法，创建树及显示树
function simple06(){
var tree=new Tree('simple-06');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
parseTreeNode(tree, "", dataList, {click:function(){return false;}});
tree.show('simple-06-parent', undefined, true);
}
//解析初始化的数据列表
function parseTreeNode(parentNode, parentId, dataList, checkbox){
var node;
for (var i = 0,length=dataList.length; i < length; i++) {
if(dataList[i].parentId==parentId){
var node=new TreeNode({
id : dataList[i].id,
name : dataList[i].name,
type : dataList[i].type,
checkbox : checkbox||undefined,
open : true
});
parentNode.append(node);
parseTreeNode(node, node.id, dataList, checkbox);
}
}
}
<!-- 页面html代码 -->
<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
</div>
</div>
</span>
<span style="float:left;margin:3px;width:604px;">
<div></div>
<div style="color:red;font-size:15px;height:300px;text-align:center;font-weight:bolder;">
<div style="line-height:40px;padding-top:100px;">
先写些简单点的例子，希望大家提出宝贵意见和建议<br>
QQ:348184835(非技术问题勿扰)
</div>
</div>
<div></div>
</span>
</div>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )