jQuery EasyUI Data Grid und Tree Plugin -Treegrid

jQuery EasyUI 插件jQuery EasyUI Plugin

Erbt von $.fn.datagrid.defaults. Überschreiben Sie die Standardwerte über $.fn.treegrid.defaults.

Das Treegrid wird verwendet, um hierarchische Daten im Rasterformat anzuzeigen. Es basiert auf dem Datagrid und kombiniert die Treeview und das editierbare Raster. Das Treegrid ermöglicht es Ihnen, anpassbare, asynchron erweiterbare Zeilen zu erstellen und hierarchische Daten in mehreren Spalten anzuzeigen.

Abhängigkeiten

  • datagrid

Nutzung

Erstellen Sie ein Treegrid aus HTML-Markup. In den meisten Fällen folgt das Treegrid derselben Struktur und demselben Format wie das 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>

Erstellen Sie ein Treegrid mit 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}
    ]]
});

Eigenschaften

Die Eigenschaften erben vom Datagrid. Im Folgenden sind die Eigenschaften aufgeführt, die für das Treegrid hinzugefügt wurden.

Name Type Beschreibung Standardwert
idField string Definiert das Schlüsselnamenfeld, das den Baumknoten identifiziert. Erforderlich. null
treeField string Definiert das Feld des Baumknotens. Erforderlich. null
animate boolesch Legt fest, ob beim Erweitern oder Reduzieren eines Knotens ein Animationseffekt angezeigt wird. false
loader function(param,success,error) Definiert, wie Daten von einem Remote-Server geladen werden. Geben Sie false zurück, um die Aktion abzubrechen. Diese Funktion hat die folgenden Parameter:
param: Das Parameterobjekt, das an den Remote-Server übergeben wird.
success(data): Die Callback-Funktion, die aufgerufen wird, wenn die Daten erfolgreich abgerufen wurden.
error(): Die Callback-Funktion, die aufgerufen wird, wenn der Datenabruf fehlschlägt.
 JSON-Loader
loadFilter function(data,parentId) Gibt die gefilterten Daten zurück, die angezeigt werden sollen.

Ereignisse

Die Ereignisse erben vom datagrid. Die folgenden Ereignisse wurden für das treegrid hinzugefügt.

Name Parameters Beschreibung
onClickRow row Wird ausgelöst, wenn der Benutzer auf einen Knoten klickt.
onDblClickRow row Wird ausgelöst, wenn der Benutzer auf einen Knoten doppelklickt.
onClickCell field,row Wird ausgelöst, wenn der Benutzer auf eine Zelle klickt.
onDblClickCell field,row Wird ausgelöst, wenn der Benutzer auf eine Zelle doppelklickt.
onBeforeLoad row, param Wird ausgelöst, bevor eine Anforderung zum Laden von Daten gesendet wird. Geben Sie false zurück, um den Ladevorgang abzubrechen.
onLoadSuccess row, data Wird ausgelöst, wenn Daten erfolgreich geladen wurden.
onLoadError Argumente Wird ausgelöst, wenn das Laden von Daten fehlschlägt. Der Parameter 'arguments' ist derselbe wie bei der Methode 'error' von jQuery.ajax.
onBeforeExpand row Wird ausgelöst, bevor ein Knoten erweitert wird. Geben Sie false zurück, um die Erweiterungsaktion abzubrechen.
onExpand row Wird ausgelöst, wenn ein Knoten erweitert wird.
onBeforeCollapse row Wird ausgelöst, bevor ein Knoten eingeklappt wird. Geben Sie false zurück, um die Einklappaktion abzubrechen.
onCollapse row Wird ausgelöst, wenn ein Knoten eingeklappt wird.
onContextMenu e, row Wird ausgelöst, wenn mit der rechten Maustaste auf einen Knoten geklickt wird.
onBeforeEdit row Wird ausgelöst, wenn der Benutzer mit der Bearbeitung eines Knotens beginnt.
onAfterEdit row,changes Wird ausgelöst, wenn der Benutzer die Bearbeitung beendet.
onCancelEdit row Wird ausgelöst, wenn der Benutzer die Bearbeitung eines Knotens abbricht.

Methoden

Viele Methoden erfordern einen Parameter namens 'id', der den Wert des Baumknotens darstellt.

Name Parameters Beschreibung
options none Gibt die Optionen des treegrid zurück.
resize options Legt die Größe des treegrid fest. Der Parameter options enthält zwei Eigenschaften:
width: Die neue Breite des treegrid.
height: Die neue Höhe des treegrid.
fixRowHeight id Legt die Höhe der angegebenen Zeile fest.
loadData data Lädt die Daten des treegrid.
load param Lädt die erste Seite und zeigt sie an. Diese Methode ist seit Version 1.3.4 verfügbar.
Codebeispiel:
// load and send some request parameters
$('#tg').treegrid('load', {
    q: 'abc',
    name: 'name1'
});
reload id Lädt die Daten des treegrid neu. Wenn der Parameter 'id' übergeben wird, lädt er die angegebene Zeile des Baums neu; andernfalls lädt er alle Zeilen des Baums neu.
Codebeispiel:
$('#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 Lädt die Fußzeilendaten neu.
getData none Ruft die geladenen Daten ab.
getFooterRows none Ruft die Fußzeilendaten ab.
getRoot none Ruft den Wurzelknoten ab und gibt das Knotenobjekt zurück.
getRoots none Ruft die Wurzelknoten ab und gibt ein Array von Knoten zurück.
getParent id Ruft den übergeordneten Knoten ab.
getChildren id Ruft die untergeordneten Knoten ab.
getSelected none Ruft den ausgewählten Knoten ab und gibt ihn zurück. Gibt null zurück, wenn kein Knoten ausgewählt ist.
getSelections none Ruft alle ausgewählten Knoten ab.
getLevel id Ruft die Ebene des angegebenen Knotens ab.
finde id Sucht den angegebenen Knoten und gibt die Knotendaten zurück.
select id Wählt einen Knoten aus.
unselect id Hebt die Auswahl eines Knotens auf.
selectAll none Wählt alle Knoten aus.
unselectAll none Hebt die Auswahl aller Knoten auf.
collapse id Klappt einen Knoten ein.
expand id Klappt einen Knoten auf.
collapseAll id Klappt alle Knoten ein.
expandAll id Klappt alle Knoten auf.
expandTo id Klappt einen angegebenen Knoten ausgehend von der Wurzel auf.
toggle id Wechselt zwischen dem aufgeklappten und eingeklappten Zustand eines Knotens.
append param Hängt einige untergeordnete Knoten an einen übergeordneten Knoten an. Der Parameter 'param' enthält die folgenden Eigenschaften:
parent: Die ID des übergeordneten Knotens. Wenn nicht zugewiesen, wird er als Wurzelknoten angehängt.
data: Ein Array von Knotendaten.

Codebeispiel:
// 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 Fügt einen Knoten vor oder nach dem angegebenen Knoten ein. Der Parameter 'param' enthält die folgenden Eigenschaften:
before: Der ID-Wert des Knotens, vor dem eingefügt werden soll.
after: Der id-Wert des Knotens, nach dem eingefügt werden soll.
data: Die Daten des neuen Knotens.

Codebeispiel:
// 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'
        }
    });
}
Diese Methode ist seit Version 1.3.1 verfügbar.
entfernen id Entfernt den Knoten und seine Kindknoten.
pop id Entfernt einen Knoten und gibt nach dem Entfernen die Knotendaten einschließlich seiner Kindknoten zurück. Diese Methode ist seit Version 1.3.1 verfügbar.
refresh id Lädt den angegebenen Knoten neu.
update param Aktualisiert den angegebenen Knoten. Der Parameter 'param' enthält die folgenden Eigenschaften:
id: Die ID des zu aktualisierenden Knotens.
row: Die neuen Zeilendaten.

Codebeispiel:
$('#tt').treegrid('update',{
    id: 2,
    row: {
        name: 'new name',
        iconCls: 'icon-save'
    }
});
Diese Methode ist seit Version 1.3.1 verfügbar.
beginEdit id Startet die Bearbeitung eines Knotens.
endEdit id Beendet die Bearbeitung eines Knotens.
cancelEdit id Bricht die Bearbeitung eines Knotens ab.
getEditors id Ruft den Editor der angegebenen Zeile ab. Jeder Editor hat die folgenden Eigenschaften:
actions: Die Aktionen, die der Editor ausführen kann.
target: Das jQuery-Objekt des Ziel-Editors.
field: Der Feldname.
type: Der Typ des Editors.
getEditor param Ruft den angegebenen Editor ab. Der Parameter param enthält zwei Eigenschaften:
id: Die ID des Zeilenknotens.
field: Der Feldname.
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen