JavaプログラミングでJavaScriptの超実用的なテーブルプラグインを書く

JavaプログラミングでJavaScriptの超実用的なテーブルプラグインを書く

効果

ここに画像の説明を挿入

ドキュメント

最初のステップ

tableFactory からアイコン フォーム オブジェクトを取得します。

ここに画像の説明を挿入

または:

ここに画像の説明を挿入

ステップ2

パラメータをロードし、JSONオブジェクトを渡す

ここに画像の説明を挿入

テーブル効果:

ここに画像の説明を挿入

jsonパラメータの詳細:

ここに画像の説明を挿入

例:

ここに画像の説明を挿入

ここに画像の説明を挿入

以下に対応します:

ここに画像の説明を挿入

ステップ3

ページ内の対応する ID を持つ div にテーブルを読み込みます。

のように:

ここに画像の説明を挿入

TDの幅は列数に応じて動的に調整できます。

ここに画像の説明を挿入

別のファイルに入れて直接呼び出します。

ここに画像の説明を挿入

ソースコード

//テーブルファクトリー var tableFactory = function(type){
	if (このインスタンスのtableFactory) {
		新しい this[type]() を返します。
	}それ以外{
		return new tableFactory(type); //newが書き込まれない状況を防ぐ }
}
テーブルファクトリー.プロトタイプ = {	
	チャートフォーム: 関数(){
		var html = ''; //プライベートプロパティ this.loadParams = function(opts){
			var jsonArr = []; //JSON配列 var icount = 0; //行の色を制御するために使用 var rowHeaderArr = []; //各行の最初の列の配列をフォーマットします if (opts.jsonArr) {
				jsonArr = opts.jsonArr;
			}
			(opts.rowHeaderArr)の場合{
				行ヘッダー配列 = opts.rowHeader配列;
			}
			var colNum = jsonArr.length; // 列の合計数を記録 var rowNum = rowHeaderArr.length - 1; // 行の合計数(最初の行を除く)			
			html = "<TABLE id='table' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\" >"+
								"<TBODY><TR> "+
									"<TD >&nbsp;</TD>"; //左上隅の空のTD
						
			//最初の行を綴る for(var i = 0;i < colNum;i++){
				var c1 = jsonArr[i].c1;
				html += '<TD style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</TD>';
			}
			html += '</TR><TR>';
			for(var i = 0;i < rowNum + 1;i++){
				//行ヘッダーのスペル var colorBox = rowHeaderArr[i].split(',')[0];
				var hearerText = rowHeaderArr[i].split(',')[1];
				html += "<TD class='colorBox' style='padding:3px;height:14px;border:1px solid #ccc;width:66px;text-align:center;'><div style='border-radius:2px 2px 2px 2px;display:inline-block;width:12px;height:12px;background-color:"+colorBox+";float:left;'></div>"+hearderText+"</TD>";
				//この行の右側にあるすべての列をスペルアウトします for(var j = 0;j < colNum;j++){
					//アラート(i);
					var colValue = jsonArr[j]['c'+(i+2)];
					var tdWidth;					
					colNum <= tableFactory.TD_WIDTHS.length の場合
						tdWidth = tableFactory.TD_WIDTHS[colNum-1];
					それ以外 
						tdWidth = tableFactory.TD_WIDTHS[tableFactory.TD_WIDTHS.length - 1];
					コンソール.info(tdWidth);
					if(i%2 == 0){
						html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#e2fdfe;">'+colValue+'</TD>'; 
					}それ以外{
						html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#fff;">'+colValue+'</TD>'; 
					}					 
				}
				
				//改行 html += '</tr><tr>';				
			}
			html += '</TR><TR>';
			html += '</TR>';
			html += '</TBODY></TABLE>';
		} ;
		this.loadData = function(houseId,callback){
			document.getElementById(houseId).innerHTML = html; //表を表示
			if(コールバック) コールバック();
		}
	}
}
	テーブルファクトリー.TD_WIDTHS = [220,190,150,120,90,60,10];

デモ:

<script src='common.js'></script>
<div id='TB' クラス='TB'></div>
<div id='TB1' クラス='TB'></div>
<div id='TB2' クラス='TB'></div>
<div id='TB3' クラス='TB'></div>
<div id='TB4' クラス='TB'></div>
<スタイル>
    .TB {
		パディング:6px;
	}
</スタイル>
<スクリプト>
	var chartForm = tableFactory('chartForm');
	チャートフォーム.loadParams({
						jsonArr: [
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'北東',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'四川省',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'重庆',c2:2,c3:6,c4:3,c5:1,c6:6}
									]、
						行ヘッダー配列: [
											'#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階',
											'#66FF00、検査フェーズ'、
											'#663399、トライアル段階'、
											「#33CCFF、報告段階」
									  ]
					});

	chartForm.loadData('TB');
	チャートフォーム.loadParams({
						jsonArr:[
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'北東部',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6},
									]、
						行ヘッダー配列: [
											'#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階',
											'#66FF00、検査フェーズ'、
											'#663399、トライアル段階'、
											「#33CCFF、報告段階」
									  ]
					});
	chartForm.loadData('TB1');
	チャートフォーム.loadParams({
						jsonArr: [
										{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'北東',c2:2,c3:6,c4:3,c5:1,c6:6},
									]、
						行ヘッダー配列: [
											'#000CCC,タスク総数', //行名 '#990033,プロジェクト設立段階',
											'#66FF00、検査フェーズ'、
											'#663399、トライアル段階'、
											「#33CCFF、報告段階」
									  ]
					});
	chartForm.loadData('TB2');
</スクリプト>

上記は、Java プログラミングで超実用的な JavaScript テーブル プラグインを作成する詳細です。Java プログラミング JavaScript テーブル プラグインの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 独自のJavaScriptフォーム検証プラグインを用意する
  • JS コンポーネントシリーズ: Bootstrap テーブルコンポーネントアーティファクト [最終章]
  • 自分で書いたテーブルソート js プラグインを共有します (効率的で簡潔)
  • 左側はテーブル ヘッダー用の JS テーブル コントロールです (自分で作成したもので、オンラインでは利用できません)

<<:  HTML チュートリアル: よく使われる HTML タグのコレクション (4)

>>:  分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

推薦する

Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...

VMware Workstation Pro でサーバー仮想マシンを構築する (グラフィック チュートリアル)

私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....

Zabbix はどのようにして ssh 経由でネットワーク デバイス データを監視および取得するのでしょうか?

シナリオシミュレーション:ある会社の運用保守担当者は、以前購入した一連のネットワーク機器の光ポートの...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

CentOS 7.6 仮想ネットワーク カードのバッチ追加、変更、削除操作の紹介

1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...

WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...

MySQLのファジークエリの要約

1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

EXPLAIN を使って MySQL の SQL 実行プランを分析する方法

序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...

MySQLの最適化の詳細な分析とパフォーマンス

導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...

MySql の null 関数の使用の共有

MySql の null に関する関数IFNULL ISNULL NULLIF IFNULL使用法:...

CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする

最近、MySQL を使っています。Linux での mysql-installation という記事...

HTML ページ出力で従うべきいくつかの原則の要約

1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...