設置の例。
<!--
無い場合設置して有効にする
http://jquery.com/
http://code.google.com/p/jquery-json/
-->
<!--
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.json-2.3.js"></script>
-->
<!--
<script type="text/javascript" src="convertCsvToTable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
convertCsvToTable(
// テーブルを設置する要素
$("#csv-test-002"),
// csvの文字列
$("#csv-test-001").html(),
/*$.ajax({url:"test.csv",type:"GET",dataType:"text",async:false}).responseText,*/
// save-jsonの文字列
"",
/*$.ajax({url:"test.json",type:"GET",dataType:"text",async:false}).responseText,*/
// クリック時の背景色の変更 on/off
true,
// 文字
"#181818",
// 背景
"#FFFFFF",
// メニューなどの背景
"#BCDEFF",
// 枠線
"#676767",
// メニューのリンク
"#304FAC",
// メニューのリンク押せない場合
"#676767",
// クリック時の背景色3種類
"#FFEDCB", "#EEEEFF", "#FFEDCB",
// メニュー表示 on/off
true,
// mail, html表示 on/off
true,
// save-json,load-json表示 on/off
true,
// 最大行数
255,
// 最大列数
31,
// 最大文字数
63,
// 最大ソート用文字数
31);
});
</script>
-->
<!-- ここまで<head> ... </head> -->
<textarea id="csv-test-001" style="display:none;">名前,種類,値段,カロリー,塩分
ラーメン,麺,550,800,2
サンマ定食,定食,650,600,1
かき揚げ丼,丼物,800,800,1
ざる蕎麦,麺,800,500,1
唐揚げ定食,定食,750,850,1
カレーライス,定食,650,900,2
親子丼,丼物,650,700,1
イクラ丼,丼物,950,750,1
トンカツ定食,定食,800,800,1
日替わり定食,定食,1500,150,15
</textarea>
<div id="csv-test-002" style="font-size: 15px;"></div>
ダウンロード。
https://docs.google.com/open?id=0BwK7sPpG0c5ZYjJmZjMxYTItZGU4ZS00N2IyLThlNGItZDFiYmM3MjVmYjlm
説明。
- メールソフトを開きます。
下書きなどで保存します。
内容はcsv固定です。 - html
- htmlのソースを表示します。
メモ帳などにコピーアンドペーストします。
htmlファイルに保存してブラウザで表示してもjavascriptの機能はありません。 - save
- csvを表示します。
メモ帳などにコピーアンドペーストします。 - load
- csvをペーストします。
成功すると表示が更新されます。 - reset
- 初期表示に戻します。
成功すると表示が更新されます。 - save-json
- json(javascriptの配列データ)を表示します。
メモ帳などにコピーアンドペーストします。
必要ない場合は関数の引数の該当部分をfalseにしてjquery.json-2.3.jsのタグを削除して下さい。 - load-json
- jsonをペーストします。
成功すると表示が更新されます。
必要ない場合は関数の引数の該当部分をfalseにしてjquery.json-2.3.jsのタグを削除して下さい。 - csvの1行目
- 列のタイトルがあるものとして処理します。
固定です。 - 列のタイトルをクリック
- データをソートします。
もう1度クリックすると逆順にソートします。 - ソートの種類
- 種類は1種類で固定です。
列全体が数字に似ているデータの場合、表示が右寄せになる場合があります。
そうなると数値的にソートしますのでご注意下さい。
文字列の場合ひらがなとカタカナやアルファベットの大文字小文字などを無視してソートします。
問題がある場合、別のデータを追加してソートして下さい。 - データ部分をクリック
- 背景色を変更します。
もう1度クリックすると戻ります。 - tableの1列目
- 行番号を表示します。
- 行番号をクリック
- 行全体の背景色を変更します。
データ部分のクリックを無効化します。
もう1度クリックすると戻ります。 - /*$.ajax({url:"test.csv" ... */とは？
- javascriptのコメントです。
1つ上の行をコメントアウトして、この行を有効にすると動的にcsvファイルをロードします。
外部ドメインや、もしくは同一ドメインであっても自身の管理外のファイルを指定してはいけません。
エラー時などの処理がありません。手動で追加して下さい。下記は公式サイトのマニュアルです。
http://api.jquery.com/jQuery.ajax/
- 対応ブラウザ
-
確認したブラウザは以下の通りです。
windows xp professional の IE8
windows xp professional の IETester v0.4.11 の IE6,IE7,IE8
windows xp professional の Opera 11.52
windows xp professional の Google Chrome 11.0.696.68
windows xp professional の Safari 5.0.5
windows xp professional の Firefox 8.0
gentoo linux の www-client/opera 11.52.1100
gentoo linux の www-client/chromium 15.0.874.120
gentoo linux の www-client/firefox 7.0.1-r1
似た環境のOS/ブラウザで動作する可能性が高いです。
- その他
- データに半角のダブルクォーテーションやバックスラッシュがある場合、利用者ごとの期待した結果にならない場合があります。
フォーマットの変更やデータの追加、変更、削除はできないです。excel, open office, libre officeなどで対応して下さい。
エラーやバグや不具合や使いにく点がある場合このページのコメントなどでご報告頂けるとありがたいです。
0 件のコメント:
コメントを投稿