`
s8186255
  • 浏览: 87772 次
  • 性别: Icon_minigender_1
  • 来自: 新疆乌鲁木齐
社区版块
存档分类
最新评论

jstree使用之四 jstree1.0使用-修订原来的不完美的地方

阅读更多

jquery和javascript不会因为程序的排名而又任何变化,他们依然以十足的活力,在web开发中纵马驰骋。rails和ruby也是 一样,及时是一把钝刀,用的熟了,那也可以庖丁解牛,况且这两R就像足球场上的每个罗纳尔多一样,犀利无比。总之,坚持,就像开放一样,是软件开发者、团队的终身信条。

废话一堆,这里将jstree前面曾经采用的创建node的变通方法,进行修改。

1.首先明确在展示tree的时候,不能够将所有node的status设定为closed,必须加以判断,如果有child,则设置为closed,如果没有child,则设置为opened;

所以将private方法修改如下:

 

def get_region_tree_json(regions)
json_data = String.new
json_data += "["

regions.each do |region|
unless region.child_regions.blank?
json_data += "{\"data\":\"#{region.name}\",\"attr\":{\"id\":\"#{region.id}\"},\"state\":\"closed\"}"
else
json_data += "{\"data\":\"#{region.name}\",\"attr\":{\"id\":\"#{region.id}\"},\"state\":\"opened\"}"
end
json_data += "," unless region == regions.last
end
json_data += "]"
return json_data
end
 

 

 

2.只是做上述工作还有问题:会发现创建的树节点出现一下,又消失,感觉没有创建成功。如果你刷新,这个新建节点还是很稳健的出现了,说明保存在库中了。删除节点、修改节点都是这样。于是对这三个action作如下修改:

 def create
    @region = Region.create(
      :parent_region_id=>params[:id],
      :name=>params[:name],
      :creator_id=>current_user.id
    )
    render :text =>"{\"id\":\"#{@region.id}\",\"status\":\"1\"}"
  end

  def update
    if Region.find(params[:id]).update_attributes(:name=>params[:name])
    render :text => "{ \"status\" : 1 }"
    else
    render :text => "{ \"status\" : 0 }"
    end

  end
  
  def destroy
    region = Region.find(params[:id])
    if region.child_regions.blank?
      if region.destroy
      render :text => "{ \"status\" : 1 }"
      else
      render :text=> "{ \"status\" : 0 }"
      end
    else
     flash[:notice] = "不能删除有子节点的节点"
    end
    
  end

 

增加了render代码,以符合json格式的方式,发送出去。

这些数据到了javascript前端;

 

3.需要在post这个ajax方法配置参数的时候,增加一个配置内容,即在function后面配置数据格式为“json”,前面遗漏了。下面是remove的代码,create、rename都需要这样做

    .bind("remove.jstree", function (e, data) {
      $.post(
      "/admin/regions/destroy",
      {
        "id" : data.rslt.obj.attr("id")
      },
      function (r) {
        if(!r.status) {
          $.jstree.rollback(data.rlbk);
        }
      },
      'json'
    );
    });

 

这样增删改都可以了。

 

 

 

3
0
分享到:
评论
1 楼 tangming唐明 2010-06-29  
如果是struts1.3后台能拼成正确的json字符串就可以了吗?也需要render的什么方法吗?

相关推荐

    jstree1.0 demo

    **jstree1.0** 是一款基于JavaScript的开源库,专门用于创建、操作和展示树状数据结构。它在Web应用中广泛用于构建目录结构、文件系统浏览器、组织图表等。尽管标题提及的是"jstree1.0 demo",但实际提供的压缩包...

    jsTree.v.1.0中文文档

    **jsTree.v.1.0中文文档** jsTree是一款基于JavaScript的开源库,主要用于创建、操作和展示HTML页面上的树状结构。它适用于构建复杂的交互式界面,如文件管理系统、组织架构图、导航菜单等。jsTree v.1.0是该库的一...

    jsTree.v.1.0rc2

    jsTree 是一个流行的JavaScript库,专门用于创建交互式的树型结构。版本1.0rc2是这个库的一个早期版本,代表“Release Candidate 2”,意味着它是一个即将正式发布的测试版本,可能比之前的版本更加稳定,但仍然可能...

    mtree1.0-checkbox-tableTree-带复选框树形控件

    "mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件,它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点,通过复选框进行操作,增加了交互性和数据...

    jstree v1.0 实现树形结构

    "jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...

    jstree 1.0 详细介绍

    ### JsTree 1.0 详细介绍 #### 一、概述 JsTree 是一款基于 jQuery 的树形结构插件,能够帮助开发者快速构建出美观且功能丰富的树状展示界面。本篇文档将根据官方英文文档进行详细解读,并结合具体示例进行深入...

    jsTree 1.0 中文文档.zip

    这个压缩包“jsTree 1.0 中文文档.zip”包含的是 jsTree 1.0 版本的中文文档,虽然翻译可能不够完美,但能帮助中文用户理解其基本用法和功能。 jsTree 的核心特性包括: 1. **多种视图模式**:jsTree 支持多种布局...

    jstree_pre1.0_fix_1

    标题 "jstree_pre1.0_fix_1" 暗示这是一个 jstree 的早期版本的修复版,可能包含一些针对特定问题的修正和改进。 在描述中提到的 "demo" 和 "docs" 部分是理解这个插件的关键。"demo" 文件夹通常包含示例代码和预览...

    jsTree中文api

    在本文中,我们将深入探讨jsTree的API和其在实际应用中的使用方法。 ### 1. 初始化jsTree jsTree的初始化是通过调用`$().jstree()`函数来完成的。你需要指定一些配置选项,例如核心、插件、主题等,来定制你的树...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    jquery下jstree简单应用 - v1.0

    《jQuery下的jstree简单应用 - v1.0》 jQuery中的jstree是一个功能强大的JavaScript库,专门用于创建交互式的树形结构。这个库在Web开发中被广泛使用,尤其在需要展示层级关系的数据时,如文件系统、组织结构或导航...

    jsTree-ver1.0开发技术指南定义.pdf

    随着版本更新至 pre1.0,jsTree 的使用方式、函数名和整体结构都发生了显著变化。本文将深入探讨如何使用 jsTree 1.0 版本进行开发。 ### 1. 开始使用 jsTree 使用 jsTree 需要先引入 jQuery 库,因为 jsTree 是...

    JSTree-1.0.js 基于JSONRPC 的动态树(源码)(并且支持延迟加载)

    在原来的JSTree.js进行了优化,支持加载后台数据。性能和原来的一样,单个节点可加载千个数据。如果采用延迟加载,可以轻松加载上万条数据。 前后台交互采用的是JSONRPC。 希望你那个对大家有个帮助,希望大家来...

    jsTree操作 jsTree插件简介

    **jsTree 操作详解** jsTree 是一个基于 jQuery 的开源 JavaScript 库,用于创建交互式的树状视图。它提供了一种优雅的方式来呈现和操作数据结构,尤其适用于构建树形菜单或目录。jsTree 支持多种功能,包括动态...

    jstree-v.pre1.0.zip

    `jstree v.pre1.0`是该插件的一个版本,它可能包含了该插件的一些预发布特性或者改进,以满足开发者对功能和性能的需求。 **核心功能** 1. **树型展示**: `jstree`能够将HTML元素或JSON数据转换为可交互的树形结构...

    JsTree 实例使用

    **JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...

    基于jquery的树形结构JsTree 使用心得

    **基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...

    jstree_pre1.0_stable.zip

    《jstree 1.0预发布版:深入解析与应用》 jstree是一个流行的JavaScript库,专门用于创建交互式的HTML树形结构。在"jstree_pre1.0_stable.zip"这个压缩包中,包含了jstree 1.0预发布版本的核心文件和相关资源,为...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    jstree-3.3.4.rar

    以下将详细探讨jstree 3.3.4的核心特性、使用方法以及其在实际项目中的应用场景。 1. **核心特性** - **多层结构**:jstree 支持无限层级的树结构,可以轻松地表示复杂的层级关系,如文件系统、组织架构等。 -...

Global site tag (gtag.js) - Google Analytics