はじめに
それが最近、頭字語KISSを解釈し、さまざまな種類の製品のソフトウェアコンポーネントを作成する傾向がますます高まっています。 この原則に基づいて、このレビューで提案されたライブラリが作成されます。 そして、それが将来、それが与えられた方法で発展する理由です。
私は、JSプログラマーとして働いたことがないことをすぐに言います。 彼のキャリアの15年すべてで、彼はサーバー側をより多く扱いました。 クライアント側に関しては、彼はより頻繁にインターフェース設計を担当し、レイアウトを専門家に信頼していました。
2012年に新しい仕事に切り替えて、2つの主要なプロジェクトに取り組み始めました。 皮肉なことに、サーバーとクライアントの両方のコードを書く必要がありました。 特徴は、両方のプロジェクトで、クライアント部分が大量の異種の表、デジタル、分析データを表示するためにシンクライアントである必要があることでした。 したがって、このトピックに関する多数の異なるライブラリとフレームワークが検討されました。 この記事では、 extJS 、 jqGrid 、 dhtmlx （ホテルのプラグインのセットとして使用され、最終的には今日見ることができるものに成長しました）、および数十の異なるグリッドに言及します。
そして、3年後、かつて小さくて軽い製品の冗長性がはっきりと感じられました（私だけでなく、jsだけでなく、ソフトウェア全般でも）。 時間が経つにつれて、プロジェクトが急増し、効果的な資金が不器用な収穫機に変わりました。 彼らは何でもできますが、その代償はトラフィックとクライアント側の作業の遅れです。 柔軟性と使いやすさが失われます。
その結果、必要なタスクを迅速に実行するシンプルなツールを開発するという「ブラックジャックでグリッドを混乱させない」という考えとして生まれた決定が下されました。
タスク
- 表形式のデータを表示するためのツールを作成する
要件 ：
- 使いやすさ
- 性能
- 少量のコード
- 常に使用される機能が必要です。 プロジェクトの誰も使用していない機能の90％を製品にする必要はありません。
当初、このアイデアは詐欺として認識されていたため、 tmsTableコードが作成されました。このコードは現在、多くのプロジェクトで常に使用されています。
機能性
- JSON形式のサーバーからのデータの非同期ダウンロード
- テーブルデータ表示
- 受信したデータの一部を表示する機能
- ページネーションとページごとの行数の設定
- サーバー要求をさまざまなデータで補足する機能
- セルとテーブル行のデコレーターを定義して、データの表示と実装に柔軟性を提供する機能
- テーブルでのソートの可能性
- テーブルのキャップとフッターを非表示にする機能
- クリック、CTRL、およびSHIFTを使用して文字列を選択および複数選択する機能
- テーブル行のクリックとdblclickを処理する機能
- 独自のスタイルを適用して、テーブルの表示をカスタマイズする機能。
ご覧のとおり、主張されている機能は簡単に不名誉なことです-これが私が達成したことです。 ツールはシンプルでなければなりません。 私の場合、結果のライブラリは、ほとんどの場合に必要な機能セット全体を完全に実装します。
テーブルにフィルターがないと誰かが言うかもしれません。 私は完全に同意する-彼らは通常の意味ではありません。 そしてされません。 理由は簡単です：フィルターの作成は膨大なタスクであり（理解しやすく便利にしたい場合）、ライブラリコードが大幅に複雑になります。 同時に、原則として、ネイティブフィルターは全員およびすべてを満足させることはできません。 その結果、フィルターの一部が1つの場所にあり、一部が別の場所にある、松葉杖とあまり明確でないインターフェイスが表示されます。 ネイティブフィルターの代わりに、postVars属性を手に持っています。これを使用して、タスクのために、データサンプルを制限するためのツールセットを作成できます。 私の理解では、これはサードパーティのライブラリのフレームワークにロジックを詰め込もうとするよりもはるかに便利です。
既に述べたように、JSON形式のデータはサーバーから取得されます。 決定したデータのすべてまたは一部のみを表示します。 いつでも、データの完全なセットを持つ行オブジェクトにいつでもアクセスできます。
コードについて少し
ページのコードにグリッドを（スタイルと美しさのない純粋な形式で）作成するには、次のように記述する必要があります。
<link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script>
ブートストラップを使用する場合、そのスタイルを使用する可能性が高いため、次のように記述する必要があります。
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="bootstrap/dist/js/bootstrap.min.js"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script>
次に、サイトページにテーブルを作成するには、プレートを含むコンテナを決定する必要があります。
<div id="json_ttt"></div>
さて、実際にテーブルを説明してください：
<script> json_params = { id: 'json_ttt' // , class: 'table table-bordered table-striped table-hover' // css , col_names: ['id', 'title', 'date'] // , dataType: 'jsonp' // , url: 'data.json' // , order_direction: 'asc' // , order_by: 'title' // , cols: [ {index: 'id', name: 'id', width: 100} , {index: 'title', name: 'title'} , {index: 'date', name: 'date', width: 100} ] , selectable: true // , rowNum: 20 // , rowNums: [10, 20, 50] // rowNum }; var json_tbl = new tmsTable(json_params) // json_tbl.render(); // </script>
あなたの前に、データは知覚に便利な形で提示されます。
このプレートをサイト、cms、請求書に統合できます...すべての基本機能があります。 データのフィルターと、clickおよびdblclickの動作を説明するだけです。
ソースコードはgithub.com/Tony-M/tmsTableで入手できます。
ユースケースも利用できます。
誰かがライブラリを便利だと思ったら嬉しいです。