如何使用 dojox.grid.DataGrid (Dojo 1.8) 显示来自 REST 服务的 JSON 数据？

Question

我有休息服务，它在下面产生 JSON 数据：

{
"root": {
    "branches": [
        {
            "branch_addr": "string",
            "branch_telp": "string",
            "branch_loc": "string",
            "branch_dept_it": {
                "branch_dept_it_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_it_code": "string"
                }
            },
            "branch_dept_finance": {
                "branch_dept_finance_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_finance_code": "string"
                }
            },
            "branch_name": "Mars",
            "branch_id": "MarsID"
        },
        {
            "branch_addr": "string",
            "branch_telp": "string",
            "branch_loc": "string",
            "branch_dept_it": {
                "branch_dept_it_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_it_code": "string"
                }
            },
            "branch_dept_finance": {
                "branch_dept_finance_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_finance_code": "string"
                }
            },
            "branch_name": "VENUS",
            "branch_id": "venusID"
        },
        {
            "branch_addr": "string",
            "branch_telp": "string",
            "branch_loc": "string",
            "branch_dept_it": {
                "branch_dept_it_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_it_code": "string"
                }
            },
            "branch_dept_finance": {
                "branch_dept_finance_employees": {
                    "properties": [
                        {
                            "content": "string",
                            "attr": "emp_id"
                        },
                        {
                            "content": "string",
                            "attr": "emp_name"
                        },
                        {
                            "content": "string",
                            "attr": "emp_pos"
                        }
                    ],
                    "branch_dept_finance_code": "string"
                }
            },
            "branch_name": "Mercury",
            "branch_id": "mercuryID"
        }
    ],
    "regions": {
        "region_data": {
            "properties": [
                {
                    "content": "string",
                    "attr": "reg_id"
                },
                {
                    "content": "string",
                    "attr": "reg_name"
                },
                {
                    "content": "string",
                    "attr": "reg_loc"
                }
            ],
            "region_name": "Galaxy"
        }
    },
    "other": {
        "other_data": {
            "properties": [
                {
                    "content": "string",
                    "attr": "reg_id"
                },
                {
                    "content": "string",
                    "attr": "reg_name"
                },
                {
                    "content": "string",
                    "attr": "reg_loc"
                }
            ],
            "region_name": "Galaxy"
        }
    }
},
"tree": {
    "tree_var1": "string",
    "tree-var2": "string",
    "tree-var3": "string"
}
}

当我检查控制台浏览器时，RESTful 服务已经通过 JsonRestStore 中定义的特定查询正确获取。

如何在 dojox.grid.DataGrid / dijit.tree (Dojo 1.8) 中根据上述格式显示？

Answer 1

它并不完美，但它可以工作（经过测试）：

// your data
var data = {"root":{"branches":[{"branch_addr":"string","branch_telp":"string","branch_loc":"string","branch_dept_it":{"branch_dept_it_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_it_code":"string"}},"branch_dept_finance":{"branch_dept_finance_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_finance_code":"string"}},"branch_name":"Mars","branch_id":"MarsID"},{"branch_addr":"string","branch_telp":"string","branch_loc":"string","branch_dept_it":{"branch_dept_it_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_it_code":"string"}},"branch_dept_finance":{"branch_dept_finance_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_finance_code":"string"}},"branch_name":"VENUS","branch_id":"venusID"},{"branch_addr":"string","branch_telp":"string","branch_loc":"string","branch_dept_it":{"branch_dept_it_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_it_code":"string"}},"branch_dept_finance":{"branch_dept_finance_employees":{"properties":[{"content":"string","attr":"emp_id"},{"content":"string","attr":"emp_name"},{"content":"string","attr":"emp_pos"}],"branch_dept_finance_code":"string"}},"branch_name":"Mercury","branch_id":"mercuryID"}],"regions":{"region_data":{"properties":[{"content":"string","attr":"reg_id"},{"content":"string","attr":"reg_name"},{"content":"string","attr":"reg_loc"}],"region_name":"Galaxy"}},"other":{"other_data":{"properties":[{"content":"string","attr":"reg_id"},{"content":"string","attr":"reg_name"},{"content":"string","attr":"reg_loc"}],"region_name":"Galaxy"}}},"tree":{"tree_var1":"string","tree-var2":"string","tree-var3":"string"}};

// generate unique IDs
function generateUuid() {
	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
		var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
		return v.toString(16);
	});
}

// generically transforms JS object to array with hierarcy
function ObjectToTreeArr(obj, rootName) {
	var arr = [];
	
	function processObject(obj, parentId) {
		for (fieldName in obj) {
			var treeElement = {
				id: generateUuid(),
			};
			
			if  (parentId) {
				treeElement.parent = parentId;
			} else {
				
			}
		
			var fieldVal = obj[fieldName];
		
			if (typeof fieldVal  === 'object') {
				treeElement.name = fieldName;
				processObject(fieldVal, treeElement.id);
				
				//if (fieldVal instanceof Array) {// Array
				//	
				//} else {// Object
				//
				//}
			} else {
				treeElement.name = fieldName+": "+fieldVal;
			}
			arr.push(treeElement);
		}

	}
	
	var namedObj = {};
	namedObj[rootName] = obj;
	
	processObject(namedObj, null);
	
	return arr;
}

// transform data object into array form
var newData = ObjectToTreeArr(data, "dummyRoot");

require([
    "dojo/_base/window", "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel", "dijit/Tree",
    "dojo/domReady!"
], function(win, Memory, ObjectStoreModel, Tree){

    // Create  store
    var myStore = new Memory({
        data: newData,
        getChildren: function(object){
            return this.query({parent: object.id});
        }
    });

    // Create the model
    var myModel = new ObjectStoreModel({
        store: myStore,
        query: {name: "dummyRoot"}
    });

    // Create the Tree.
    var tree = new Tree({
		showRoot: false,
        model: myModel
    });
    tree.placeAt(win.body());
    tree.startup();
});

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"
            data-dojo-config="async: true"></script>
			
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">

</body>
</html>