zTree コードを Angular に統合する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

zTree コードを Angular に統合する方法

亚连

Jun 09, 2018 pm 05:20 PM

angular

この記事では主に zTree を統合した Angular のサンプルコードを紹介します。

1 前提条件の準備

1.1 新しい angular4 プロジェクトを作成する

参考ブログ投稿: クリックして

1.2 zTree 公式 Web サイトに移動して zTree をダウンロード

zTree 公式 Web サイト: クリックして

に移動

2 プログラミング手順

zTree オブジェクトの出力からわかるように、zTree オブジェクトは init メソッドを使用して zTree 構造を実装します。init メソッドは 3 つのパラメーターを受け取ります。 ulタグを付けたDOMノードオブジェクト

パラメータ2:基本設定オブジェクト

パラメータ3:タイトル情報配列

2.1index.htmlに関連するjsとcssを導入

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>TestZtree</title>
 <base href="/" rel="external nofollow" >

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" >

 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/demo.css" rel="external nofollow" >
 <script src="./assets/zTree/js/jquery-1.4.4.min.js"></script>
 <script src="./assets/zTree/js/jquery.ztree.core.js"></script>
</head>
<body>
 <app-root></app-root>
</body>
</html>

2.2TSファイルでjqueryオブジェクトを宣言

declare var $ : any;

2.3 TSファイルにコードを書く

import { Component, OnInit } from &#39;@angular/core&#39;;
declare var $ : any;

@Component({
 selector: &#39;app-root&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.scss&#39;]
})
export class AppComponent implements OnInit {

 // setting = {
 //  view: {
 //    showLine: true,
 //    showIcon: true,
 //    fontCss: this.getFont
 //  },
 //  data: {
 //   simpleData: {
 //    enable: true,
 //    idKey: &#39;id&#39;,
 //    pIdKey: &#39;pId&#39;
 //   }
 //  },
 //  callback: {
 //   onClick: this.onCzTreeOnClick
 //  }
 // };

 // zNodes = [
 //  {id: 1, pId: 0, name: &#39;1 一级标题&#39;, open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 //  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;, open: true, font:{&#39;background-color&#39;:&#39;skyblue&#39;, &#39;color&#39;:&#39;white&#39;}},
 //  {id: 111, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;},
 //  {id: 112, pId: 11, name: &#39;1.1.2 三级标题 -> 单击&#39;, click: "alert(&#39;你单击了&#39;)"},
 //  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
 //  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 // ]

 // getFont(treeId, node) {
 //  return node.font ? node.font : {};
 // }


 // onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 //  alert(treeNode.name);
 // }    

 setting = {
  data: {
   simpleData: {
    enable: true
   }
  }
 };
 zNodes = [
  {id: 1, pId: 0, name: &#39;1 一级标题&#39;},
  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;},
  {id: 111, pId: 11, name: &#39;1.1.1 三级标题&#39;},
  {id: 112, pId: 11, name: &#39;1.1.2 三级标题&#39;},
  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 ];

 constructor() { }
 
 ngOnInit() { 
  console.log($);
  console.log($.fn.zTree);
  $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 }
}

2.4 コンポーネントHTMLにコードを書く

<ul id="ztree" class="ztree"><ul></ul>

2.5 エフェクトの表示

3 zTreeの基本機能

3.1 接続線を表示しない

3.1 .1 公式ドキュメント

タイトル間の接続線を表示しない

3.1.2 プログラミング手順

基本設定オブジェクトの showLine 属性の値を false に指定する

 setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false
  }
 };

3.2 ノードを表示しないicon

3.2.1 公式ドキュメント

ノードの前面を削除する icon

3.2.2 プログラミング手順

基本設定オブジェクトの showIcon プロパティを false に設定する

setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false,
   showIcon: false
  }
 };

3.3ノードアイコンをカスタマイズする

3.3.1 公式ドキュメント

ノードを変更するアイコン

3.3.2 プログラミング手順

treeNodeノードデータのicon/iconOpen/iconCloseプロパティを設定する

3.4 カスタムフォント

3.4.1 公式ドキュメント

ノードのフォントを変更する

3.4.2 プログラミング手順

treeNode ノードデータのフォント属性を設定するだけです。フォント属性の値は、オブジェクトの内容はスタイルデータと同じです

3.4.3 エフェクト表示

3.5 ハイパーリンク

3.5.1 公式ドキュメント

ノードタイトルをクリックすると自動でジャンプします注 01: click 属性は、最も単純なクリックイベント操作のみを実行できます。 onclick="..." と同等。操作がより複雑な場合は、onClick イベントコールバック関数を使用します。

3.5.2 プログラミング手順

treeNode ノードデータの URL と click 属性を設定しますヒント 01: click 属性を設定する場合、属性値は単純な onClick イベントである必要があります

ヒント 02:設定ターゲット属性を使用する場合、属性値は _blank と _self

_blank -> 新しいウィンドウで開きます

_self -> 元のウィンドウで開きます

zNodes = [
  {id: 1, pId: 0, name: &#39;1 一级标题&#39;, open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;, open: true, font:{&#39;background-color&#39;:&#39;skyblue&#39;, &#39;color&#39;:&#39;white&#39;}},
  {id: 111, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园1&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;, target: &#39;_blank&#39;},
  {id: 113, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园2&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;, target: &#39;_self&#39;},
  {id: 112, pId: 11, name: &#39;1.1.2 三级标题 -> 单击&#39;, click: "alert(&#39;你单击了&#39;)"},
  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 ]

3.6 クリックして制御します

3.6 .1 公式ドキュメント

ノードのタイトルをクリックすると、対応するメソッドをトリガーしますヒント 01: この使用法を使用して、angular でルートジャンプを実装できます

3.6.2 プログラミング手順

设置基本配置对象的onClick属性

技巧01：onClick属性值是一个方法的引用，我们需要自己编写这个方法

 setting = {
  view: {
    showLine: true,
    showIcon: true,
    fontCss: this.getFont
  },
  data: {
   simpleData: {
    enable: true,
    idKey: &#39;id&#39;,
    pIdKey: &#39;pId&#39;
   }
  },
  callback: {
   onClick: this.onCzTreeOnClick
  }
 };

编写onClick触发方法

 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
  alert(treeNode.name);
 }

上面是我整理给大家的，希望今后会对大家有帮助。

jQuery实现的鼠标响应缓冲动画效果

在jQuery中如何实现鼠标响应式淘宝动画效果

在webpack中打包并将文件加载到指定的位置（详细教程）

在Webpack中路径压缩图片上传尺寸获取的问题（详细教程）

以上がzTree コードを Angular に統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript：パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1）解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2）JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

See all articles