ホームページ > 記事 > ウェブフロントエンド > jquery easyuiツリーの子ノードの非同期ロードの詳細な説明
easyui のツリーは、タグから、または URL 属性を指定してデータを読み取ることによって構築できます。非同期ツリーを構築する場合は、データのロード時に id パラメーターが自動的にバックグラウンドに渡されるように、各ノードの id 属性値を指定する必要があります。この記事では主に、子ノードを非同期にロードする jquery easyui ツリーの解析の問題を紹介します。easyui のツリーは、タグから、または URL 属性を指定してデータを読み取ることによって確立できます。興味のある方は詳細をご覧ください。皆さんのお役に立てれば幸いです。
<ul id="tt"></ul>
フロントエンド コードを作成します:
$('#tt').tree({ url:'/demo2/node/getNodes' // The url will be mapped to NodeController class and getNodes method });
テスト用に、ノード データ モデルを確立します:
@Table(name="nodes") public class Node extends ActiveRecordBase{ @Id public Integer id; @Column public Integer parentId; @Column public String name; public boolean hasChildren() throws Exception{ long count = count(Node.class, "parentId=?", new Object[]{id}); return count > 0; } }
バックエンド コントローラー コードを作成します:
public class NodeController extends ApplicationController{ /** * get nodes, if the 'id' parameter equals 0 then load the first level nodes, * otherwise load the children nodes * @param id the parent node id value * @return the tree required node json format * @throws Exception */ public View getNodes(int id) throws Exception{ List<Node> nodes = null; if (id == 0){ // return the first level nodes nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null); } else { // return the children nodes nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id}); } List<Map<String,Object>> items = new ArrayList<Map<String,Object>>(); for(Node node: nodes){ Map<String,Object> item = new HashMap<String,Object>(); item.put("id", node.id); item.put("text", node.name); // the node has children, // set the state to 'closed' so the node can asynchronous load children nodes if (node.hasChildren()){ item.put("state", "closed"); } items.add(item); } return new JsonView(items); } }
公式 Web サイトのサンプル アドレス: http://www.jeasyui.com /tutorial/tree/tree2.php
デモのダウンロード: easyui-tree2_jb51.rar
重要なことは 3 回言います!!!
$('#tt').tree({ method:"POST", url:'/demo2/node/getNodes' // The url will be mapped to NodeController class and getNodes method });
メソッドでは POST を使用する必要があり、GET の場合は、URL の後に変数を使用します。タイムスタンプ処理。
関連おすすめ:
jQueryプラグインzTreeについてツリーノードの削除方法を詳しく実装
jQueryプラグインzTreeで実装される複数選択ツリー効果の説明
右クリックコレクション機能を実装するjquery ztreeのサンプルの詳細説明
以上がjquery easyuiツリーの子ノードの非同期ロードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。