如何从TreePanel生成自定义JSON [英] How to Generate a Custom JSON from TreePanel

问题描述

我正在尝试从可编辑的树面板生成JSON.我能够生成JSON，但希望JSON仅具有某些字段.

I am trying to generate the JSON from an editable treepanel. I am able to generate the JSON , but would like the JSON to have only certain fields .

这是我通过遍历生成JSON的方式.

Here's how I generate the JSON by traversal.

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) );
        }
    }

这是我在提交处理程序中调用函数的地方.

And this is where I call the function in my submit handler.

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].data) {
                                    if (pp === "children" || pp === "loader") {continue;}
                                    params.push('"' + pp + '":' + JSON.stringify(nodeList[nn].data[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(",") + "}";
                            }
                            alert("My Root :"+nodeList[0].json);

生成的JSON是这个.

The JSON generated is this.

{
"text": "Src",
"id": "src",
"expandable": true,
"expanded": true,
"allowDrag": false,
"parentId": null,
"root": true,
"leaf": "",
"depth": 0,
"index": 0,
"checked": null,
"cls": null,
"iconCls": null,
"isLast": true,
"isFirst": true,
"allowDrop": true,
"loaded": true,
"loading": false,
"href": null,
"hrefTarget": null,
"qtip": null,
"qtitle": null,
"children": [
    {
        "text": "United Kingdom",
        "id": "United Kingdom",
        "parentId": "src",
        "root": "",
        "leaf": "",
        "depth": 1,
        "index": 0,
        "expanded": false,
        "expandable": true,
        "checked": null,
        "cls": "",
        "iconCls": "",
        "isLast": true,
        "isFirst": true,
        "allowDrop": true,
        "allowDrag": true,
        "loaded": true,
        "loading": false,
        "href": "",
        "hrefTarget": "",
        "qtip": "",
        "qtitle": "",
        "children": [
            {
                "text": "London",
                "id": "London",
                "parentId": "United Kingdom",
                "root": "",
                "leaf": "",
                "depth": 2,
                "index": 0,
                "expanded": false,
                "expandable": true,
                "checked": null,
                "cls": "",
                "iconCls": "",
                "isLast": true,
                "isFirst": true,
                "allowDrop": true,
                "allowDrag": true,
                "loaded": false,
                "loading": false,
                "href": "",
                "hrefTarget": "",
                "qtip": "",
                "qtitle": ""
            }
        ]
    }
]

}

我需要采用这种格式.只是少数几个字段而不是全部.

And I need it to be in this format. Just a few fields not all .

{
"text": "Src",
"id": "src",
"parentId": null,
"root": true,
"leaf": "",
"depth": 0,
"children": [
    {
        "text": "United Kingdom",
        "id": "United Kingdom",
        "parentId": "src",
        "root": "",
        "leaf": "",
        "depth": 1,
        "children": [
            {
                "text": "London",
                "id": "London",
                "parentId": "United Kingdom",
                "root": "",
                "leaf": "",
                "depth": 2
            }
        ]
    }
]

}

请帮助.提前致谢.

推荐答案

只需在结果中选择所需的字段即可.

Simply select the fields you want in the result.

示例:

function getNodeData(node, fields) {
    var data = {};

    // loop through desired fields
    Ext.each(fields, function(fieldName) {
        data[fieldName] = node.get(fieldName);
    });

    if (node.hasChildNodes()) {
        var children = data.children = [];
        node.eachChild(function(child) {
            children.push(getNodeData(child, fields));
        });
    }

    return data;
}

用法:

var fields = ['text', 'id', 'parentId', 'root', 'leaf', 'depth'],
    nodeList = getNodeData(tree.getRootNode(), fields);

这篇关于如何从TreePanel生成自定义JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！