Examples explaining how to use the state attribute in jQuery EasyUI tree with caution_jquery

In EasyUI 1.4.4 tree control, if it is a leaf node, do not set the state to closed, otherwise the node will load the entire tree, forming an infinite loop

For example:

json into the following:

[
{
"checked": false,
"iconCls": "",
"id": "dec",
"pid": "",
"state": "closed",
"text": "test",
"type": "ORG"
}
]

The status is changed to open or empty, and the display is normal

The following will introduce to you the use of easyui tree custom attributes

Anyone who knows the easyui tree component probably knows that the tree node has its own separate attributes (id, text, iconCls, checked, state, attribute, target). However, if you want to assign these attributes to instances through HTML, it cannot be completely done. The attribute attribute must be assigned in json format. This also brought some inconvenience to our development. But now with the attribute data-options, all problems are solved.

Defining a nide node with special attributes can be achieved in the following ways

<ul id="tt" class="easyui-tree" data-options="animate:true,dnd:true">
<li>
<span>Folder</span>
<ul>
<li data-options="state:'closed'">
<span>Sub Folder </span>
<ul>
<li data-options="attributes:{'url':'xxxxx'}">
<span><a href="#">File </a></span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li>
<span>File </span>
</li>
</ul>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li data-options="attributes:{'url':'xxxxx'}">
<span>File </span>
</li>
<li id="" data-options="attributes:{'url':'xxxxx'}">File </li>
<li>File </li>
</ul>
</li>
<li>
<span>File</span>
</li>
</ul>

Then when we get the node object of the tree through the js method, we can get the corresponding value directly from node.attributes.url.