jQuery EasyUI Data Grid et Tree Plugin –Tree

jQuery EasyUI Plugin

Dépendances

• draggable
• droppable

Utilisation

L'arbre est défini dans un élément <ul>. Cette balise peut définir des nœuds feuilles et des nœuds enfants. Les nœuds seront des éléments <li> à l'intérieur de la liste ul. Ce qui suit montre les éléments utilisés pour créer des nœuds d'arbre imbriqués dans un élément ul.

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="../index.html">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

Un arbre peut également être défini dans un élément <ul> vide, et les données peuvent être chargées à l'aide de JavaScript.

<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});

Utilisez loadFilter pour traiter les données JSON provenant d'un service web ASP.NET.

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

Format des données d'arbre

Chaque nœud peut contenir les propriétés suivantes :

• id : L'id du nœud, qui est important pour le chargement de données distantes.
• text : Le texte du nœud à afficher.
• state : L'état du nœud, 'open' ou 'closed', la valeur par défaut est 'open'. Lorsqu'il est défini sur 'closed', le nœud a des nœuds enfants, et ils seront chargés depuis le site distant.
• checked : Indique si le nœud est coché.
• attributes : Attributs personnalisés ajoutés à un nœud.
• children : Un tableau de nœuds qui définit certains nœuds enfants.

Exemple :

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

Arborescence asynchrone

L'arborescence prend en charge un mode de chargement asynchrone intégré, ce qui permet aux utilisateurs de créer une arborescence vide, puis de spécifier un service côté serveur qui renvoie dynamiquement des données JSON pour alimenter l'arborescence de façon asynchrone selon les besoins. Voici un exemple :

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

L'arborescence est chargée via l'URL 'get_data.php'. Les nœuds enfants sont chargés en fonction de l'état du nœud parent. Lorsqu'un nœud fermé est développé, si aucun nœud enfant n'a été chargé pour lui, il envoie la valeur id du nœud au serveur via l'URL définie ci-dessus comme paramètre de requête HTTP nommé 'id' afin de récupérer les nœuds enfants.

Regardez les données renvoyées par le serveur :

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

Les nœuds 1 et 2 sont fermés. Lorsque le nœud 1 est développé, ses nœuds enfants seront affichés directement. Lorsque le nœud 2 est développé, value(2) sera envoyé au serveur pour récupérer les nœuds enfants.

Dans ce tutoriel,Création d'une arborescence asynchronemontre comment écrire du code serveur pour renvoyer les données de l'arborescence à la demande.

Propriétés

$('#tt').tree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});

$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});

Événements

De nombreuses fonctions de rappel d'événement nécessitent un paramètre 'node', qui inclut les propriétés suivantes :

• id : la valeur d'identifiant liée au nœud.
• text : le texte à afficher.
• iconCls : la classe CSS utilisée pour afficher l'icône.
• checked : indique si le nœud est coché.
• state : l'état du nœud, 'open' ou 'closed'.
• attributes : propriétés personnalisées liées au nœud.
• target : l'objet DOM cible.

$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});

// right click node and then display the context menu
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // select the node
        $('#tt').tree('select', node.target);
        // display context menu
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

Méthodes

var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');    // get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');    // get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);    // get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

jQuery EasyUI Plugin