将 jsTree 与 Treemodel 集成

Question

我是一个完全的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 方法实现延迟加载。

谢谢

Answer 1

这是一个使用 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) 创建节点脚本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

将 jsTree 与 Treemodel 集成

Integrating jsTree with Treemodel

jquery

treemodel

node.js

jstree

angularjs