jQuery EasyUI cuadrícula de datos y widget de árbol - Árbol

confiar

• arrastrable
• lanzables

uso

Árbol (árbol) se define en el elemento <ul>. La etiqueta se puede definir nodos hoja y sub-nodos. El nodo es <li> ul elemento en la lista. A continuación se muestra serán utilizados para la producción de elementos anidados en el nodo de árbol de elementos ul.

<Id = ul class "tt" = "easyui-árbol">
    <Li>
		<Span> Carpeta </ ​​span>
		<Ul>
			<Li>
				<Span> Subcarpeta 1 </ span>
				<Ul>
					<Li> <span> <a href="#"> File 11 </a> </ span> </ li>
					<Li> <span> Archivo 12 </ span> </ li>
					<Li> <span> Archivo 13 </ span> </ li>
				</ Ul>
			</ Li>
			<Li> <span> Archivo 2 </ span> </ li>
			<Li> <span> Archivo 3 </ span> </ li>
		</ Ul>
	</ Li>
    <Li> <span> File21 </ span> </ li>
</ Ul>

Árbol (árbol) también se puede definir en un elemento vacío <ul>, puede usar javascript para cargar datos.

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

$ ( '# Tt'). Árbol ({
    url: 'tree_data.json'
});

Utilice loadFilter para manejar datos JSON servicio web de ASP.NET.

$ ( '# Tt'). Árbol ({
    url: ...,
    loadFilter: function (datos) {
		si (data.d) {
			data.d regresar;
		} Else {
			datos de retorno;
		}
    }
});

formato de datos de árbol (árbol de datos de formato)

Cada nodo puede incluir los siguientes atributos:

• id: ID del nudo, es importante para cargar datos remotos.
• Texto: texto que se mostrará nodo.
• Estado: estado de los ganglios, "abierta" o "cerrada", el valor por defecto es "abierta". Cuando se establece en "cerrado", el nodo tiene nodos secundarios, y cargarlos desde un sitio remoto.
• verificado: Indica si se selecciona el nodo.
• atributos: un nodo para añadir atributos personalizados.
• hijos: define el conjunto de nodos nodos secundarios.

Ejemplo:

[{
    "Id": 1,
    "Texto": "Carpeta1",
    "IconCls": "icono-save",
    "Niños": [{
		"Texto": "archivo1",
		"A cuadros": true
    }, {
		"Texto": "Libros",
		"Estado": "abierta",
		"Atributos": {
			"URL": "/ demo / libro / abc",
			"Precio": 100
		},
		"Niños": [{
			"Texto": "PhotoShop",
			"A cuadros": true
		}, {
			"Id": 8,
			"Texto": "Sub Bookds",
			"Estado": "cerrado"
		}]
    }]
}, {
    "Texto": "Idiomas",
    "Estado": "cerrado",
    "Niños": [{
		"Texto": "Java"
    }, {
		"Texto": "C #"
    }]
}]

árbol asíncrono

El soporte integrado para el modo de carga árbol asincrónica, por lo que los usuarios pueden crear un árbol vacío, a continuación, especifique un nivel de servidor de datos JSON rendimientos dinámicos, de acuerdo con la demanda de árbol de forma asíncrona poblado. He aquí un ejemplo:

<class = datos opciones-UL "easyui-árbol" = "url: 'get_data.php" "> </ ul>

Árbol por URL 'get_data.php' cargado. Los nodos hijos depende de que se carga el estado del nodo padre. Al expandir un nodo cerrado, si el nodo no tiene hijos cargados, es enviado a el valor de ID del nodo del servidor como http llamado "id" parámetros de la petición de URL definidos anteriormente, con el fin de recuperar los nodos secundarios.

Mira los datos devueltos por el servidor:

[{
    "Id": 1,
    "Texto": "nodo 1",
    "Estado": "cerrado",
    "Niños": [{
		"Id": 11,
		"Texto": "11 Nodo"
    }, {
		"Id": 12,
		"Texto": "12 Nodo"
    }]
}, {
    "Id": 2,
    "Texto": "Nodo 2",
    "Estado": "cerrado"
}]

Los nodos 1 y 2 están cerradas, al expandir un nodo, será un escaparate de su hijo nodos directamente. Al expandir el nodo 2, el servidor enviará el valor (2) con el fin de recuperar los nodos secundarios.

Este tutorial para crear un asíncronos árboles demostrar cómo escribir código en el servidor de acuerdo a la demanda para devolver los datos de los árboles.

propiedad

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

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

evento

Muchos eventos requieren una función de devolución de llamada parámetros "nodo", que incluyen las siguientes propiedades:

• id: unido al valor de identidad del nodo.
• Texto: texto que se mostrará.
• iconCls: Para visualizar el icono de la clase css.
• verificado: si se selecciona el nodo.
• Estado: estado de los ganglios, "abierta" o "cerrada".
• atributos: se unen al nodo de atributo personalizado.
• objetivo: objetos DOM objetivos.

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

camino

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