从ExtJS TreePanel获取JSON数据 [英] Get JSON Data from ExtJS TreePanel

问题描述

说我有一个Ext.tree.TreePanel对象，它有一个从外部文件加载的数据，例如：

  var tree = new Ext.tree.TreePanel（{
 ... 
 loader：new Ext.tree.TreeLoader（{
 dataUrl：'./ some_file.json'
 }），
 ... 
}）; 
  

此文件是定义树的对象数组。

假设用户向树中添加新节点并移动一些节点。有没有从树中获取JSON数据，以便下次用户加载树可以使用？

编辑（代码解决方案） ：

这是一个基于胡安回应的想法的解决方案。我会把它放在一起，以防将来发现这个线程，并且正在寻找一些代码。

  function getNodeList（bfsQueue ）{
 var node = bfsQueue.pop（）; 
 var nodeQueue = []; （var ii = 0; ii< node.childNodes.length; ii ++）{
 bfsQueue.push（node.childNodes [ii]）; 
 
 
 nodeQueue.push（node.childNodes [ii]）; 
} 
 if（bfsQueue.length === 0）{
 return nodeQueue; 
} else {
 return nodeQueue.concat（getNodeList（bfsQueue））; 
} 
} 
 
 var startQueue = []; 
 var nodeList = []; 
 
 startQueue.push（tree.getRootNode（））; 
 nodeList.push（tree.getRootNode（））; 
 nodeList = nodeList.concat（getNodeList（startQueue））; 
 console.dir（nodeList）; （var nn = nodeList.length-1; nn> = 0; nn--）{
 
 var params = []; 
 
 
 for（var pp in nodeList [nn] .attributes）{
 if（pp ===children|| pp ===loader）{continue;} 
 params。 push（''+ pp +'：'+ JSON.stringify（nodeList [nn] .attributes [pp]）+''）; 
} 
 
 if（nodeList [nn] .childNodes.length> 0）{
 var childList = []; 
 
 for（var ii = 0; ii< nodeList [nn] .childNodes.length; ii ++）{
 childList.push（nodeList [nn] .childNodes [ii] .json） ; 
} 
 
 params.push（'children：['+ childList.join（'，'）+']'）; 
} 
 
 nodeList [nn] .json ={+ params.join（，）+}; 
} 
 
 console.log（nodeList [0] .json）; //根节点
  

解决方案

首先，你真的想要的是属性属性，这是用来创建一个节点的JSON。最相关的属性被更新，但是childNodes不是。所以你必须写一些东西把它放回来。

通过遍历使用childNodes的树，你可以得到所有的节点。你需要重新组合成一个单独的json。

  Ext.data.Node.prototype.getJson = function（） {
 //应该深层复制，所以我们不影响树
 var json = this.attributes; 
 
 json.children = []; 
 for（var i = 0; i< node.childNodes.length; i ++）{
 json.children.push（node.childNodes [i] .getJson（））
} 
 return json; 
} 
 
 tree.getRootNode（）。getJson（）; 
  

这个例子并不完美，但应该给你足够的开始。

更新

在Ext-JS 4.0节点现在装饰成记录。因此，所有额外的属性应通过记录/模型界面记录，并使用 get 和设置方法进行检索

Lets say I have a Ext.tree.TreePanel object, and it has data loaded from an external file, ex:

var tree = new Ext.tree.TreePanel({
    ...
    loader: new Ext.tree.TreeLoader({
        dataUrl:'./some_file.json'
    }),
    ...
});

This file is an array of objects that define the tree.

Lets say the user adds new nodes to the tree and moves some nodes around. Is there away to get the JSON data from the tree so that it could be used for the next time the user loads the tree?

EDIT (code solution):

Here is a solution based on ideas from Juan's response. I'm putting this up in case anyone finds this thread in the future and is looking for some code.

function getNodeList(bfsQueue) {
    var node = bfsQueue.pop();
    var nodeQueue = [];

    for (var ii = 0; ii < node.childNodes.length; ii++) {
        bfsQueue.push( node.childNodes[ii] );
        nodeQueue.push( node.childNodes[ii] );
    }
    if (bfsQueue.length === 0) {
        return nodeQueue;
    } else {
        return nodeQueue.concat( getNodeList(bfsQueue) );
    }
}

var startQueue = [];
var nodeList = [];

startQueue.push( tree.getRootNode() );
nodeList.push( tree.getRootNode() );
nodeList = nodeList.concat(getNodeList( startQueue ));
console.dir(nodeList);

for ( var nn = nodeList.length-1; nn >= 0; nn-- ) {

    var params = [];
    for (var pp in nodeList[nn].attributes) {
        if (pp === "children" || pp === "loader") {continue;}
        params.push('"' + pp + '":' + JSON.stringify(nodeList[nn].attributes[pp]) + '');
    }

    if ( nodeList[nn].childNodes.length > 0) {
        var childList = [];

        for (var ii = 0; ii < nodeList[nn].childNodes.length; ii++) {
            childList.push( nodeList[nn].childNodes[ii].json );
        }

        params.push('"children": [' + childList.join(',') + ']');
    }

    nodeList[nn].json = "{" + params.join(",") + "}";
}

console.log(nodeList[0].json); // root node

解决方案

First of all, what you really want is the attributes property, which is the JSON used to create a node. Most relevant properties are updated, but childNodes is not. So you have to write something to put that back in.

By traversing the tree using childNodes, you can get all the nodes. You'll need to reassemble them back into a single json.

Ext.data.Node.prototype.getJson = function () {
      // Should deep copy so we don't affect the tree
      var json = this.attributes;

      json.children = [];
      for (var i=0; i < node.childNodes.length; i++) {
          json.children.push( node.childNodes[i].getJson() )
      }
      return json;
}

tree.getRootNode().getJson();

This example is not perfect, but should give you enough to get started.

Update

In Ext-JS 4.0 Nodes are now decorated into Records. Therefore, all the extra properties should be documented through the records/model interface and retrieved set using the get and set methods

这篇关于从ExtJS TreePanel获取JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！