首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jstree - 添加自己包含子节点的子节点

jstree是一个基于jQuery的开源插件,用于创建交互式树形结构的可扩展树视图。它提供了丰富的功能和灵活的配置选项,使开发人员能够轻松地创建具有层次结构的树形菜单或文件浏览器。

在jstree中添加自己包含子节点的子节点,可以通过以下步骤实现:

  1. 首先,需要使用jstree提供的API方法来添加子节点。可以使用create_node方法来创建一个新的节点,并将其作为父节点的子节点添加到树中。该方法需要指定父节点的ID和要添加的子节点的数据。
  2. 在创建子节点时,可以使用li_attr属性来设置节点的自定义属性。这些属性可以用于存储任意的数据,以便在后续的操作中使用。
  3. 如果要添加的子节点还包含子节点,可以在创建子节点后,再次调用create_node方法来添加子节点的子节点。这样可以递归地添加多层子节点。

下面是一个示例代码,演示如何使用jstree添加自己包含子节点的子节点:

代码语言:javascript
复制
// 创建一个空的jstree实例
$('#tree').jstree();

// 获取要添加子节点的父节点
var parentNode = $('#tree').jstree('get_node', 'parent-node-id');

// 创建子节点的数据
var childNodeData = {
  text: 'Child Node',
  li_attr: {
    custom_attr: 'custom value'
  }
};

// 添加子节点
$('#tree').jstree('create_node', parentNode, childNodeData, 'last', function(newNode) {
  // 子节点创建成功后的回调函数
  console.log('Child node created:', newNode);

  // 添加子节点的子节点
  var childChildNodeData = {
    text: 'Child Child Node',
    li_attr: {
      custom_attr: 'custom value'
    }
  };

  $('#tree').jstree('create_node', newNode, childChildNodeData, 'last', function(newChildNode) {
    // 子节点的子节点创建成功后的回调函数
    console.log('Child child node created:', newChildNode);
  });
});

在上面的示例中,#tree是一个HTML元素,用于显示jstree树形结构。parent-node-id是要添加子节点的父节点的ID。text属性用于设置节点的显示文本,li_attr属性用于设置节点的自定义属性。

这是一个基本的示例,你可以根据实际需求进行修改和扩展。如果想了解更多关于jstree的详细信息和使用方法,可以参考腾讯云的jstree产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用jstree创建无限分级树(ajax动态创建节点)

首先来看一下效果 页面加载之初 节点全部展开后 首先数据库表结构如下 其中Id为主键,PId为关联到自身外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型...OrderNum { get; set; } public int SonCount { get; set; } } 此类型比数据库表增加了一个属性 SonCount 这个属性用来记录当前节点节点个数...ID 如果请求顶级节点,则此参数值为00000000-0000-0000-0000-000000000000 GetMenu函数获取需要请求节点数据 private List<MenuType...如果顶级节点SonCount属性大于0 则使节点为闭合状态(样式为jstree-closed) 如果节点节点 则该节点样式为jstree-leaf 当用户点击闭合状态节点时,客户端发起请求...并把点击节点ID传给后端,后端获取到点击节点节点后 通过append添加到点击节点下 至此,无限分级树创建完成 其中不包含数据库

1.7K20

js|jq获取兄弟节点,父节点,节点

08.19自我总结 js|jq获取兄弟节点,父节点,节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes;...// 全部节点 var first = test.firstChild; // 第一个节点 var last = test.lastChile; // 最后一个节点  var previous =...; // 父节点元素 var first = test.firstElementChild; // 第一个节点元素 var last = test.lastElementChile; // 最后一个节点...注意操作父来控制必须给元素赋予一个变量 二.jq $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....jQuery对象,他们包含筛选到元素 $("ul li").eq(1); // 选取ul li中匹配索引顺序为1元素(也就是第2个li元素) $("ul li").first(); // 选取ul

14.9K10

树形结构已知节点获取节点所有父节点——任意目录树

JS 树形结构 根据节点找到所有上级,比如element-tree,已知路由上结点id,如何回填 展开目录树?...树查找与遍历都非常简单,具体可以查看我之前写:《讲透学烂二叉树(三):二叉树遍历图解算法步骤及JS代码》或者:JS树结构操作:查找、遍历、筛选、树和列表相互转换 https://wintc.top.../article/20但是 如何根据结点找所有父节点目录呢?...之前遍历与查找代码并不能解决这个问题,这里我单独给出一段代码:export default function findParents(arr, id, findProps = 'id', childProps...《树形结构已知节点获取节点所有父节点——任意目录/树》,请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2022_0422_8797

2.9K10

jquery 获取元素(父节点,节点,兄弟节点)

1、jquery 获取元素(父节点,节点,兄弟节点) $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1")....parents(".mui-content"); $("#test").children(); // 全部节点 $("#test").children("#test1"); $("#test").contents...").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1"); 2、元素筛选 // 以下方法都返回一个新...jQuery对象,他们包含筛选到元素 $("ul li").eq(1); // 选取ul li中匹配索引顺序为1元素(也就是第2个li元素) $("ul li").first(); // 选取ul...li中匹配第一个元素 $("ul li").last(); // 选取ul li中匹配最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li"

5.5K10

二叉树节点最近父节点

查找二叉树节点最近共同父节点 分析 实现 算法复杂度 其他算法 题目升级 给定一个二叉搜索树, 找到该树中两个指定节点最近公共祖先。...百度百科中最近公共祖先定义为:“对于有根树 T 两个结点 p、q,最近公共祖先表示为一个结点 x,满足 x 是 p、q 祖先且 x 深度尽可能大(一个节点也可以是它自己祖先)。”...说明: 所有节点值都是唯一。 p、q 为不同节点且均存在于给定二叉搜索树中。...分析 对于二叉树来讲,由于左右子树指针存在,使得正常情况下自上而下遍历显得比较简单,而下而上查找并不那么容易,所以一种直观思维就是从根节点开始遍历,直到找到节点p pp,记录路径数组为p a t...,二叉搜索树变成了一个类似于链表结构,而p , q p,qp,q是在最底端两个节点那么搜索p , q p,qp,q节点时间复杂度都可以达到n nn(n nn为树中节点个数),时间复杂度为O ( n

1.8K40

treeview插件使用:根据节点选中父节点

bootstrap-treeview本身对勾选/取消支持是没问题,问题在于复选框业务逻辑上:     ① 如果 勾选了父级节点,怎么让节点全部变为勾选状态?     ...博主开发时候也是问了度娘,但很多网友分享让自己这样前端薄弱的人看得头大,所以项目功能实现后,特意整理了自己简洁实现,如博友有更好方法,欢迎告知,共同进步。   ...基于同样思想,要想实现选中某一节点后同时选中所有的父节点,那么只需要在代码中继续添加:① 通过节点判断父节点存在;② 选中父节点;③ 递归判断。...正当我喜滋滋以为功能实现了时候,突然发现了很大bug,就是在通过节点选中所有父节点功能实现中,选中是没有问题,可是当取消某个子节点,无论兄弟节点是否有选中,父节点都一并被取消掉了。...这肯定是有问题。所以,自己又对取消事件单独做了判断,判断取消时候,是否还有兄弟节点是处于选中状态,如果有,那么父节点就不执行取消了。

5.6K40

Elementui Tree 树形控件删除节点

list集合里面提交 回到今天正题: Elementui Tree 树形控件删除节点功能实现 在这个功能上 需要接续开发一个功能,前面其实也写过 现在再写一遍 写具体一点吧 (Elementui...Tree 树形控件删除节点) 无论啥时候,写什么代码,都要先看一下文档,毕竟看完文档之后,可以解决99%问题哦 文档链接: 组件:https://element.eleme.cn/#/zh-CN.../component/tree 功能:当鼠标划过Tree 树形控件节点时候,会出现一个删除按钮 点击删除按钮,会出现弹框询问是否删除 选中删除,则删除树节点(最上层节点不可删除) 1:第一步...,当然是添加删除元素了 在文档里面有这样说明: 可以通过两种方法进行树节点内容自定义:render-content和 scoped slot。...因为功能是,当鼠标划过树形控件节点时候 才会出现了那个删除图标 需要在渲染时候设置一下isHover: false isHover: false, test.vue <template

1.8K30

快速获取图根节点属性

@TOC[1] Here's the table of contents: •一、问题背景•二、构建样例多子图数据•三、实现根节点属性查找•四、将图查找GQL封装为一个函数•五、总结 快速获取图根节点属性...图查找匹配是一个非常复杂问题,主要有确定模式图匹配和不确定模式图匹配【例如:通过图模式相似性进行查找】。...已知图查找问题可以使用APOC中过程来实现,apoc.path相关输入输出查询[2];指定节点之后获取节点所属图,然后从子图中提取出ROOT节点属性。...其中指定a节点为ROOT节点节点。...,并返回根节点subname属性' ); RETURN custom.subGraphRootName('e') AS rootSubName; 五、总结 本文通过一个非常简单场景,介绍了一个图分析方法

2.4K10
领券