IntraWeb 15 TIWGridの表示のカスタマイズ

IntraWeb 15の「TIWGrid」の表示について、DataTablesというプラグインを組み合わせると
簡単に高機能なGridを実装することができます。

---

【DataTables | Table plug-in for jQuery】

DataTablesはオープンソースのライブラリの一種で、
ライセンス区分はMITとなっています。

使い方の例は、下記のWebサイトが参考になります。
（日本語化対応やオプションパラメータに関する説明あり）

【DataTablesの使い方 – Qiita】

　

上記サイトのTipsを基に、例えば既存のTIWGridに対して
以下【ソース１】【ソース２】のようにプラグインを組み込むことで、
一気に高機能な表示を実現できます。

==========================================================
＜【ソース１】TIWAppForm OnCreateイベント＞
==========================================================
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  //jQuery DataTables の参照設定
  ContentFiles.Add('https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css');
  ContentFiles.Add('https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js');
end;

==========================================================
＜【ソース２】TIWAppForm OnRenderイベント＞
==========================================================
procedure TIWForm1.IWAppFormRender(Sender: TObject);
var
  sScriptStrs: TStringList;
begin
  sScriptStrs := TStringList.Create;
  try
    // 日本語プラグインの追加
    sScriptStrs.Add('$.extend( $.fn.dataTable.defaults, {');
    sScriptStrs.Add('language: {');
    sScriptStrs.Add('url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"');
    sScriptStrs.Add('}');
    sScriptStrs.Add('});');

    // DataTableを適用するGridの指定
    sScriptStrs.Add('$("#TBLIWGRID1").DataTable();'); //-- "#TBL"+[Gridコンポーネント名(大文字)]

//    // (参考)表示オプションを指定する場合はこちらに変更
//    sScriptStrs.Add('$("#TBLIWGRID1").DataTable({');
//    sScriptStrs.Add('displayLength: 25');       //---- デフォルトの表示件数
//    sScriptStrs.Add(', lengthChange: true ');   //---- 件数切替機能ON/OFF
//    sScriptStrs.Add(', info: true ');           //---- 情報欄表示ON/OFF
//    sScriptStrs.Add(', ordering: true ');       //---- ソート機能ON/OFF
//    sScriptStrs.Add(', paging: true ');         //---- ページ切替機能ON/OFF
//    sScriptStrs.Add(', searching: true ');      //---- 検索機能ON/OFF
//    sScriptStrs.Add('});');

    // HTML script追加
    AddToInitProc(sScriptStrs.Text);
  finally
    sScriptStrs.Free;
  end;
end;

※表示オプションは、上記の他にも設定可能な項目が存在します。
　公式ヘルプ https://datatables.net/reference/option/ も参照ください。

※IntraWeb 14や、TIWDBGridには対応していません。

　

---

＜実装前と実装結果のイメージ＞

　

　

（Tipsメルマガ　2021年1月号より）