jQuery EasyUI 拡張 -編集可能なデータグリッド（Editable DataGrid）

jQuery EasyUI 扩展jQuery EasyUI 拡張

使い方

HTMLタグでデータグリッド（datagrid）を作成する

    <table id="tt" style="width:600px;height:200px"
            title="Editable DataGrid"
            singleSelect="true">
        <thead>
            <tr>
                <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
                <th field="productid" width="100" editor="text">Product ID</th>
                <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
                <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
                <th field="attr1" width="150" editor="text">Attribute</th>
            </tr>
        </thead>
    </table>

データグリッド（datagrid）を編集可能にする

$('#tt').edatagrid({
    url: 'datagrid_data.json',
    saveUrl: ...,
    updateUrl: ...,
    destroyUrl: ...
});

データグリッドの行をダブルクリックして編集操作を開始できます。また、saveUrl、updateUrl、destroyUrl プロパティを設定して、クライアントとサーバー間のデータを自動的に同期させることもできます。

プロパティ

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

名前 型 説明 デフォルト値
destroyMsg object 行を破棄するときに表示する確認ダイアログのメッセージ。 
destroyMsg:{
    norecord:{    // when no record is selected
        title:'Warning',
        msg:'No record is selected.'
    },
    confirm:{    // when select a row
        title:'Confirm',
        msg:'Are you sure you want to delete?'
    }
}
autoSave boolean true に設定すると、データグリッドの外側をクリックしたときに編集中の行が自動的に保存されます。 false
url string サーバーからデータを取得するURL。 null
saveUrl string サーバーにデータを保存し、追加された行を返すURL。 null
updateUrl string サーバーにデータを更新し、更新された行を返すURL。 null
destroyUrl string サーバーに 'id' パラメータを送信してその行を破棄するURL。 null
tree selector 対応するツリーコンポーネントのツリーセレクタを表示する。 null
treeUrl string ツリーのデータを取得するURL。 null
treeDndUrl string ドラッグ＆ドロップ操作を処理するURL。 null
treeTextField string ツリーのテキストフィールド名を定義する。 name
treeParentField string ツリーの親ノードフィールド名を定義する。 parentId

イベント

このイベントはデータグリッド（datagrid）から拡張されています。以下は編集可能なデータグリッド（edatagrid）に追加されたイベントです。

名前 パラメータ 説明
onAdd index,row 新しい行が追加されたときにトリガーされます。
onEdit index,row 行が編集されたときにトリガーされます。
onBeforeSave index 行が保存される前にトリガーされ、false を返すと保存アクションがキャンセルされます。
onSave index,row 行が保存されたときにトリガーされます。
onDestroy index,row 行が破棄されたときにトリガーされます。
onError index,row サーバーエラーが発生したときにトリガーされます。
サーバーは 'isError' プロパティが true に設定された行を返し、エラーが発生したことを示す必要があります。

コード例：

//server side code
echo json_encode(array(
    'isError' => true,
    'msg' => 'error message.'
));

//client side code
$('#dg').edatagrid({
    onError: function(index,row){
        alert(row.msg);
    }
});

メソッド

このメソッドはデータグリッド（datagrid）から拡張されています。以下は編集可能なデータグリッド（edatagrid）に追加または書き換えられたメソッドです。

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
enableEditing none データグリッド（datagrid）の編集を有効にします。
disableEditing none データグリッド（datagrid）の編集を無効にします。
editRow index 指定された行を編集します。
addRow index 指定された行インデックスに新しい行を追加します。
index パラメータが指定されていない場合は、最後の位置に新しい行を追加します。

コード例：

// append an empty row
$('#dg').edatagrid('addRow');

// append an empty row as first row
$('#dg').edatagrid('addRow',0);

// insert a row with default values
$('#dg').edatagrid('addRow',{
    index: 2,
    row:{
        name:'name1',
        addr:'addr1'
    }
});
saveRow none 編集中の行を保存し、サーバーに送信します。
cancelRow none 行の編集をキャンセルします。
destroyRow index 現在選択されている行を破棄します。
index パラメータが指定されていない場合は、選択されているすべての行を破棄します。

コード例：

// destroy all the selected rows
$('#dg').edatagrid('destroyRow');

// destroy the first row
$('#dg').edatagrid('destroyRow', 0);

// destroy the specified rows
$('#dg').edatagrid('destroyRow', [3,4,5]);

jQuery EasyUI インスタンスをダウンロード

jquery-easyui-edatagrid.zip

jQuery EasyUI 扩展jQuery EasyUI 拡張 その他の拡張