Webフロントエンド開発制御学習メモ jqgrid+ztree+echarts

Web フロントエンドの初心者として、今日は 3 つのコントロール、つまりテーブル コントロール jqgrid、ツリー コントロール ztree、およびチャート コントロール echarts を使用した経験を記録したいと思います。それらについては以下で説明します。

1.jqgrid

まず、公式デモ Web サイト http://blog.mn886.net/jqGrid/ にアクセスしましょう。上記の説明は非常に役立ちます。

jqgrid の追加は比較的簡単です。つまり、ダウンロード後、js ファイルと css ファイルを対応するディレクトリに配置し、使用するときは指示に従ってください

リーリー

リーリー

リーリー

現在、主に 2 つの問題があります。1 つは、ページのレイアウトに関するものです。つまり、重さと高さがテーブルを制限できないことが多く、同時に、スクロール バーの使用も奇妙です。ナビゲーションバーの問題点は、テーブルのレイアウトと合わせて調整することができず、走り回って一部しか表示されないなどの問題が頻繁に発生することです。

2つの水平スクロールバーが表示される問題を修正しました

リーリー

理想的には、私が達成したい効果は次のようになり、下にテーブルとナビゲーションバーがあります

リーリー

リーリー

リーリー

navGridの内容がまだよく理解できていないので、来週新たにまとめます。

もう一つは、データ形式がjsonであることです。制御する場合は、制御するjsonと同じ名前のIDを使用します。

jqgrid まずここでそれについて話すのをやめて、それから新しい理解でそれについて話しましょう。

2、ztree

最初に正式なアドレスを添付してください: http://www.treejs.cn/v3/demo.php#_102。

引用方法は以前と同じです

リーリー

コードを表示

まず、栗を表す最も単純な木を添付します

リーリー

親ノードの下に新しいノードを作成することでツリー構造を表現します。まず最初にsettingとznodesをそれぞれ設定し、初期化関数initを使ってsettingとznodesを初期化パラメータとして入れて初期化します。

現在解決する必要がある主な問題は 2 つあります。1 つは、ツリー構造が失われ、すべてのテキストが同じ列に表示され、インデントが存在しないことです。 2つ目は、直接入力ではなくjsonデータを参照して制御する方法です。解決したら投稿してください。

他に 2 つのことについて説明します。1 つは、ツリーのスタイルを調整する場所が、demo.css ファイル内にあるということです。これを使用したい名前に変更し、

2 つ目はツリー全体のスタイルで、ademo の a タグを変更するだけです。

3 つ目は echarts です。率直に言って、このプラグインは 3 つの中で最も使いやすいです。

最初に公式ウェブサイトのアドレスを添付します: http://echarts.baidu.com/。
このプラグインを引用するには

以上です。
最初に最も単純な実装を添付します。
リーリー
他には何も説明しません。 itemstyle->normal->color で colorList を設定し、その中に color list を順番に入れると、色が変更されます。チャートに順番に表示されます。ただし、私には js のスキルがあまりありません。他の機能については、よく調べてから詳しく説明します。
2016/10/16 17:27:09

りー