jQuery EasyUI Complemento de cuadrícula de datos y árbol -Treegrid Cuadrícula de árbol

Complementos jQuery EasyUI

Dependencias

• datagrid

Uso

Cree una cuadrícula de árbol (treegrid) en el marcado HTML. En la mayoría de los casos, la cuadrícula de árbol (treegrid) sigue la misma estructura y formato que la cuadrícula de datos (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>

Cree una cuadrícula de árbol (treegrid) usando 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}
    ]]
});

Propiedades

Estas propiedades se extienden desde la cuadrícula de datos (datagrid); a continuación se muestran las propiedades agregadas para la cuadrícula de árbol (treegrid).

Eventos

Estos eventos se extienden desde la cuadrícula de datos (datagrid); a continuación se muestran los eventos agregados para la cuadrícula de árbol (treegrid).

Métodos

Muchos métodos requieren un parámetro llamado 'id', que representa el valor del nodo del árbol.

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

Complementos jQuery EasyUI