`

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.min.js.zip

    - **树形结构**:jstree 能够创建多层级的树形结构,每一级都可以包含任意数量的子节点,适合展示层次清晰的数据。 - **交互性**:用户可以通过点击、拖放、折叠/展开节点等方式与树进行交互,提供了丰富的事件...

    jstree_pre1.0_stable.zip

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

    jquery下jstree简单应用 - v1.0.docx

    本文档主要介绍了如何在 jQuery 下使用 jstree 构建简单的树形结构,并实现了以下功能: 1. **使用 JSON 数据格式构建树形结构**:文档通过 `function_callBack` 函数直接在前端页面中组装 JSON 数据,而非通过后端...

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

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

    jsTree.v.0.9.9a.zip

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

    jsTree中文文档

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

    jsTree中文api

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

    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 1.0 详细介绍

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

    jstree 1.0 最新版

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

    jsTree树控件(基于jQuery, 超强悍)

    **jsTree:基于jQuery的超强大树形控件** jsTree是一款高度可定制的JavaScript库,专注于构建交互式的树形结构。它完全基于jQuery,因此能够无缝地融入任何已使用jQuery的项目中,同时支持所有主流浏览器,包括...

    jquery jstree

    在给定的压缩包中,我们看到的是 `jsTree.v.1.0rc2` 版本。这个版本可能包含了一些基础特性和修复,但请注意,这已经是较早的一个版本。当前的jsTree版本已经发展到了3.x系列,提供了更多的功能和改进。升级到最新...

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...

    jstree_pre1.0_fix_1

    **jstree** 是一个基于 jQuery 的开源库,专门用于创建、操作和展示 HTML DOM 上的树状结构。它提供了一种优雅的方式...通过研究提供的 demo 和文档,开发者可以掌握如何有效地利用 jstree 实现交互式的树形数据展示。

Global site tag (gtag.js) - Google Analytics