We can create jsTree through the JSON data. However, jstree requires a specific format of the JSON to create an instance or use the data to populate the tree. However none of these fields are required, we can pass only the required fields and leave the other, apart from that we can pass other properties in the object as per your requirement, jstree will not have any impact on them, we can access them as we want. Here we will explain the JSON object properties and their use.
id: the ID property defined in the JSON object is used to specify the node id of the tree instance. We can pass the string in that property. If this property is not provided it will be automatically generated.
Text: As the name specified, the text property is used to give text in the node, whatever we will pass on that property, will be shown to us as the node. We can pass the string in that too.
Icon: If we need to change the icon of the nodes, we can use this property. We can pass the image path and it will be rendered before the name of the node.
State: State property is used to manage the state of the node if it is opened, disabled or selected. Unlike other here we do not pass the string directly, instead will pass an object having three properties opened, disabled and selected, we can’t omit any of these, for each property we set a boolean value.
li_att and a_attr: Both of these properties are used to define the attributes of <li> and <a> tags respectively. We can pass the objects defining the attributes to use in the tags.
These are the most basic properties to be used to draw tree node.But how we create a parent-child relationship? in fact , that is the core part of the tree, how we maintain the parent-child relationship? let’s move towards this most important point.
To maintain the parent-child relationship or to create a tree, we have two properties, one is the parent and the other one is children. we can use any of them.
Children: This property is used to define the child of the node, that means all the nodes defined in the children object will be rendered as the child and the node itself will be the parent node. child property includes the array of objects or the strings. We can pass an array in the child, that array could be the string or the objects having the same properties as defined. In case of AJAX, we can set a property to true so that the node will be considered as the parent node and an AJAX request is sent to get the child of the node, when we click on that.
Parent: We can also define the parent instead of the children. If we use the parent property the node will be rendered as the child of the node mentioned in the parent. Please take a note that if we use the parent property, in that case, the id and parent both are the required fields.
Now that we have gone through all the properties of the JSON object that can be used to create a tree. Here is the example how the object will look like:
{
Id: "string" // required if parent is used instead of children
text : "string"
icon : "string"
state : {
opened : boolean
disabled : boolean
selected : boolean
},
li_attr : {}
a_attr : {}
children : [] // any one of the children or parent
parent : "string"
}
Id: "string" // required if parent is used instead of children
text : "string"
icon : "string"
state : {
opened : boolean
disabled : boolean
selected : boolean
},
li_attr : {}
a_attr : {}
children : [] // any one of the children or parent
parent : "string"
}
Apart from that , we can also make use of the data configuration option to fetch the JSON from server using AJAX.
Thanks,
No comments:
Post a Comment