`

jstree(jsTree.v.1.0rc) 三级树形,如何获取默认状态下的子节点Id

阅读更多
 悬赏园豆:50 [已关闭问题] 浏览: 534次

第一个问题:如何获取默认状态下的子节点Id

 

第二个问题:默认选择子节点的时,让父类出现半勾状态。这个方法怎么写

 

麻烦高手们,帮帮忙。如果有好的方法跟我联系下:415859076 谢谢!

LikeNeng的主页LikeNeng | 初学一级 | 园豆:153
提问于:2013-07-25 20:43

问题补充:

    也许我描述的不太清楚,我自己写了一个测试项目与真实项目报错一样的列子。百度网盘下载地址:http://pan.baidu.com/share/link?shareid=4279454005&uk=3744480727

没有多太。麻烦高手们有时间,有时间帮我看看。。谢谢!

 
所有回答(2)
0

一.这里我不知道你说的默认子节点的ID是什么意思,下面的代码是当你点击该节点是,获得该节点的ID:

1  $("#RoleTree").bind("select_node.jstree", function (event, data) {
2                 if (data.rslt.obj.length == 1) {
3 
4                     var value = data.rslt.obj.attr("id");   //获取节点的id值(id值由Controller赋值)
5                     nowroleid = value;
6                     var child = data.rslt.obj.attr("hid");

二.对于这个半勾状态不是很难,但是有点繁琐:

 1             //修正模块树的勾选情况
 2             function checkchang2(jstreeid) {
 3 
 4                 var $firstul = $("#" + jstreeid).children("ul");
 5                 var $li = $firstul.find("li");
 6                 // repeate($li);
 7                 for (var k = 0; k < $li.length; k++) {
 8                     check($($li.get(k)));
 9                 }
10                 for (var k = 0; k < $li.length; k++) {
11                     check($($li.get(k)));
12                 }
13             }
14 
15             function check(node) {
16                 var $li = $(node)
17 
18                 var $childli = $li.children("ul").children("li");
19                 if ($childli.length == 0) return;
20                 else {
21                     var state;
22                     for (var j = 0; j < $childli.length; j++) {
23                         if (j == 0) {
24                             if ($($childli.get(j)).hasClass("jstree-undetermined"))
25                                 $li.removeClass('jstree-checked').addClass("jstree-undetermined");
26                             else state = $($childli.get(j)).hasClass("jstree-checked");
27                         }
28                         else if (state != $($childli.get(j)).hasClass("jstree-checked")) {
29                             if ($li.hasClass("jstree-checked")) {
30 
31                                 $li.removeClass('jstree-checked').addClass("jstree-undetermined");
32                             }
33                         }
34                     }
35 
36                 }
37             }

代码中的jstree-checked就是指打勾状态,jstree-undetermined就是你说的半打勾状态,至于样式就是CSS决定的了。

 
真假不分 | 园豆:248 (菜鸟二级) | 2013-07-26 00:55

不管理怎样,还是谢谢!用你的这个方法。还是不能实现。也许是我描述没有清楚吧。我写一个测试项目,报错bub和我真实的项目一样。 嗯,你有时间能不能帮我看下嘛。谢谢

LikeNeng | 园豆:153 (初学一级) | 2013-07-26 13:58

@LikeNeng: 你是用MVC开发的吗?这里氏JS的代码你对这个树引用这个方法看看

            function settreecheck(jsondate, jstreeid) {          //根据数据在树种查找元素
                var $idlist = new Array();
                var j;
                j = 0;

                var $lilist = $("#" + jstreeid).find("li");
                for (var i = 0; i < $lilist.length; i++) {
                    var tempid = $($lilist.get(i)).attr("id")
                    if (tempid != "") {
                        for (j = 0; j < jsondate.length; j++) {
                            if (jsondate[j] == tempid) {
                                var a = $($($lilist.get(i)).children("a").get(0)).text();

                                if ($($lilist.get(i)).hasClass("jstree-leaf")) $($lilist.get(i)).removeClass().addClass("jstree-checked").addClass("jstree-leaf");

                                else $($lilist.get(i)).removeClass("jstree-unchecked").removeClass("jstree-undetermine").addClass("jstree-checked");

                                $($($lilist.get(i)).parents("li")).removeClass("jstree-closed").addClass("jstree-open");

                                var $b = $($($lilist.get(i)).children("a").get(0));
                                  $b.removeClass().addClass("jstree-search");

                            }
                        }
                    }
                }
            }

这是一个类似你的那个项目,点击另外一棵树的某个叶子,显示该也是在第二颗树上拥有的权限,树的代码:

          $("#RoleTree").bind("select_node.jstree", function (event, data) {
                if (data.rslt.obj.length == 1) {

                    var value = data.rslt.obj.attr("id");   //获取节点的id值(id值由Controller赋值)
                    nowroleid = value;
                    var child = data.rslt.obj.attr("ifPerson");
                    if (value != "#") {
                        $.ajax({
                            type: "Post", 
                            url: '@Url.Action("GetModuleIDByRoleID","Role")',
                            cache: false,
                            data: "roleid=" + value,
                            datatype: "json",
                            success: function (msg) {
                                $("input#hidden:hidden").attr("value", value);
                                $("#hiddenleaf").attr("value", child);
                                if ($("#hiddenleaf").attr("value") != "") {
                                    AlertMessage.innerHTML = "";
                                    $("#ModuleTree").show()
                                    removeclass("ModuleTree");
                                    settreecheck(msg, "ModuleTree");
                                    checkchang2("ModuleTree");
                                }
                                else {
                                    //AlertMessage.innerHTML = "当前选择的是角色分类,请继续选择角色";
                                    $("#ModuleTree").hide();
                                }
                            }
                        })
                    }
                }
            });

我是用.NET MVC开发的,如果是别的可能帮到你

真假不分 | 园豆:248 (菜鸟二级) | 2013-07-26 14:28
 
0

谢谢,大家。这个问题我已经搞定。。

 
LikeNeng | 园豆:153 (初学一级) | 2014-04-17 14:54
 
 
分享到:
评论

相关推荐

    jsTree.v.1.0中文文档

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

    jsTree.v.1.0rc2

    总的来说,jsTree.v.1.0rc2是一个强大的前端工具,适用于构建网页中的交互式树状视图,尤其适合需要展示层级关系的数据场景,如文件系统、组织结构图等。学习和掌握jsTree的使用,将提升你在开发中处理此类问题的...

    jstree v1.0 实现树形结构

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

    jsTree v.1.0中文文档

    **jsTree v.1.0中文文档概述** jsTree 是一个用JavaScript编写的开源库,主要用于在网页上创建可交互的树形结构。这个库在v.1.0版本时,已经成为开发人员构建多层级数据展示和管理界面的常用工具。尽管这个中文文档...

    jstree-v.pre1.0.zip

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

    使用jsTree实现js树形结构

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

    zxx.drag.1.0.js

    拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js拖动js zxx.drag.1.0.js

    jstree_pre1.0_stable.zip

    在"jstree_pre1.0_stable.zip"这个压缩包中,包含了jstree 1.0预发布版本的核心文件和相关资源,为开发者提供了构建各种基于树形数据结构的用户界面的强大工具。下面我们将深入探讨这个版本的关键特性、使用方法以及...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    **JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...

    ext.net.pro.1.0rc1(收藏)

    "ext.net.pro.1.0rc1"是EXT.NET Pro的一个早期版本,即1.0 Release Candidate 1,意味着它是在正式版本发布前的最后一个测试版,通常包含了大部分最终版本的功能,但可能存在一些已知问题。 这个压缩包包含EXT.NET ...

    jsTree.v.0.9.9a.zip

    jsTree 版本 v0.9.9a 提供了丰富的功能和选项,使得在 Web 应用程序中集成树形结构变得非常简单。 **主要特性** 1. **多用途**:jsTree 可以用于各种场景,如文件管理、导航菜单、组织结构展示等。 2. **可配置性*...

    jstree1.0 demo

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

    jsTree中文api

    总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...

    jsTree中文文档

    jsTree 有多种事件可以监听,比如 `ready.jstree`(初始化完成)、`select_node.jstree`(节点被选中)和 `rename_node.jstree`(节点重命名)。以下是一个监听节点被选中的例子: ```javascript $('#jstree_demo_...

    jsTree 1.0 中文文档.zip

    - **获取节点信息**:`jstree('get_node')` 方法可用于获取节点的详细信息,包括ID、文本、状态等。 - **操作状态**:`jstree('open_node')` 和 `jstree('close_node')` 控制节点的展开和折叠,`jstree('select_...

    jquery下jstree简单应用 - v1.0

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

    JsTree 最详细教程及完整实例

    3. **API 操作(API Operations)**:JsTree 提供了丰富的 API,如 `get_node` 获取节点信息,`open_node` 展开节点,`select_node` 选择节点等。 4. **主题定制(Theming)**:JsTree 支持自定义主题,你可以调整...

    jsTree树形菜单

    **jsTree:JavaScript实现的树形菜单** jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据...

    jstree 1.0 详细介绍

    JsTree 是一款基于 jQuery 的树形结构插件,能够帮助开发者快速构建出美观且功能丰富的树状展示界面。本篇文档将根据官方英文文档进行详细解读,并结合具体示例进行深入分析。 #### 二、环境搭建与依赖 在开始使用...

    jstree 1.0 最新版

    5. **使用API**:根据需要,利用`jstree`的API进行动态操作,如加载子节点、获取选中节点等。 总的来说,`jstree 1.0`是JavaScript开发中的一个强大工具,通过其简洁的API和丰富的插件,可以快速创建出功能强大的树...

Global site tag (gtag.js) - Google Analytics