jQuery EasyUI ツリーでの state 属性の使用方法を説明する例 (cation_jquery を使用)

EasyUI 1.4.4 ツリー コントロールでは、リーフ ノードの場合、状態をクローズに設定しないでください。そうしないと、ノードがツリー全体をロードして無限ループが形成されます

例:

json を次のように変換します:

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

ステータスがオープンまたは空に変更され、表示は正常です

以下では、easyui ツリーのカスタム属性の使用方法を紹介します

easyui ツリー コンポーネントを知っている人なら、おそらくツリー ノードに独自の個別の属性 (id、text、iconCls、checked、state、attribute、target) があることを知っているでしょう。ただし、これらの属性を HTML を通じてインスタンスに割り当てたい場合、それを完全に行うことはできません。属性属性はjson形式で割り当てる必要があります。これは私たちの開発にもいくつかの不都合をもたらしました。しかし、属性 data-options を使用すると、すべての問題が解決されます。

特別な属性を持つ nide ノードの定義は、次の方法で実現できます

<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>

js メソッドを通じてツリーのノード オブジェクトを取得すると、node.attributes.url から対応する値を直接取得できます。