Mobiscroll
MobiscrollのDATE TIMEを使ってみた。
現行バージョンは使わないライブラリが多く含まれており、それなりに高価なため、今回はスマホ用のDate Timeに機能を絞ったMITライセンスを採用。
少し不具合があるものの、今後のアップデートが見込めないため、モジュールに手を加えて解消。
スマホユーザーにはうれしいかも。
https://code.google.com/archive/p/mobiscroll/
https://demo.mobiscroll.com/jquery/datetime/mobile-desktop-usage#
Tabulator Grid
今回は、Tabulatorについて。
相変わらずのグリッド系DB管理フォームを検証。
今回のオーダーは、
・日本語化
・レスポンシブ対応
・datepicker に祝祭日の実装
・テキストエリアの実装
・コンボボックスの実装
・フィルタリング機能付き複数選択セレクトボックスの実装
・ボタンの実装
・確認ダイアログの実装
・やり直し機能の実装
・スムーズな1万件のレコード編集
・固定カラム
・カラムのグループ化
・カラム値の計算処理
・非表示カラムの実装
納期にゆとりがあることもあり、これまでに使ったことのない Tabulator を、取り急ぎ検証。
進行形で開発中なので、実装できていない機能もいくつかあるのですが、JQueryとの相性が良さそうで、ライブラリを読み込めば何とかなりそう
・・・とスタートしたのですが、これが苦労の始まり。
ひと通りの課題は実装できたのですが、コンボボックスの実装とフィルタリング機能付き複数選択セレクトボックスの実装に手間取り、
通常作業の合間の検証とは言え、3週間もかかってしまいました。
後になって考えてみれば、簡単な見落としでした。
Ajax のコールバックの実装も終わり、動きも安定しており、致命的な不備も無いようなので、いざ検収作業へ。
MIT Licenseでもあり、今後の開発に期待もできそうなので「いいね」。
Param Query Grid
今回は、Param Query Gridについて。
グリッド系DB管理フォームの納品が終わるや否や、待ちかねていたかのように、新たにグリッド系の案件が入ってきたため、jQuery.jTable.js のカスタマイズについてさらに検証しました。
結果、カスタマイズはできたものの、スクリプトをかなり書き加える必要があり、断念することに。
以前は不具合があったため見送っていた Param Query Grid の最新版を何気なく動かしてみました。
おや! おや!
ひょっとして使えるんじゃない?
今回は編集時のカレンダーに祝日判定を必要するため、これが使えると、jQuery との相性も良さそうだし、助かるなぁ。
旧バージョンだけれど Commercial Free でもあることだし。
少し、APIに癖があるようだけれど、試してみることに。
https://paramquery.com/
jQuery.jTable.js
今回は、jQuery.jTable.jsについて。
年末も差し迫ったこの時期に、グリッド系のDB管理フォームの依頼が。
ゼロから開発するわけにもいかず、納期を最優先に、必要な機能を持ち合わせたライブラリを検索した結果、jQuery.jTable.jsに決定。
ドキュメントを読んだ限りでは、簡単そうだったのですが、これが間違いの始まり。
日本語のドキュメントはほとんど無く、英文を熟読しても想定通りに動かず、挙句の果てにJavaScriptを改変。
結局、想定通りになるまで、徹夜をして2日もかかってしまいました。
一旦、理解できると、なかなか便利。
jTableは、HTML、JavaScriptの手間をあまりかけず、AJAXベースでサーバーサイドDBのCRUDを実現してくれます。
セキュリティとバリデーションへの注意を怠らなければ、いい感じで動きます。
残念なのは、開発がストップしているようなのと、オリジナルには少し不具合があります。
ケースを選びますが、一度試してみては?
http://www.jtable.org/
jqueryグリッドいろいろ
今回は、Excelライクなグリッドの要望を受け、まさかゼロからの開発を行う訳にもいかず、いくつかのライブラリを試してみました。
案件に必要とする機能は次の通りで、代用可能な処理が含まれるものの、かなり敷居が高い。
+ [Enter]、[Tab]、[Arrow]、[Ctrl]+[C]、[Ctrl]+[V]のキー操作。
+ 複数レコードの一括コピー・ペースト。
+ リスト、ドロップダウン、テキスト、チェックボックス、カレンダー等のインライン編集。
+ 固定カラム。
+ ヘッダのグルーピング。
+ ページネーション。
+ ページングのローテーション。
+ 複数カラムのフィルタリングとソートの同時利用。
+ 入力時バリデーション。
+ イベントの取得。
+ コールバック。
+ Excel、PDF等への出力。
最初の検証は、w2uiライブラリに含まれるGrid。
何といっても軽量なのが第一印象。
ページングは無く、スクロールで100万行に対応とのことでしたが、環境に依っては、スムーズなスクロールは実現されませんでした。
サンプルも豊富で、動作も安定している印象でしたが、必須機能のいくつかは実現できませんでしたので、今回は採用を見送りました。
・本家サイト
・デモサイト
・日本語リファレンス
次の検証は、handsontable。
実に惜しい。
ソートとダブルバイト文字の扱い(対処可能)に不具合があるようです。
また、編集不可カラムのソートができませんでした。
その他、スクロール時の不具合と遅延が発生するケースを確認しました。
issuesの多さから期待は大きいのでしょうが、対応に追われ、基本部分でフィックスできていない課題が多く残っています。
・本家サイト
・デモサイト
3つ目の検証は、SlickGrid。
正直なところ、カスタマイズのコーディングに最も手間取りました。
何とか期待通りの機能までたどり着けそうだったのですが、後日のメンテナンスを考えると、コーディングの複雑さからやる気が失せそうで、途中で作業を断念しました。
・本家サイト
・デモサイト
検証にかけられる時間も残りわずか。
ということで、有償ながらも評判の高いJQWidgetsをダウンロード。
ウィジェット群からjqxGridに的を絞り、サンプルを作成。
数時間で、期待通りの機能以上のものを得ることができました。
ライブラリは大きく、もたつき感はあるのですが、機能・安定感・コーディングのし易さと申し分なく、他のウィジェットも試したくなります。
やはり、有償ということでしょうか。
・本家サイト
・デモサイト
jQueryスライダー[bxSlider.js]
今回は、jQueryスライダー「bxSlider」を紹介。
モードは、カルーセルだけではなく、オプションでフェードなども設定可能。
何といっても、カスタマイズ性が高く、JavaScriptを理解(ほんの少し)できるユーザーにとっては、使いやすいプラグインのひとつではないでしょうか。
そのカスタマイズ性を少し紹介。
・基本的なオプションはひと通り設定可能
・スタイルが独立しているためオーバーライドが容易
・Callbacks関数が使用可能
・Methodsが使用可能
Callbacks関数とMethodsを組み合わせて使用することで、いろいろな動作が実現できそうです。
詳細は本家サイトをご覧ください。