Extjs:为树加载动态数据

Extjs:为树加载动态数据,extjs,tree,Extjs,Tree,我是Extjs新手,我想将数据动态加载到树中。服务器返回的数据不是json格式的,即数据结构非常混乱。我应该在代码中指定什么URL,以及如何处理数据格式。在查看服务器返回的数据时,无法区分父级和子级。我正试图建立一个基于以下代码的树 Ext.onReady(function() { var Tree = Ext.tree; var tree = new Tree.TreePanel({ useArrows: true, autoScroll:

我是Extjs新手,我想将数据动态加载到树中。服务器返回的数据不是json格式的,即数据结构非常混乱。我应该在代码中指定什么URL,以及如何处理数据格式。在查看服务器返回的数据时,无法区分父级和子级。我正试图建立一个基于以下代码的树

Ext.onReady(function() {

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl:'????????????????????',
        root: {
            nodeType: 'async',
            text: 'ALL',
            draggable: false,
            id: ''
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
}); 

当传递dataUrl配置选项时,您告诉树组件使用默认的TreeLoader,它只接受JSON数组作为服务器的输出。如果您正在从服务器传递其他数据,无论是XML、YAML还是您所说的其他乱七八糟的数据,您必须编写自己的TreeLoader


首先,请查看或上的文档,这可能会让您在理解编写自己的加载程序以接受服务器输出时实际需要做些什么方面有很大的帮助。

在传递dataUrl配置选项时,您告诉树组件使用默认的TreeLoader,它只接受JSON数组作为服务器的输出。如果您正在从服务器传递其他数据,无论是XML、YAML还是您所说的其他乱七八糟的数据,您必须编写自己的TreeLoader


首先,请查看或上的文档,这可能会让您在理解编写自己的加载程序以接受服务器输出时实际需要做什么方面有很大的帮助。

通过将json对象直接添加到树中

Java代码:

        for (Object object : objJSONArray) {
            i++;

            JSONObject jsobject = (JSONObject) object;
            if (i == 1) {

                treedata = jsobject;
                System.out.println("  rootnode is:::" + treedata);
            } else {
                String nodeparent = jsobject.getString("NODE_PARENT");
                String parentId = treedata.get("ID").toString();

                if (nodeparent.equals(parentId)) {
                    treedata.put("children", jsobject);
                    System.out.println("treedata  " + treedata);
                } else {
                    Set jsonKeys = treedata.keySet();
                    Iterator itr = jsonKeys.iterator();
                    while (itr.hasNext()) {
                        String keys = itr.next().toString();
                        Object keyObject = treedata.get(keys);
                        if (keyObject instanceof JSONObject) {
                            JSONObject jso = treedata.getJSONObject(keys);
                            String childParentID = jso.getString("ID");
                            if (childParentID.equals(nodeparent)) {
                                jso.put("children", jsobject);
                                treedata.put(keys, jso);
                            }
                        }
                    }
                }
            }
        }

通过将json对象直接添加到树

Java代码:

        for (Object object : objJSONArray) {
            i++;

            JSONObject jsobject = (JSONObject) object;
            if (i == 1) {

                treedata = jsobject;
                System.out.println("  rootnode is:::" + treedata);
            } else {
                String nodeparent = jsobject.getString("NODE_PARENT");
                String parentId = treedata.get("ID").toString();

                if (nodeparent.equals(parentId)) {
                    treedata.put("children", jsobject);
                    System.out.println("treedata  " + treedata);
                } else {
                    Set jsonKeys = treedata.keySet();
                    Iterator itr = jsonKeys.iterator();
                    while (itr.hasNext()) {
                        String keys = itr.next().toString();
                        Object keyObject = treedata.get(keys);
                        if (keyObject instanceof JSONObject) {
                            JSONObject jso = treedata.getJSONObject(keys);
                            String childParentID = jso.getString("ID");
                            if (childParentID.equals(nodeparent)) {
                                jso.put("children", jsobject);
                                treedata.put(keys, jso);
                            }
                        }
                    }
                }
            }
        }

谢谢你的提示,克里斯。我正在从服务器获取数据作为JS数组。新问题是如何使父节点具有文件夹图标。在代码中,我应该将“cls:folder”放在哪里。对于父节点,您是指根节点吗?这是在您上面发布的根配置选项中完成的。以下是我从数据库“代码”[{id:1文本:“测试id X”,子项:[{id:2文本:“测试id X.1”,叶:真}]},{id:3文本:“测试id Y”,子项:[{id:4 text:'Test id Y.1',leaf:true},{id:5 text:'Test id Y.2',leaf:true},{id:6 text:'Test id Y.3',leaf:true}]现在,我的UI如何显示X是根节点,它应该显示一个文件夹图标,与提示Chris的YThanks相同。我从服务器获取数据作为JS数组。新问题是如何使父节点具有文件夹图标。我将“cls:文件夹”放在何处在我的代码中。对于父节点,你是指根节点吗?这是在你上面发布的根配置选项中完成的。这是我从我的db'code'[{id:1 text:'Test id X',children:[{id:2 text:'Test id X.1',leaf:true}]中获得的数组,{id:3 text:'Test id Y',子项:[{id:4 text:'Test id Y.1',leaf:true},{id:5 text:'Test id Y.2',leaf:true},{id:6 text:'Test id Y.3',leaf:true}]现在,我的UI如何显示X是根节点,它应该显示一个文件夹图标,与Y相同