この投稿は2019年7月11日11時20分にszxiaxiaojunによって最後に編集されました。
日々のウェブプロジェクト開発では、データベースから取得され木の形で表示される木構造データの表示にしばしば遭遇します。 便宜のために、将来的に再利用可能なJavaScript用のクロスブラウザツリーコントロールを書くことができます。 このセクションでは、自作のJSツリープラグインを共有しており、必要な友人が直接ダウンロードして使うことができます。 ツリープラグインの実装が必要です (1) データを自動的に下位関係に整理し、上司と部下の関係を手動でデータを追加したり、フロントエンドでデータベースからデータを取得したりする必要がなくなる (2) カスタムロードディレクトリツリーのサポート XML および JSON 形式のデータ読み込みをサポートし (3) 木ノードの選択機能(単一選択、多重選択[カスケード選択])を実現します。 (4) ビッグデータの一時的な読み込みのサポート 。。。。。。 私が書いたTreeプラグインの共有から始めましょう:このプラグインはJqueryをベースにしており、参照が必要です
まず、プラグイン内の各木ノードのパラメータJSONオブジェクトは以下の通りです nodeItem: 関数() {
返す {
nodecode: "", // nodecode
nodetext: "", // ノードテキスト [ノード表示テキスト]
ノードタイトル: "", // ノードタイトル [マウス移動用のノードテキスト 廃止表示]
supnodecode: "", // 上位ノードコード [このノードが属する親ノードコードを定義し、このコードを通じて従属関係を形成すること]
nodeURL: ""、// ノードURLは現在のノードによってカスタマイズされたリンクURLアドレスを表します
iconexpand: "", // ノード 拡張アイコン [ディレクトリツリーノードにカスタマイズされた展開状態で表示されるアイコン。空の場合はデフォルトのアイコンが使用されます]
iconcollapse: "" // ノード縮小アイコン [ディレクトリツリーノードにカスタム縮小状態で表示されるアイコン。空の場合はデフォルトのアイコンが使用されます]
}
} 第二に:ディレクトリツリーを読み込む3つの方法 1. loadJson(Json) JSON オブジェクト ディレクトリツリー ノード array (一度に完了) JSON形式は、nodeItemオブジェクトの各アイテムに対する引数の配列です
[ { nodecode: "", nodetext: "", nodetitle: "", supnodecode: "", nodeurl: "",iconexpand: "" , iconcollapse: "" },
{},...
]
2. loadXml(xml) XML文字列フォーマットノードデータ(一度きり完了)
注意:XML文字列形式を使用 node tagName:nodecode nodetext などは変更できません。なぜならプログラムはこの名前を直接使用して取得されるからです
<root>
<item> // 各ノードは複数のデータ値を持っています
<nodecode><![CDATA[ノードエンコーディング値]></nodecode>
<nodetext><![CDATA[ノード名テキスト]]></nodetext>
<nodetitle><![CDATA[ノードマウスの動きが表示プロンプトテキストで</nodetitle>動く]]>
<supnodecode><![CDATA[ノード親エンコーディング]></supnodecode>
<nodeurl><![CDATA[ノード関連リンクアドレス]></nodeurl>
<iconexpand><![CDATA[ノード展開時にアイコンパスを表示する]]></iconexpand>
<iconcollapse><![CDATA[ノード縮小時にアイコンパスを表示する]]></iconcollapse>
</item> ... ...
</root>
3. addNodeItem(nodeItem)メソッドとプラグインオブジェクトのメソッドを通じて、ノードアイテムを一つずつ手動で追加します(完了までに2ステップ)
プラグインオブジェクトmakeTree()を使って手動でこのメソッドを呼び出すことで木を作成できます。
第三に:ディレクトリツリー内の部下と部下の関係を再編成するためのイベント手法 この手法により、フロントエンドが部下と部下の関係で区別する必要がなくなった問題を解決できます。 第四に、上記はTreeの主な読み込みおよび再編成手法の簡単な紹介に過ぎません。 以下に、詳細なコメント付きでJSプラグインの全コードを掲載します プラグイン機能:チェック、単一、展開、折りたたみ、ノード接続の表示/非表示、ノードの挿入、削除、ノードアイコンのカスタマイズ、ノード選択の設定、ディレクトリツリー選択ノードの取得(XML、JSONなど対応) 右クリックメニュー(ポップアップレイヤーを使用する必要があるため、現時点ではサポートされていません。この機能はブロック・削除されています)ノードクリック、ダブルクリック、ノード選択の変更イベントなどをサポートします 最終的な表示効果 添付ファイルダウンロード:
Tree_Demo.rar
(54.71 KB, ダウンロード数: 1)
| 
掲載地 2019/07/11 11:20:12
|
|
|
|
