jQuery EasyUI データグリッドとツリープラグイン -Treegrid ツリーグリッド

jQuery EasyUI 插件jQuery EasyUI プラグイン

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

ツリーグリッド（treegrid）は、階層データをグリッド形式で表示するために使用されます。これはデータグリッド（datagrid）に基づいており、ツリービュー（treeview）と編集可能なグリッドを組み合わせたものです。ツリーグリッド（treegrid）を使用すると、カスタマイズ可能で非同期に展開できる行を作成し、複数列で階層データを表示できます。

依存関係

  • datagrid

使用法

HTML マークアップでツリーグリッド（treegrid）を作成します。ほとんどの場合、ツリーグリッド（treegrid）はデータグリッド（datagrid）と同じ構造と形式に従います。

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
    data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Task Name</th>
            <th data-options="field:'persons',width:60,align:'right'">Persons</th>
            <th data-options="field:'begin',width:80">Begin Date</th>
            <th data-options="field:'end',width:80">End Date</th>
        </tr>
    </thead>
</table>

JavaScript を使用してツリーグリッド（treegrid）を作成します。

<table id="tt" style="width:600px;height:400px"></table>

$('#tt').treegrid({
    url:'get_data.php',
    idField:'id',
    treeField:'name',
    columns:[[
        {title:'Task Name',field:'name',width:180},
        {field:'persons',title:'Persons',width:60,align:'right'},
        {field:'begin',title:'Begin Date',width:80},
        {field:'end',title:'End Date',width:80}
    ]]
});

プロパティ

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

名前 型 説明 デフォルト値
idField string ツリーノードを識別するキー名フィールドを定義します。必須です。 null
treeField string ツリーノードのフィールドを定義します。必須です。 null
animate boolean ノードが展開または折りたたまれるときにアニメーション効果を表示するかどうかを定義します。 false
loader function(param,success,error) リモートサーバーからデータを読み込む方法を定義します。false を返すとそのアクションをキャンセルします。この関数には次のパラメーターがあります：
param：リモートサーバーに渡すパラメーターオブジェクト。
success(data)：データの取得が成功したときに呼び出されるコールバック関数。
error()：データの取得が失敗したときに呼び出されるコールバック関数。
 json loader
loadFilter function(data,parentId) 表示するフィルタリングされたデータを返します。

イベント

このイベントはデータグリッド（datagrid）から拡張されています。以下はツリーグリッド（treegrid）用に追加されたイベントです。

名前 パラメーター 説明
onClickRow row ユーザーがノードをクリックしたときにトリガーされます。
onDblClickRow row ユーザーがノードをダブルクリックしたときにトリガーされます。
onClickCell field,row ユーザーがセルをクリックしたときにトリガーされます。
onDblClickCell field,row ユーザーがセルをダブルクリックしたときにトリガーされます。
onBeforeLoad row, param データ読み込みリクエストが送信される前にトリガーされます。false を返すと読み込みアクションをキャンセルします。
onLoadSuccess row, data データの読み込みが成功したときにトリガーされます。
onLoadError arguments データの読み込みが失敗したときにトリガーされます。arguments パラメーターは jQuery.ajax の 'error' メソッドと同じです。
onBeforeExpand row ノードが展開される前にトリガーされます。false を返すと展開アクションをキャンセルします。
onExpand row ノードが展開されたときにトリガーされます。
onBeforeCollapse row ノードが折りたたまれる前にトリガーされます。false を返すと折りたたみアクションをキャンセルします。
onCollapse row ノードが折りたたまれたときにトリガーされます。
onContextMenu e, row ノードを右クリックしたときにトリガーされます。
onBeforeEdit row ユーザーがノードの編集を開始したときにトリガーされます。
onAfterEdit row,changes ユーザーが編集を完了したときにトリガーされます。
onCancelEdit row ユーザーがノードの編集をキャンセルしたときにトリガーされます。

メソッド

多くのメソッドは、ツリーノードの値を表す 'id' という名前のパラメーターを必要とします。

名前 パラメーター 説明
options none ツリーグリッド（treegrid）のオプションを返します。
resize options ツリーグリッド（treegrid）のサイズを設定します。options パラメーターには2つのプロパティが含まれます：
width：ツリーグリッド（treegrid）の新しい幅。
height：ツリーグリッド（treegrid）の新しい高さ。
fixRowHeight id 指定された行の高さを固定します。
loadData data ツリーグリッド（treegrid）のデータを読み込みます。
load param 最初のページを読み込んで表示します。このメソッドはバージョン 1.3.4 以降で使用できます。
コード例：
// load and send some request parameters
$('#tg').treegrid('load', {
    q: 'abc',
    name: 'name1'
});
reload id ツリーグリッド（treegrid）のデータを再読み込みします。'id' パラメーターが渡された場合はツリーの指定された行を再読み込みし、それ以外の場合はツリーのすべての行を再読み込みします。
コード例：
$('#tt').treegrid('reload', 2);    // reload the row which value is equals to 2
$('#tt').treegrid('reload');    // reload the all rows
$('#tt').treegrid('reload', {id:2, q:'abc'});  // reload the specified row with 'q' parameter passing to server
reloadFooter footer フッターデータを再読み込みします。
getData none 読み込まれたデータを取得します。
getFooterRows none フッターデータを取得します。
getRoot none ルートノードを取得し、ノードオブジェクトを返します。
getRoots none ルートノードを取得し、ノード配列を返します。
getParent id 親ノードを取得します。
getChildren id 子ノードを取得します。
getSelected none 選択されたノードを取得して返します。選択されたノードがない場合は null を返します。
getSelections none 選択されたすべてのノードを取得します。
getLevel id 指定されたノードのレベルを取得します。
find id 指定されたノードを見つけて、そのノードデータを返します。
select id ノードを選択します。
unselect id ノードの選択を解除します。
selectAll none すべてのノードを選択します。
unselectAll none すべてのノードの選択を解除します。
collapse id ノードを折りたたみます。
expand id ノードを展開します。
collapseAll id すべてのノードを折りたたみます。
expandAll id すべてのノードを展開します。
expandTo id ルートから指定されたノードを展開します。
toggle id ノードの展開/折りたたみ状態を切り替えます。
append param 親ノードにいくつかの子ノードを追加します。'param' パラメーターには次のプロパティが含まれます：
parent：親ノードの id。割り当てられていない場合は、ルートノードとして追加されます。
data：配列、ノードのデータ。

コード例：
// append some nodes to the selected row
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
    parent: node.id,  // the node has a 'id' value that defined through 'idField' property
    data: [{
        id: '073',
        name: 'name73'
    }]
});
insert param 指定されたノードの前または後ろにノードを挿入します。'param' パラメーターには次のプロパティが含まれます：
before：前に挿入するノードの id 値。
after：後ろに挿入するノードの id 値。
data：新しいノードデータ。

コード例：
// insert a new node before the selected node
var node = $('#tt').treegrid('getSelected');
if (node){
    $('#tt').treegrid('insert', {
        before: node.id,
        data: {
            id: 38,
            name: 'name38'
        }
    });
}
このメソッドはバージョン 1.3.1 以降で使用できます。
remove id ノードとその子ノードを削除します。
pop id ノードをポップして、そのノードを削除した後、その子ノードを含むノードデータを返します。このメソッドはバージョン 1.3.1 以降で使用できます。
refresh id 指定されたノードを更新（リフレッシュ）します。
update param 指定されたノードを更新します。'param' パラメーターには次のプロパティが含まれます：
id：更新されるノードの id。
row：新しい行データ。

コード例：
$('#tt').treegrid('update',{
    id: 2,
    row: {
        name: 'new name',
        iconCls: 'icon-save'
    }
});
このメソッドはバージョン 1.3.1 以降で使用できます。
beginEdit id ノードの編集を開始します。
endEdit id ノードの編集を終了します。
cancelEdit id ノードの編集をキャンセルします。
getEditors id 指定された行のエディターを取得します。各エディターには次のプロパティがあります：
actions：エディターが実行できるアクション。
target：ターゲットエディターの jQuery オブジェクト。
field：フィールド名。
type：エディターのタイプ。
getEditor param 指定されたエディターを取得します。param パラメーターには2つのプロパティが含まれます：
id：行ノードの id。
field：フィールド名。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張