Интеграция jsTree с Treemodel

Я полный javascript-новичок, как я могу интегрировать jsTree на переднем конце с помощью backend-сервисов в node.js. Бэкэнд написан с использованием библиотеки Treemodel (http://jnuno.com/tree-model-js/). С помощью дополнительных функций, таких какИнтеграция jsTree с Treemodel

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"} 
];

Это было преобразовано в формат JSON, используя следующий код с underscore.js-

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/

мне просто нужна помощь в понимании того, как jsTree будет осуществляться с TreeModel, и как сделать отложенную загрузку случаться с методом getChildren, реализованным в бэкэнд.

Благодаря

источник

2017-01-04 howyoulikemenow

Вот простой пример использования 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) Создайте index.html файл в public папку со следующим содержимым :

<!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

источник

2017-01-04 18:56:02 JNS

Спасибо за удивительный быстрый ответ! Было просто интересно, есть ли какая-либо конкретная причина для использования restify вместо express, потому что я буду использовать экспресс-генератор для получения общей структуры проекта. Кроме того, означает ли это, что мне не нужно использовать метод getChildren/expandAll, который я написал (я только написал это, потому что в Treemodel не было), и jsTree справится с этим? PS: Я люблю treemodel. – howyoulikemenow

@howyoulikemenow Вы также можете использовать экспресс, я не знаю, как восстановить или выразить, это был просто быстрый способ получить ресурс отдыха и служить index.html. Для поддержки функции expandAll потребуется больше кода. – JNS

Я знаю, что это немного не по теме, но есть необходимость в функции expandAll в node.js, не будет jsTree с такими методами, как быть в состоянии справиться с этим? – howyoulikemenow

ответ

Смежные вопросы