Migaro. 技術Tips

                       

ミガロ. 製品の技術情報
IBMiの活用に役立つ情報を掲載!


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

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


DataTables | Table plug-in for jQuery

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

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

DataTablesの使い方 – Qiita

 

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

==========================================================
<【ソース1】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;
==========================================================
<【ソース2】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月号より)

   
タイトルとURLをコピーしました