jQuery EasyUI データグリッドとツリープラグイン -Propertygrid プロパティグリッド

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.datagrid.defaults から拡張されています。$.fn.propertygrid.defaults を使用してデフォルトの defaults を上書きします。

プロパティグリッド（propertygrid）は、ユーザーがオブジェクトのプロパティを参照および編集するためのインターフェースを提供します。プロパティグリッドは、インライン編集が可能なデータグリッドです。非常に使いやすく、ユーザーは編集可能なプロパティの階層リストと、任意のデータ型を表す項目を簡単に作成できます。プロパティグリッドには、組み込みの並べ替えおよびグループ化機能が備わっています。

依存関係

  • datagrid

使用方法

マークアップ内にプロパティグリッド（propertygrid）を作成します。列は組み込まれているため、再度宣言する必要はありません。

<table id="pg" class="easyui-propertygrid" style="width:300px"
    data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>

JavaScript を使用してプロパティグリッド（propertygrid）を作成します。

<table id="pg" style="width:300px"></table>

$('#pg').propertygrid({
    url: 'get_data.php',
    showGroup: true,
    scrollbarSize: 0
});

プロパティグリッド（propertygrid）に新しい行を追加します。

var row = {
    name:'AddName',
    value:'',
    group:'Marketing Settings',
    editor:'text'
};
$('#pg').propertygrid('appendRow',row);

行データ（Row Data）

プロパティグリッド（propertygrid）はデータグリッド（datagrid）から拡張されています。行データの形式はデータグリッド（datagrid）と同じです。プロパティ行として、次のフィールドが必要です：
name：フィールド名。
value：編集されるフィールドの値。
group：グループのフィールド値。
editor：プロパティ値を編集するエディター。

行データの例：

{"total":4,"rows":[
    {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
    {"name":"Address","value":"","group":"ID Settings","editor":"text"},
    {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
    {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
        "type":"validatebox",
        "options":{
            "validType":"email"
        }
    }}
]}

プロパティ

このプロパティはデータグリッド（datagrid）から拡張されています。以下はプロパティグリッド（propertygrid）に追加されたプロパティです。

名前 型 説明 デフォルト値
showGroup boolean プロパティグループを表示するかどうかを定義します。 false
groupField string グループのフィールド名を定義します。 group
groupFormatter function(group,rows) グループの値をフォーマットする方法を定義します。この関数には次のパラメーターが含まれます：
group：グループのフィールド名。
rows：そのグループに属する行。

メソッド

このメソッドはデータグリッド（datagrid）から拡張されています。以下はプロパティグリッド（propertygrid）に追加されたメソッドです。

名前 パラメーター 説明
expandGroup groupIndex 指定されたグループを展開します。'groupIndex' パラメーターが割り当てられていない場合は、すべてのグループを展開します。
collapseGroup groupIndex 指定されたグループを折りたたみます。'groupIndex' パラメーターが割り当てられていない場合は、すべてのグループを折りたたみます。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能