JavaScript フレームワーク (xmlplus) コンポーネントの紹介 (9 つ) ツリー (ツリー)

xmlplus は、フロントエンドおよびバックエンド プロジェクトを迅速に開発するための JavaScript フレームワークです。この記事では主に xmlplus コンポーネント設計シリーズのツリーを紹介します。興味のある方は参考にしてください。ツリー コンポーネントは階層構造を持ち、さまざまなシーンで広く使用されています。この章では、単純なツリー コンポーネントを実装します。その機能は制限されていますが、必要なツリー コンポーネントを実装するために拡張できます。

データソース

ツリーコンポーネントのデータソースは、JSON形式のデータオブジェクトにすることも、XML構造のデータや階層構造を持つその他のデータにすることもできます。この章では、次の JSON 形式のデータ オブジェクトを使用します。

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

上記のデータ ソースでは、name 値がツリー ノードの名前として表示され、子を含む配列はノードの子を表します。

再帰構造の設計

は、HTML のリスト要素 ul と li で構成されており、これらをツリー コンポーネントを構築するための基本要素として使用することもできます。ツリー コンポーネントの最外層は ul 要素である必要があるため、次のようにツリー コンポーネントを一時的に定義できます:

Tree: {
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

ここでの未定義コンポーネントの項目は、再帰的に定義する必要があるサブ項目コンポーネントであり、再帰的になります。提供されたデータに基づいて子孫オブジェクトを生成します。考えられるデザインは次のとおりです:

Item: {
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;/>
   </li>`,
 map: { defer: "entries" }
}

上記の neme オブジェクトは name 属性を表示するために使用されることに注意してください。展開オブジェクトは、子オブジェクトのエントリを展開したり閉じたりするために使用されます。子オブジェクトのエントリは、遅延インスタンス化を必要とするように設定されており、ユーザーが展開オブジェクトをクリックして子を展開したときにのみインスタンス化されます。

データのロードとレンダリング

前のセクションで説明したように、子オブジェクトのエントリが遅延インスタンス化されるように設定しました。したがって、サブアイテム項目に提供されるデータ設定インターフェイスは、エントリをすぐにインスタンス化する必要はありません。以下では、まずデータ インターフェイス関数を示します。

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data;
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

このインターフェース関数 val は、現在のノードに関連するコンテンツを設定するだけです。次に、展開オブジェクトのクリック イベントをリッスンし、コンポーネント オブジェクト エントリのインスタンス化を適時に完了します。

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data, open;
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 0 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

上記のコードには、現在のノードが関連するリスナーで使用するために展開された状態にあるかどうかを記録するオープン パラメーターが含まれています。

ノードを動的に追加する

次に、ツリー ノードを動的に追加する機能をサポートするように、上記のコンポーネントに小さな拡張を加えます。まず、エントリ オブジェクトの子にトリガー ボタンを追加し、add という名前を付けます。

Item: {
 xml: "<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>",
 map: { defer: "entries" }
}

次に、追加オブジェクトのクリック イベントをリッスンし、リスナーでのオブジェクトの追加を完了する必要があります。

Item: {
 // css, xml, map 项同前
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id='add']", function () {
   var stuff = {name: 'new stuff'};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  // 其余代码同前
 }
}

ここで、追加オブジェクトのリスナーを使用して直接リッスンすることはできないことに注意してください: sys.add.on("click",...) ただし、プロキシ メソッドを使用する必要があります。そうでない場合は、エラーが報告されます。 。その親は遅延インスタンス化されたコンポーネントであるため、追加オブジェクトは、entries オブジェクトがインスタンス化されるまで表示されません。

完全なツリーコンポーネント

上記の内容に基づいて、ツリーコンポーネントの完全版が提供されます:

Tree: {
 css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
   #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>`,
 map: { defer: "entries" },
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id=&#39;add&#39;]", function () {
   var stuff = {name: &#39;new stuff&#39;};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 1 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

実際のアプリケーションのツリーコンポーネントにはここよりも多くの機能があり、さらに改善することができます上記のコードに基づいて、いくつかの ICON アイコンを追加したり、サブ項目をドラッグ可能にしたりします。ただし、改善のプロセスではコードの複雑化をできるだけ避けることが非常に重要であり、一部のコードを適切に削除してコンポーネントにカプセル化する必要があります。

この一連の記事は、xmlplus フレームワークに基づいています。 xmlplus についてあまり詳しくない場合は、

www.xmlplus.cn にアクセスしてください。詳細な入門ドキュメントはここから入手できます。

【関連おすすめ】

1.

無料のjsオンラインビデオチュートリアル

3.

php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がJavaScript フレームワーク (xmlplus) コンポーネントの紹介 (9 つ) ツリー (ツリー)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。