Dojo’s Tree is very flexible, but there are few examples on the official website, and they are scattered. We will continue to improve this example in the future.
In general, to use tree, you have to touch three categories: “dojo/store/JsonRest”, “dijit/tree/ObjectStoreModel”, and “dijit/Tree”.
Obtain data from the server asynchronously through JsonRest.
ObjectStoreModel can set the method of judging whether the current data has sub-nodes, which attribute in the data is used as a label to display in the tree, and what icon display is used for the data.
Tree specifically displays the tree.
var usGov = new JsonRest({ target: "/rest/getTreeData",//Get the tree data URL getChildren: function(object) {//How to get the lower-level data, here is different from the official example, the official example requires the returned data The current node data must be returned in the information at the same time. In most cases, this is redundant. Using the following program, the server only needs to return an array of lower-level node data. if (typeof object.children == "undefined") {//This program, after judging that when the lower-level data of the data of this node is already available, it does not need to be obtained from the server. return this.query({PID:object.ID}).then(function (fullObject) {return fullObject; });} else {return object.children;}} }); // create model to interface Tree to store var model = new ObjectStoreModel({ store: usGov,// query: {PID: "root"},//Normally, this does not need to be set. If it is not set, the parameter will not be passed when obtaining the root node data from the server. mayHaveChildren: function(object) {//Judge whether the data has a son, when When the node is expanded, will the getChildren method in the above store be called? This method judges return !object.leaf;//This is not the same as the official example, it is not to reuse the children attribute, and the program is more clear. }, getLabel: function(object) {//An attribute in the data object is used to display in the tree node. return object.NAME;} });
var tree = new Tree({ model: model, persist: false, showRoot: true, region:'center',//If the parent container is BorderContainer, specify the tree to be displayed in the middle of the parent container style: "overflow:hide;padding:0px;"} );
This tree node is obtained from the server for the first time Data example of the root node:
[{NAME: "US Government",
id: "a1",ID:"1 ",
leaf:false,
children:[{
NAME: "Congress2",
id: "a2",
ID:"2",
leaf:false
},{
NAME: "Congress3",
id: "a3",
ID:"3",
leaf:true< /pre>}]}]Example of data obtained from the server when the Congress2 node in the tree is expanded:[{NAME: "Congress4",id: "a4",ID:" 4",leaf:false,children:[{NAME: "Congress6",id: "a6",ID:"6",leaf:true},{NAME : "Congress7",id: "a7",ID:"7",leaf:true}]},{NAME: "Congress5",id: "a5",ID:"5 ",leaf:true}]Special attention must be paid to the id attribute in the data, and it must not be repeated, otherwise it may not trigger the acquisition of data from the background when the node is expanded Actions.