EasyUI データグリッドの詳細ビューの使用ガイド

2年 ago
蓮, 翼
1 minute

EasyUI Datagridは、jQueryをベースに拡張されたプラグインで、表データの表示や編集に使用されます。このプラグインでは、DetailView機能を利用することで、詳細情報を表示したり非表示にしたりできます。

使用方法は次のとおりです。

  1. jQueryライブラリとeasyuiのCSS/JSファイルをインポートする。
  2. HTMLで、Datagridのコンテナとしてdiv要素を作成する
  3. JavaScript で、datagrid メソッドを使用してデータグリッドインスタンスを作成し、detailview プロパティを呼び出して設定します。
$('#datagrid').datagrid({
url: 'data.json', // 数据源URL
detailview: true, // 启用DetailView功能
onExpandRow: function(index, row){ // 在展开行时触发的事件
$('#datagrid').datagrid('expandRow', index); // 调用expandRow方法展开行
},
onCollapseRow: function(index, row){ // 在折叠行时触发的事件
$('#datagrid').datagrid('collapseRow', index); // 调用collapseRow方法折叠行
}
});
  1. データソースURLから、テーブルの列および行データを含むJSON形式のデータを返す。
{
"columns": [[
{ "field": "id", "title": "ID" },
{ "field": "name", "title": "Name" },
{ "field": "age", "title": "Age" }
]],
"rows": [
{ "id": 1, "name": "John", "age": 30 },
{ "id": 2, "name": "Jane", "age": 25 },
{ "id": 3, "name": "Tom", "age": 35 }
]
}
  1. Datagridの一番最後の列に詳細を展開・折り畳むボタンを追加
{
field: 'detail',
title: 'Detail',
width: 100,
formatter: function(value, row, index){
return '<a href="javascript:void(0);" onclick="expandRow('+index+')">Expand</a>';
}
}

function expandRow(index){
$('#datagrid').datagrid('expandRow', index);
}
  1. 必要に応じて、詳細を開示するコンテンツをカスタマイズできます。onExpandRowイベントでdatagridのgetRowDetailメソッドを使用して詳細コンテンツを取得し、関連操作を実行できます.
onExpandRow: function(index, row){
var detail = $('#datagrid').datagrid('getRowDetail', index);
detail.html('This is the detail information for row ' + index);
}

上記はEasyUIのDatagridとDetailViewの簡単な使い方の説明です。ニーズに合わせて設定やカスタマイズが可能で、より豊富な機能と表示効果を実現できます。

bannerAds