var project=new subproject
(
'',
'',
'',
''
);
demo.push(project);
var res="";
function treeNode(array,bean,tree,code){
var codeId=code;
// var a =new WebFXTreeItem(bean.name,"javaScript:showDiv(this,"+"'"+bean.id+"','"+bean.pid+"');");
for(var j=0;j-1){
codeId="a"+sub.pid;
}
res+=""+codeId+".add(a"+sub.id+");";
if(sub.pid!=codeId.substr(1,codeId.length)){
codeId="a"+sub.id;
}
}
treeNode(array,sub,tree,codeId);
}
}
return res;
}
if (document.getElementById) {
var tree = new WebFXTree('',"javaScript:showDiv(this,'','-1','');");
tree.setBehavior('classic');
var bean=new subproject
(
'',
'-1',
''
);
eval(treeNode(demo,bean,tree,""));
//实际
document.write(tree);
}
var ID,parentID,projectCode,temp;
function addCallBack(data)//data是后台返回的值,名字自取,也可省略,因为JS允许
{
alert("is in h\erere........");
if(data>0){
alert("子项目分解成功 "); //处理方法……;如果callBack()没有写明返回值,可以通过argments[0]拿到
tree.getSelected().add(new WebFXTreeItem(dwr.util.getValue("projectSubName"),"javaScript:showDiv(this,"+"'"+ID+"','"+parentID+"','"+projectCode+"');"));
closeDiv();
tree.getSelected().expand();
}else{
alert("子项目分解失败");
}
}
function editCallBack(data){
//处理方法……;如果callBack()没有写明返回值,可以通过argments[0]拿到
if(data>0){
alert("项目修改成功");
document.getElementById(tree.getSelected().id+"-anchor").innerHTML=dwr.util.getValue("projectSubName");
closeDiv();
}else{
alert("项目修改失败");
}
}
function delCallBack(data){
if(data>0){
alert("有子节点,不允许删除");
}else{
alert("删除成功");
if (tree.getSelected()) {
tree.getSelected().remove();
closeDiv();
}
};
}
function addNode() {
var pname=dwr.util.getValue("projectSubName");
alert(pname);
if (tree.getSelected()) {
var level;
if(tree.getSelected().text==''){
level=1;
projectCode="none";
}else{
level=tree.getSelected()._level+1;
}
var totalChildren=tree.getSelected().childNodes.length;
if(totalChildren>=1){
var sAction=tree.getSelected().childNodes[totalChildren - 2].action;
projectCode=sAction.substr(24,20);
}
if(level>=3){
alert("最多只能分为3个层级");
}else{
alert("ID"+ID);
// alert("parentID=>"+ID+" projectCode=>"+projectCode+" level"+level);
zdxmfjDeal.doAdd(pname,ID,projectCode,level,addCallBack);
}
}
}
function editNode() {
if (tree.getSelected()) {
zdxmfjDeal.doEdit(ID,dwr.util.getValue("projectSubName"),editCallBack);//回调函数callBack()
}
}
function delNode() {
zdxmfjDeal.doDelChild(ID,delCallBack);
}
function showDiv(obj,id,pid,code) {
ID=id;
parentID=pid;
projectCode=code;
// alert(id+ " parentID" +pid+"projectCode"+code)
document.all.inputNameDiv.style.display="";
document.all.projectSubName.value="";
document.all.inputNameDiv.style.top=document.getElementById(tree.getSelected().id+"-anchor").offsetTop+15;
document.all.inputNameDiv.style.left=document.getElementById(tree.getSelected().id+"-anchor").offsetLeft;
}
function closeDiv() {
document.all.inputNameDiv.style.display="none";
}
分享到:
相关推荐
XTree是基于纯JavaScript实现的一种树状数据结构的控件,它提供了一种高效、灵活的方式来显示和操作树形数据。 **树形结构的基础知识:** 在计算机科学中,树是一种非线性数据结构,由节点(或称为顶点)和边组成。...
"js tree" 是一种专门用于在JavaScript中实现树形控件的库,它允许开发者在网页上以图形化的方式展示和操作树形数据。 "xtree117" 可能是指这个js tree库的一个特定版本或者一个特定的使用示例。在JavaScript中,树...
XTree2组件利用JavaScript的事件处理、DOM操作和数据处理能力,构建出用户友好的树状视图。下面我们将详细探讨XTree2组件的一些关键知识点: 1. **DOM操作**:XTree2组件首先需要获取HTML元素来渲染树结构,这通常...
- `xtree.js`:这是xtree的核心脚本文件,包含了实现树结构的JavaScript代码,包括节点操作、事件处理、样式应用等功能。 - `xloadvtree.js`和`xloadtree.js`:这两个文件可能用于动态加载树数据,可能是异步加载...
4. **xtree.js**: 这很可能是xtree主库文件,包含核心的树形结构实现,包括创建、遍历、操作节点的方法,以及事件处理等功能。 关于"WebProject"的例子,这可能是一个完整的Web项目,包含必要的HTML、CSS和...
在这个压缩包中,主要包含的文件是 "xtree.js",这是一个JavaScript库,提供了对树状数据进行操作和渲染的功能。 在Web开发中,树形结构常常用于表示具有层级关系的数据,比如文件系统、组织架构或菜单导航。xtree....
3. **tree.js**: 可能是辅助或扩展XTree功能的另一个JavaScript文件,可能包含了特定的树形结构操作或者特定类型的节点处理。 4. **xtree.css**: 这是样式表文件,用于定义XTree元素的视觉样式,包括节点的布局、...
- **初始化**:在HTML中引入XTree的JS和CSS文件,然后在JavaScript中调用相关API设置菜单数据和配置选项。 - **API调用**:XTree提供了一系列的API接口,如`loadData`用于加载数据,`expandNode`用于展开节点,`...
xTree利用JavaScript的DOM(Document Object Model)操作能力,动态创建和控制树形菜单的结构和行为。 **2. 树形数据结构** 树形数据结构是计算机科学中的一种重要概念,用于表示具有层级关系的数据。xTree通过...
"xtree"可能指的是一个JavaScript实现的树形数据结构库,它允许开发者在Web应用中创建和操作树结构。树是计算机科学中常用的数据结构,它由节点(或称为元素)和连接这些节点的边组成,模拟了分层和父子关系的概念。...
在IT行业中,XTREE和XLoadTree是一种广泛用于构建网页应用程序中的树形结构视图的JavaScript库。这些库主要用于展示层级关系数据,如文件系统、组织结构或菜单系统。它们通常与CSS样式表和图像资源结合使用,以提供...
Xtree是一个JavaScript库,主要用于在Web页面上创建和管理树形结构。它提供了丰富的API,允许开发者动态添加、删除和更新节点,支持事件监听,以及自定义节点样式和行为。在Web应用中,xtree通常与后端服务配合,...
JavaScript编写的`xtree`是一种基于前端的树形数据结构实现,它允许用户在网页上展示和操作层次化的数据。这种技术在Web开发中非常常见,特别是在构建具有导航菜单、文件系统视图或者组织结构图的场景下。下面将详细...
原生JavaScript实现的XTree代码量较大,需要处理更多的DOM操作和事件绑定,而基于库的XTree则可以利用库提供的便利性,简化代码,提高开发效率。 在使用XTree时,我们首先需要准备数据结构,例如: ```javascript ...
"xtree菜单树"是一种在计算机程序中...理解和掌握xtree的实现原理及操作方法,对于提升软件的用户体验和功能完整性至关重要。无论是初学者还是经验丰富的开发者,都有必要深入研究这一主题,以便在实际工作中灵活运用。
XTREE1组件的核心是利用JavaScript的数据结构和DOM操作来构建和管理树形结构。它通过遍历数据源,动态生成HTML结构,并添加必要的事件监听器以实现节点的展开、折叠、选择等功能。JavaScript的灵活性使得XTREE1可以...
JavaScript 创建 XTree 指南 在Web开发中,数据的层次结构经常需要以图形化的方式展示,这就是XTree...总之,创建一个标准的XTree需要对JavaScript、DOM操作以及数据结构有深入理解,同时也要关注用户体验和性能优化。
通过合理设置缓存策略、使用分页加载和优化DOM操作,可以提高`xtree`的加载速度和用户体验。 8. **错误处理**:在开发过程中,良好的错误处理机制是必不可少的。`xtree`的异常情况可能包括数据加载失败、网络问题等...
这个“xtree”项目显然是一个具有添加和修改功能的树形结构实现,可能是为了在网页上展示和操作层次化的数据。 首先,我们来了解一下树形结构的基础知识。树形结构是由节点(或称为元素)和边(或连接线)组成的...
XTREE3是早期流行的JavaScript树形菜单插件,其功能强大,易于定制,支持动态加载和异步操作,能够适应各种复杂的网页布局需求。而XTREE117则是对XTREE3的进一步升级,增加了更多特性,如节点拖放、右键菜单等,提升...