jQuery EasyUI 拡張 -編集可能なツリー（Editable Tree）

jQuery EasyUI 拡張

使用法

ツリー（Tree）の作成

    <ul id="tt"></ul>
    $('#tt').etree({
        url: 'tree_data.json',
        createUrl: ...,
        updateUrl: ...,
        destroyUrl: ...,
        dndUrl: ...
    });

url、createUrl、updateUrl、destroyUrl、dndUrl の各プロパティを設定して、クライアントとサーバーサイドのデータを自動的に同期させます。

• url: ツリーのデータを返します。
• createUrl: 新しいノードを作成するとき、ツリーは 'parentId' という名前のパラメータをサーバーに渡します。このパラメータは親ノードの id を示します。
  サーバーは追加されたノードデータを返す必要があります。以下のコードは、ノードデータを追加する例を示しています：

  {"id":1,"text":"new node"}
  

• updateUrl: ノードを更新するとき、ツリーは 'id' と 'text' のパラメータをサーバーに渡します。
  サーバーは更新操作を実行し、更新されたノードデータを返します。
• destroyUrl: ノードを破棄するとき、ツリーは 'id' パラメータをサーバーに渡します。
  サーバーは {"success":true} データを返します。
• dndUrl: ノードをドラッグ＆ドロップするとき、ツリーは以下のパラメータをサーバーに渡します：
  id - ドラッグされたノードの id。
  targetId - ドロップ先のノード。
  point - ドロップ操作を指定します。可能な値：'append'、'top'、または 'bottom'。
  サーバーはいくつかのアクションを実行し、{"success":true} データを返します。

メソッド

このメソッドはツリー（tree）から拡張されています。以下は編集可能なツリー（etree）用に追加されたメソッドです。

jQuery EasyUI サンプルをダウンロード

jquery-easyui-etree.zip

jQuery EasyUI 拡張