Plugin de grille de données et d'arbre jQuery EasyUI -Treegrid

jQuery EasyUI Plugin

Dépendances

• datagrid

Utilisation

Créez un treegrid à partir de balisage HTML. Dans la plupart des cas, le treegrid suit la même structure et le même format que le 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>

Créez un treegrid avec JavaScript.

<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}
    ]]
});

Propriétés

Les propriétés héritent du datagrid. Voici les propriétés ajoutées pour le treegrid.

Événements

Les événements héritent de la datagrid. Voici les événements ajoutés pour le treegrid.

Méthodes

De nombreuses méthodes nécessitent un paramètre nommé 'id', qui représente la valeur du nœud de l'arbre.

// load and send some request parameters
$('#tg').treegrid('load', {
    q: 'abc',
    name: 'name1'
});

$('#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

// 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 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'
        }
    });
}

$('#tt').treegrid('update',{
    id: 2,
    row: {
        name: 'new name',
        iconCls: 'icon-save'
    }
});

jQuery EasyUI Plugin