最近在做个树形展示的东东
但是在使用JsTree时,怎么都不能创建子节点,哪位大虾指点一下!
怎么都无法调用创建子节点的方法,后台怎么也接收不到信息,但奇怪的是rename倒是可以,问问大家应该怎么调试?
demo中创建子节点的代码:
.bind("create.jstree", function (e, data) {
$.post(
"http://localhost:8080/Product/Servlet/JsTree",
{
"operation" : "create_node",
"id" : data.rslt.parent.attr("id").replace("node_",""),
"position" : data.rslt.position,
"title" : data.rslt.name,
"type" : data.rslt.obj.attr("rel")
},
function (r) {
if(r.status) {
$(data.rslt.obj).attr("id", "node_" + r.id);
}
else {
$.jstree.rollback(data.rlbk);
}
}
);
})
调用代码:
<script type="text/javascript">
$(function () {
$("#menu input").click(function () {
switch(this.id) {
case "add_default":
case "add_folder":
$("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
break;
case "search":
$("#demo").jstree("search", document.getElementById("text").value);
break;
case "text": break;
default:
$("#demo").jstree(this.id);
break;
}
});
});
</script>
分享到:
相关推荐
{ "text": "节点1", "children": [ { "text": "子节点1" }, { "text": "子节点2" } ] }, { "text": "节点2" } ] } }); ``` 这里,`'core'`部分定义了树的基本结构,`'data'`属性包含了一组JSON对象,代表树的...
$('#jstree_demo_div').jstree({ 'core': { 'data': [ { "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" } ] } }); }); ``` ...
在这个例子中,我们创建了一个ID为`jstree_demo_div`的空div,作为JsTree的容器。然后,我们在`$(document).ready()`函数中初始化了JsTree,配置项`'core'`定义了数据源。这里的数据源是一个JSON数组,每个元素表示...
jsTree是一款基于JavaScript的开源库,用于创建可交互的树形结构,广泛应用于网页中的数据展示和管理。它支持多种数据源,包括JSON格式,非常适合与后端编程语言如ASP.NET和C#配合使用。jsTree不仅提供了丰富的API和...
{ "text": "节点1", "children": [{ "text": "子节点1" }, { "text": "子节点2" }] }, { "text": "节点2" } ] } }); ``` 这里,`core`配置项定义了数据源,`data`属性可以是数组形式的JSON数据。 3. **样式...
jsTree是一款基于JavaScript的开源库,专门用于创建交互式的树形菜单。它提供了丰富的功能和多种定制选项,适用于网页中的数据组织和展示,如导航菜单、文件系统视图或者数据层级结构的展现。jsTree在Web开发中被...
**jstree** 是一款非常流行的JavaScript库,用于在网页中创建交互式的树形结构。这个压缩包"jstree相关资源文件.zip"包含了构建和美化jstree所需的核心组件,包括`jstree.min.js`和`style.min.css`等文件。 1. **js...
7. **types 插件**:允许定义不同类型的节点,并设置它们的属性,如图标、最大深度和可包含的子节点类型。 8. **hotkeys 插件**:使用户可以通过键盘快捷键来执行操作。 **高级应用** 除了基本的树结构操作,js...
如果涉及到更复杂的功能,可能还会有Ajax异步加载子节点,或者使用像D3.js这样的数据可视化库。 树形数据结构在计算机科学中广泛应用于表示层次关系,如文件系统、数据库索引、编译器语法树等。它们通常由节点...
这里的 `parent_node` 表示父节点,`data` 用于指定新节点的数据,而 `position` 表示新节点的位置(如前、后或作为子节点)。 ##### 2. 删除节点 删除节点同样非常简单: ```javascript jQuery("#demo4").jstree...
$('#jstree_demo_div').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [{ "text": "子节点1.1" }, { "text": "子节点1.2" }] }, { "text": "节点2" } ] }, 'checkbox': { 'three_state': ...
在"treedemo"这个示例中,我们可能会看到一个关于如何创建、操作和交互树形结构菜单的具体实例。 树形结构菜单的主要组成部分包括根节点、子节点和分支。根节点是树的起始点,没有父节点,而子节点则由一个或多个父...
{ "text": "父节点", "children": [{ "text": "子节点1" }, { "text": "子节点2" }] } ] } }); }); ``` **五、最佳实践与注意事项** 1. **优化性能**:对于大量数据,可以考虑分页加载或延迟加载策略,以...
总结来说,这个示例展示了如何利用 layui.tree 结合 AJAX 异步请求来实现动态添加树形结构的子节点。关键在于监听用户操作,处理 AJAX 请求,并使用 layui.tree 的 API 来更新前端显示。这种动态交互的实现增强了...
- **节点(Node)**: 在JsTree中,树由一系列节点组成,每个节点都可以包含子节点。 - **容器(Container)**: 一个可以容纳多个节点的元素,通常是`<ul>`或`<div>`。 - **HTML元素**: JsTree通过绑定到HTML元素来...
总结来说,JStree是一个强大的JavaScript库,用于创建和管理树形数据结构。通过灵活的配置和丰富的插件,开发者可以轻松地实现各种复杂的功能,如多选、拖放、搜索等,极大地提升了Web应用的用户体验。在实际项目中...
本示例"js无限级tree_demo简单_易用"提供了这样一个易于理解和使用的解决方案。 1. **无限级树的概念** 无限级树指的是树形结构可以有任意多的层级,每个节点都可以有任意数量的子节点,这种结构在实际应用中尤为...
$.fn.zTree.init($("#treeDemo"), setting, zNodes); }); ``` 以上代码创建了一个基本的树结构,包含了两个父节点和四个子节点。通过调整`setting`对象的属性和`zNodes`数组的结构,你可以定制`zTree`的外观和行为...
下面将详细讨论树的概念、JavaScript中的实现以及如何创建一个可运行的TreeDemo。 1. **树的概念** 树是计算机科学中的一种非线性数据结构,由节点(或称为顶点)和边组成。每个节点可以有零个或多个子节点,而...
`jstree` 是一款基于 JavaScript 的开源库,专门用于创建和管理树形结构的用户界面。它在 Web 开发中广泛应用于构建目录、文件系统、组织图表等场景,提供了丰富的交互功能和自定义选项。在本文中,我们将深入探讨 `...