KingTable
1.0.0
入力データに基づいて自身を構築できる管理テーブルのライブラリ。クライアント側とサーバー側のページネーションをサポートします。クライアント側とサーバー側の検索。カスタムフィルタービュー。列を非表示にする自動メニューとカスタム ツールのサポート。クライアント側のエクスポート機能: csv、json、xml、Excel xlsx (プラグインを使用) 形式。
次のデモはオンラインで利用できます。
ページの更新時にフィルターがどのように自動的に保持されるかに注目してください。たとえば、検索機能を使用するか、リッチ HTML デモの 1 つでページを変更し、F5 キーを押します。検索するときは、クライアント側の検索アルゴリズムが関連性 (出現回数、一致を生成するプロパティの順序) によって結果をソートする方法にも注意してください。
注意:これらのデモはすべて固定テーブルです。つまり、すべての情報がメモリにロードされ、クライアント側でページ分割され、フィルタリングされたテーブルです。 AJAX リクエスト (サーバー側) を使用してページ分割されたテーブルの例を確認するには、リポジトリで提供されている専用のドキュメントと開発サーバーを参照してください。
KingTable ライブラリは、npm を使用してインストールできます。
npm install kingtableその後、CommonJS 構文を使用してモジュールをインポートできます。
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )または ES6 インポート構文:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" KingTable ライブラリは、 distフォルダに配布ファイルをダウンロードして使用することができます。
< script src =" kingtable.js " > </ script > KingTable ライブラリの以前のバージョンは、https://github.com/RobertoPrevato/jQuery-KingTable から入手できます。
ウィキページを参照してください。可能なオプションの完全なリストは、専用のオプション ページ内で参照できます。
以下の表は、KingTable 2.0 に追加された機能をリストしたものです。
| 特徴 | 説明 |
|---|---|
| ES6のソースコード | ES6 ソース コード、ライブラリは配布用に ES5 にトランスパイルされます。 |
| 単体テスト済みのソースコード | ソース コードは単体テスト用に Gulp タスク、Karma、Jasmine と統合されています。 300 を超えるテスト – まだまだ増加中! |
| 削除された依存関係 | jQuery、Lodash、I.js、R.js から依存関係を削除しました。 |
| 例外の改善 | 発生した例外には、詳細な手順を記載した GitHub wiki へのリンクが含まれています。 |
| データをフェッチするロジックの改善 | HTTP GET メソッド (クエリ文字列でフィルタリング) または HTTP POST メソッド (JSON POST データとしてフィルタリング) を選択できます。 |
| LRUキャッシュ | 最も最近使用されたキャッシュ メカニズムにより、フィルタによって最後のnページをキャッシュし、AJAX リクエストの数を削減します。 |
| テーブルデータフェッチロジック | テーブル自体をレンダリングするために必要なデータを返す関数を定義できます (カスタム フィルター ビューの辞書など)。 |
| フィルタのキャッシュ | 各テーブルのフィルターはクライアント側ストレージ (構成可能) を使用してキャッシュされるため、ページの更新時に保持されます。 |
| CSソートの改善 | 数値のようにソートできる文字列 (「25%」、「25.40 EUR」、「217°」など) は、ソート時に自動的に数値として解析されます。 |
| CSソートの改善 | クライアント側で複数のプロパティによる並べ替え。 |
| CS検索の改善 | クライアント側の検索機能が改善されました。検索は、日付、数値、およびその他の書式設定された文字列のカルチャ依存の文字列表現で機能します。 |
| イベントハンドラーのサポートの改善 | カスタム イベント ハンドラーは、クリックされた項目をパラメータとして自動的に受け取ります (該当する場合)。 |
| カスタムボタンのサポートの改善 | 項目ごとに追加のフィールド (ボタンなど) をレンダリングするように構成できるようになりました。 |
| 他のメディアのサポートの改善 | NodeJS コンソール アプリケーションと、NodeJS を使用して送信された電子メール本文の HTML テーブル レンダリングのサポート。 |
KingTable ライブラリは 2 つの作業モードを実装しています。
また、最適化されたコレクションと単純なコレクションの両方をサポートします。詳細については、専用の Wiki ページを参照してください。
固定テーブルには、サーバー側のページネーションを必要としないコレクションが表示されますが、それでもクライアント側のページネーションの恩恵を受ける可能性があります。アプリケーションで作業する場合、時間の経過とともに増加することを意図していない、サイズの小さいコレクションを扱うことがよくあります。たとえば、衣料品を販売する電子商取引 Web サイトのカテゴリの表や、ほとんどのアプリケーションのユーザーの役割の表などです。このような場合、コレクション全体をクライアントに返すことが合理的です。固定 KingTable を定義するには 2 つの方法があります。
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;固定テーブルは、クライアント側で検索とページネーションを実行します。
通常のテーブルは、時間の経過とともに増加するため、サーバー側のページネーションを必要とするコレクションを表示するテーブルです。これは、電子商取引 Web サイトの製品と顧客の表など、ほとんどの場合に当てはまります。
var table = new KingTable ( {
url : "/api/profiles"
} ) ;AJAX 応答を受信するとき、通常のテーブルは次の構造を受信することを期待します。
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} KingTable ライブラリには、最終ユーザーとライブラリを使用するプログラマの両方の使いやすさを向上させるための多くの機能が含まれています。
sessionStorage 、 localStorageまたは互換性のあるオブジェクト) に自動的に保存され、ページの更新時に永続化されます。フィルターは URL によって収集され、可能であればテーブル ID によって収集されます。詳細については、専用の Wiki ページを参照してください。
詳細については、専用の Wiki ページを参照してください。 KingTable ライブラリには、ボタンの適切な名前 (更新、ページ番号、ページごとの結果など) を表示するために使用される、クライアント側ローカリゼーションを実装するロジックが含まれています。
プロジェクトおよびサーバー側コードと統合する方法については、専用の Wiki ページを参照してください。
