个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我是一个完全的javascript新手，我如何将前端的jsTree与node.js中的后端服务集成。后端是使用 Treemodel 库 ( http://jnuno.com/tree-model-js/ ) 编写的。具有附加功能，例如
function getChildren(x)
{
var result=[];
if(x.hasChildren())
{
for(i=0;i<x.children.length;i++)
{
result.push(x.children[i].model);
}
}
return result;
}
和
function expandAll(node) {
console.log(getChildren(node));
for (var t = 0; t < node.children.length; t++) {
if (node.children[t].hasChildren()) {
expandAll(node.children[t]);
}
}
}
我的数据最初是纯文本形式:
var items = [
{'id': 2, 'parentid': 1, 'title': "Delhi"},
{'id': 3, 'parentid': 2, 'title': "CP"},
{'id': 4, 'parentid': 2, 'title': "Saket"},
{'id': 1, 'parentid': 0, 'title': "India"},
{'id': 5, 'parentid': 1, 'title': "Mumbai"},
{'id': 6, 'parentid': 5, 'title': "Andheri"},
{'id': 7, 'parentid': 5, 'title': "Worli"},
{'id': 8, 'parentid': 7, 'title': "Wankhede"}
];
已使用以下代码和 underscore.js 将其转换为 JSON-
unflatten = function( array, parent, tree ){
tree = typeof tree !== 'undefined' ? tree : [];
parent = typeof parent !== 'undefined' ? parent : { id: 0 };
var children = _.filter( array, function(child){ return child.parentid == parent.id; });
if( !_.isEmpty( children ) ){
if( parent.id == 0 ){
tree = children;
}else{
parent['children'] = children
}
_.each( children, function( child ){ unflatten( array, child ) } );
}
return tree;
}
items = unflatten(items);
我将使用 AJAX 延迟加载在前端实现树结构，非常类似于:http://thejackalofjavascript.com/file-browser-with-jstree-angularjs-and-expressjs/
我只需要帮助了解如何使用 TreeModel 实现 jsTree，以及如何通过后端实现的 getChildren 方法实现延迟加载。
谢谢
最佳答案
这是一个使用 restify 的简单示例服务器。
1) 使用以下 package.json 文件创建项目文件夹:
{
"name": "remote-tree",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"flat-to-nested": "1.0.2",
"restify": "4.3.0",
"tree-model": "1.0.6"
}
}
2) 运行npm install。
3) 创建一个 Node 脚本server.js，内容如下
let restify = require('restify'),
TreeModel = require('tree-model'),
FlatToNested = require('flat-to-nested'),
flatToNested = new FlatToNested({parent: 'parentid'}),
tree = new TreeModel()
let items = [
{id: 0},
{id: 2, parentid: 1, title: 'Delhi'},
{id: 3, parentid: 2, title: 'CP'},
{id: 4, parentid: 2, title: 'Saket'},
{id: 1, parentid: 0, title: 'India'},
{id: 5, parentid: 1, title: 'Mumbai'},
{id: 6, parentid: 5, title: 'Andheri'},
{id: 7, parentid: 5, title: 'Worli'},
{id: 8, parentid: 7, title: 'Wankhede'}]
let root = tree.parse(flatToNested.convert(items))
let server = restify.createServer()
server.get('/public', restify.serveStatic({
directory: './public',
default: 'index.html',
file: 'index.html'
}))
server.get('/children/:id', (req, res, next) => {
let id = req.params.id
let node = root.first(node => node.model.id == id)
if (node && node.hasChildren()) {
res.send(200, node.children.map(child => ({
id: child.model.id,
text: child.model.title,
children: child.hasChildren()
})))
} else {
res.send(404)
}
return next()
})
server.listen(8080)
4) 创建一个 public 文件夹来放置 index.html 文件
5) 在 public 文件夹中创建 index.html 文件，其中包含以下内容:
<!DOCTYPE html>
<html>
<head>
<title>remote-tree</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<div id="jstree"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(() => $('#jstree').jstree({
core: {
data: (node, cb) => {
let id = node.id === '#' ? 0 : node.id;
fetch(`/children/${id}`).then(response => response.json()).then(children => cb(children))
}
}
}))
</script>
</body>
</html>
6) 运行 npm start 并浏览到 localhost:8080/public
关于jquery - 将 jsTree 与 Treemodel 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41463575/
24
4
0
我正在为机器人编写一个java插件，其中涉及使用动态JTree。当使用插件的程序关闭然后重新打开时，任何变量和对象都需要存储在 robotsDataModel 中。但是，我无法在程序数据模型中存储 J
我正在尝试实现自己的 TreeModel 以便在 TreeView 中使用。 我已经对 Gtk::TreeModel 进行了子类化，目前正在尝试用我自己的实现覆盖虚拟方法。 但我对它的基础知识有疑问。
我想建立一个TreeModel来自一些List包含源数据的 s。现在，有一个名为 DynamicUtilTreeNode 的实用程序类可以用来从数组、 vector 和哈希表构建树，但是……不能从列表
这里我有一个ManagePageSource，它使用zk的mvvm模式为TreeView提供模型。 ManagePageSource 有一个内部类 Node 来保存 treeNode 数据。 Node
我有一个自定义的 GenericTreeModel，它工作得很好。现在我希望用户能够使用拖放重新排列节点，所以我将一个节点移动到数据模型中的新父节点。然而，TreeModel 希望使用 row_has
我想要 2 个 TreeModel:第二个 TreeModel 的根是第一个 TreeModel 的节点(因此，第二个 TreeModel 是第一个 TreeModel 的子树)。 我认为我可以通过克
当我第一次看到 javax.swing.tree.TreeModel 时，我认为编写所有方法的工作量相当大。然后我找到了 DefaultTreeModel 并认为它可以很容易地通过适配器模式用于文件树
目前，我正在开发一个多线程应用程序。我使用TreeView来显示每个线程的状态，每个线程一行。 主要有两类: 包含TreeView的主要GUI类 类，用于处理线程 将Gtk::TreeModel::i
作为法国人，我的英语不好，抱歉。 我将使用 python 和 pygtk 运行的应用程序升级为适用于 Gtk3 的 python 和 pyobject。很难找到关于 pyGobject 的完整文档，我
我使用自定义模型来填充TreeView并尝试使用 for ix in self.dataView.selectedIndexes(): text = ix.da
我有一系列线程定期检索 RSS 提要，并希望使用 PropertyChangeSupport 刷新自定义 JTree。但是，它使用实现 TreeModel 的自定义类，我不确定如何触发自动更改。这是可
我正在开发一个世界模拟，其中世界表示为: public class World { Turtle turtle; // .. basic constructors, getters,
我真的必须自己实现深度克隆吗？或者是否有任何库方法可以获取 JTree 或其 TreeModel 的深度克隆？ 最佳答案 正如@SteveKuo所说，为什么需要克隆TreeModel？ TreeMod
我有以下模型: public class CategoryModel { public String id; public String name; public String
我有一个对象层次结构，我想使用 JTree 和 TreeModel 显示它。层次结构的每个级别都是一个不同的类。 我见过的所有 JTree 和 TreeModel 示例在树的整个层次结构中都有一个公共
场景:客户端登录，创建自己的 TableModel 和 TreeModel，并能够在稍后访问它。 TableModel 和 TreeModel，由 Java 类对象和字符串组成。 我如何才能将其存储在
例子: http://jsfiddle.net/yeehawjared/bawv0790/ 我正在构建一个可以打开网页的应用程序，加载大型数据树结构的 JSON。 TreeModel.js 解析这个很
我有一个使用 DefaultTreeModel 的 Jtree，每个单独的节点都包含一个包含各种字符串字段的 UserObject。 我想通过递归遍历找到并选择一个节点，直到它找到具有匹配其中一个字段
我有一个自定义的 JTree 和一个自定义的 JModel；当我给它一个新模型时，我希望 JTree 能够“自动扩展”。目前，它只是将所有节点折叠到根。 这是一个例子: private class C
我需要克隆一棵我用 TreeModel.js 制作的树.我真正需要做的是复制它，对其进行更改并检查节点数量是否减少。如果是这样，恢复到原来的树。这是我到目前为止所做的复制它的一个小例子，这是不正确的:
我是一名优秀的程序员,十分优秀！