1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」:phpspot開発日誌
List.js - Examples of how to use the script リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」。 <li>リストを入力によって絞り込んだり、分類別で絞り込んだり、特定属性でソートするなんていうことが可能です。 7KBと軽く、サクサク動きます。サーバサイドでアイテムを絞り込む方法もありますが、アイテム数がそこまで多くなければこうしたものでしぼり込むことで、サクサク動作してユーザ体験も向上して作り手としてもサーバ負荷を減らすといったことができそうです。 テーブルベースのデータもフィルタリング可能です。 jQueryプラグイン程使い勝手がいいわけではありませんが、ライブラリ非依存で使えるのもメリットかも。 関連エントリ 郵便番号等からリアルタイムに地図をサジェストできる「Mapeed.AddressChooser」 Fa
値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
HTMLテーブルの縦横を固定にしてデータを見やすく·Super Tables MOONGIFT
Super TablesはJavaScript製のオープンソース・ソフトウェア。業務システムをはじめ、レポート出力等で多用されるのがテーブル組みだ。縦横に長いデータを表示する場合、表計算ソフトウェアであればヘッダ部を固定表示にする。そうすればスクロールしても何の項目かすぐに分かる。 中央に表示されているテーブル だが素のままのHTMLではそのような柔軟な表示は行えない。そのためシステムによっては10行ごとにヘッダを繰り返し挿入したりする。だがそれも再利用性が悪くなるだろう。そこで使ってみたいのがSuper Tablesになる。 Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示される。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されるようになる。テーブルのユニークになるIDを常に表示したりすると便利だ。 実際のデータ。普通のテーブル組
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌
Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索＆ソート＆ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、ＵＩも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScript とCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ
第9回 Webページにきれいで多機能なテーブルを表示させる
今回のレシピ プラットフォーム：Webブラウザ 使用言語：JavaScript（Google Visualization API） 前回に続いてGoogle Visualization APIを使ったプログラムです。Visualization APIは，通常のHTMLだけでは作成が困難なビジュアルを簡単に作成できるJavaScriptライブラリです。今回はきれいで高機能なテーブルの作り方を解説します。 Visualization APIの公式ドキュメントは執筆時点では英文のものしか公開されていません。ただし英文そのものは難しくないので，ある程度のスキルを持ったプログラマであれば十分に読破できると思います。 早速基本形になるテーブルを作ってみることにしましょう。比較のために通常のHTMLで作成した同等のテーブルも併せて実装しておきます（リスト1）。作成したHTMLはローカルPC上でも動作しま
[JS]テーブル内のコンテンツをセル間で移動可能にするスクリプト
Drag and drop table content with JavaScript demo デモではテーブル内のコンテンツをドラッグ&ドロップでセル間の移動が可能で、配置したコンテンツの量でセルの高さも変更します。 スクリプトはjQueryなど他のスクリプトに依存せず単体で動作するもので、対応ブラウザはIE6をはじめFx3にも対応しています。
シマシマの見やすいテーブルを作成するMooToolsプラグイン「ZebraTable」:phpspot開発日誌
MooTools Zebra Table Plugin Example シマシマの見やすいテーブルを作成するMooToolsプラグイン「ZebraTable」。 次のようなシマシマにして見やすいテーブルをjavascriptで自動で作成できるMootoolsプラグインのご紹介。 カーソル位置をクリックで色を変更、マウスオーバーでも色変更機能が付いてます。 サーバサイドでやると結構面倒でコードも見にくくなるので、JavaScript で自動でやっちゃうのがスマートですね。 jQuery を使ったものも日本製であるみたいです。 テーブルをゼブラ（ストライプ）模様にできるzebraTable.jsを公開しました
デコレーションテーブル.js - JavaScript ライブラリー - HTML5.JP
デコレーションテーブル.jsは、class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリーです。他のJavaScriptライブラリに依存せず、単独で動作します。 テーブルをデコレーションするJavaScriptライブラリは海外物も含めて数多くありますので、このライブラリは特に目新しさはなく機能も少ないのですが、よろしければ是非ご利用ください。 ダウンロード Release Date Size (byte) Download 使い方 deco_table_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、次のJavaScriptコードを記述してください。 <script type="text/javascript" src="../ht
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
MooToolsをベースにしたグラフィカルなUIを実現するJavaScriptライブラリ·Jx MOONGIFT
※ 画像は公式サイトデモより Webアプリケーション化が進めば進むほど、JavaScriptに期待されるのがリッチインタフェースの実現だ。もともとWebブラウザ自体がリッチなインタフェースだが、ローカルアプリケーション並みのコンポーネントや操作性を求められるようになっている。 四角のレイアウト そのようなインタフェースを実現するライブラリは数多く登場してきている。その一つとしてJxを紹介しよう。 JxはMooToolsをベースとしたJavaScriptライブラリで、リッチなユーザインタフェースを実現する。Google Code上でホスティングされているオープンソース・ソフトウェアで、ライセンスはMITとなっている。 Jxの公式サイトには様々なサンプルが登録されている。レイアウトに関するもの、スライドやドラッグができるダイアログやパネル、テーブル表示、ツリー、ツールバー、メニュー、タブなど様
[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量（1.7KB）のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
MOONGIFT: » 要チェック！テーブルからグラフを生成するJavaScriptライブラリ「Bluff」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより これは面白い発想だ。Web上でグラフを作成、表示するライブラリは数多く存在する。その際に使う方式としては、基準になる点をXY軸それぞれに対して追加し、描画するという方式だ。これはプログラム言語にとっては簡単な方式かも知れない。 JavaScriptだけで画像グラフを生成する だが、使い慣れている表計算ソフトウェアの場合はどうだろう。はじめに表があり、そこからデータを読み取ってグラフを描くようになっている。その慣れた方式を使えるのがこちらのライブラリだ。 今回紹介するオープンソース・ソフトウェアはBluff、グラフ描画ライブラリだ。 BluffはJavaScriptのライブラリで、画像形式（PNG）のグラフを生成する。棒グラフ、円グラフ、エリアグラフ、折れ線グラフなど様々なグラフ形式をサポートしている。背景色を変えたり、複数のデータを描画できるなど多機能なライ
MOONGIFT: » 既存のテーブルをソート可能に「sorttable」:オープンソースを毎日紹介
業務系システムでは、一覧表や検索結果の出力がよく行われる。そしてその際によく指定されるのが、カラムを使ってのソート機能だ。これは意外と面倒で、実装したのは良いが、検索を再度行う仕組みの場合は重たかったり、チェックボックスはそのままにして欲しいなどと要望が出されたりすると大変なことになる。 金額部分のソートも問題ないようだ そうした煩雑さから解放されるライブラリがこれだ。既存のテーブルに簡単にソート機能を付けられるようになる。 今回紹介するオープンソース・ソフトウェアはsorttable、JavaScriptのソートライブラリだ。 sorttableの使い方は簡単だ。テーブルのクラス名に「sortable」を指定すれば良いだけだ。そうするとヘッダカラムをクリックしてtbody内がソートされるようになる。クラス名を指定するだけという手軽さが素晴らしい。 日付も正しく並んでいる JavaScri
Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」:phpspot開発日誌
dhtmlxTabbar - AJAX powered DHTML JavaScript Tabbar component with rich API dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. リッチなタブＵＩを実現「dhtmlxTabbar」。 次のような、縦横にタブを付けられるJSライブラリの紹介です。 見た目がクールなので、デザインが気になる人も、そのまま使ってもよさそうです。 タブ以外にも同じシリーズで多数のUIコンポーネント公開されているみたい dhtmlxTree dhtmlxGrid dhtmlxTreeGrid dhtmlxMenu dhtmlxCalendar dhtmlxColorPicker dhtmlxSlider dht
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
[JS]ソートできるテーブルを実装するスクリプト10選 | コリス
単独使用のものから、jQueryなどのライブラリ併用まで、数値や文字・画像をソートできるテーブルを実装するスクリプト10選です。
Welcome to Tablecloth テーブルのマウスオーバーを色変更
cssglobe.com 2024 著作権. 不許複製 プライバシーポリシー
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スムーズなスライドショーを実現するスクリプト: Recently Ajax