之二中的代码可以实现树的展示、修改和删除,但是在新增中存在如下问题:
如果节点下没有child,则不能创建新的节点,这也就是在测试的时候,为什么会出现有的时候,可以创建子节点,有时候不成功。
后来采用fire debug看的时候,发现在创建一个child node时候,总是要到后台先抓取tree,而后台的服务器代码如下:
def get_tree
if params[:id] == 'false'
@regions = Region.find(:all,:conditions=>"parent_region_id is NULL")
json_data = get_region_tree_json(@regions)
else
@regions = Region.find(params[:id]).child_regions
json_data = get_region_tree_json(@regions)
end
#发送json格式的子树数据,让前端javascript显示子树。
respond_to do |format|
format.json {render :text=>json_data}
end
end
如果鼠标点击的node送出去的region id 在库里没有子节点,将不会生成json。
变通方法:在上述的else代码中增加一个判断,“如果@regions为空,则创建一个空的json串”,便于jstree可以展开子树,而这个子树只是一个虚拟树,并保存在库中,虽然有点别扭,但是可以使用。
get_tree代码变为如下:
def tree
if params[:id] == 'false'
@regions = Region.find(:all,:conditions=>"parent_region_id is NULL")
json_data = get_region_tree_json(@regions)
else
@regions = Region.find(params[:id]).child_regions
unless @regions.blank?
json_data = get_region_tree_json(@regions)
else
#如果本节点下暂时没有子节点,在树中显示一个虚拟节点,便于创建新的节点。
json_data = "[{\"data\":\"虚拟节点\",\"attr\":{\"id\":\"\"}}]"
end
end
#发送json格式的子树数据,让前端javascript显示子树。
respond_to do |format|
format.json {render :text=>json_data}
end
end
这样基本的树的创建、删除、重命名都可以完成了。
欢迎各位将更加好的关于创建的方法,写出来。
分享到:
相关推荐
**jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...
**jstree1.0** 是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建目录结构、文件系统浏览器、组织图表等。尽管标题提及的是"jstree1.0 demo",但实际提供的压缩包...
5. **演示(_demo)**:`_demo`目录通常包含了一些示例代码和页面,展示jsTree的各种用法和配置选项。通过查看和运行这些示例,开发者可以快速上手,了解jsTree的常用功能和特性。 在jsTree中,你可以实现以下功能...
"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件,它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点,通过复选框进行操作,增加了交互性和数据...
综上所述,这个主题涵盖了使用jstree v1.0创建和管理树形结构的各个方面,包括基本设置、数据源配置、事件处理、插件应用以及可能涉及的源代码分析。实际的实现会根据"WebRoot"目录下的具体文件内容而有所不同。
### JsTree 1.0 详细介绍 #### 一、概述 JsTree 是一款基于 jQuery 的树形结构插件,能够帮助开发者快速构建出美观且功能丰富的树状展示界面。本篇文档将根据官方英文文档进行详细解读,并结合具体示例进行深入...
学习和使用 jsTree 1.0,你需要了解以下关键概念和方法: - **初始化**:通过 JavaScript 代码设置配置选项,如数据源、主题、插件等,然后在HTML元素上应用 jsTree。 - **操作节点**:利用 `jstree('create_node'...
**jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript ...结合提供的示例代码和文档,你将能够轻松地在项目中集成和定制 jsTree。
标题 "jstree_pre1.0_fix_1" 暗示这是一个 jstree 的早期版本的修复版,可能包含一些针对特定问题的修正和改进。 在描述中提到的 "demo" 和 "docs" 部分是理解这个插件的关键。"demo" 文件夹通常包含示例代码和预览...
在本文中,我们将深入探讨jsTree的API和其在实际应用中的使用方法。 ### 1. 初始化jsTree jsTree的初始化是通过调用`$().jstree()`函数来完成的。你需要指定一些配置选项,例如核心、插件、主题等,来定制你的树...
【项目计划书v1.0版 - 更改1】是一个关于软件项目的详细规划文档,主要关注基于Node.js的研究与应用。这份文档由温元祯在2017年3月22日编写并发布了初始版本V1.0。文档不仅包含了项目的背景、目标和范围,还涵盖了...
**基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...
《jQuery下的jstree简单应用 - v1.0》 jQuery中的jstree是一个功能强大的JavaScript库,专门用于创建交互式的树形结构。这个库在Web开发中被广泛使用,尤其在需要展示层级关系的数据时,如文件系统、组织结构或导航...
随着版本更新至 pre1.0,jsTree 的使用方式、函数名和整体结构都发生了显著变化。本文将深入探讨如何使用 jsTree 1.0 版本进行开发。 ### 1. 开始使用 jsTree 使用 jsTree 需要先引入 jQuery 库,因为 jsTree 是...
在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```javascript $(function () { $("#demo") .bind("before.jstree", function (e, data) { $("#alog").append(data.func + " ...
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...
2. JavaScript:js Tree的核心是JavaScript代码,它负责处理用户交互、数据加载和动态更新。使用事件监听器来捕捉用户的触摸或点击事件,然后执行相应的动作,如展开节点或切换选中状态。 3. 数据源:树的数据通常...
压缩包中的 "vakata-jstree-cc08849" 文件很可能包含了整个库的源代码、样式表、JavaScript文件、示例、文档以及其他必要的资源。开发者可以解压后在项目中引入这些文件,或者通过CDN链接直接在HTML中引用。在实际...
- `demo`目录:提供示例代码和HTML页面,帮助开发者了解如何使用`jstree`。 - `docs`或`manual`目录:可能包含详细的文档或用户手册,介绍插件的配置和用法。 - `images`目录:存放必要的图片资源,如图标等。 - `...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...