1. Home
  2. menú de árbol jQuery EasyUI - árbol de la carga diferida nodos de la red

El mejor tutorial de menú de árbol jQuery EasyUI - árbol de la carga diferida nodos de la red en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

menú de árbol jQuery EasyUI - árbol de la carga diferida nodos de la red

A veces hemos sido totalmente rejilla árbol jerárquico de datos (TreeGrid). También queremos que el árbol de rejilla (TreeGrid) jerárquico nodo de carga diferida. En primer lugar, cargar sólo el nodo superior. Haga clic en el icono y, a continuación, expanda el nodo para cargar sus nodos secundarios. En este tutorial se muestra cómo crear un árbol con una rejilla de características de la carga inerte (TreeGrid).

Crear cuadrícula de árbol (TreeGrid) 

	<Tabla id = "prueba" title = "Explorador de carpetas" class = estilo "easyui-treegrid" = "width: 700px; altura: 300px"
			datos-options = "
				url: "datos / treegrid_data.json ',
				Método: «obtener»,
				rownumbers: true,
				campo ID: 'id',
				treeField: 'nombre',
				loadFilter: myLoadFilter
			">
		<Culata en T>
			<Tr>
				<= Th Campo ancho "nombre" = "220"> Nombre </ th>
				<Campo Th = "tamaño" width = "100" align = "right"> Tamaño </ th>
				<= Th Campo ancho "fecha" = "150"> Fecha de modificación </ th>
			</ Tr>
		</ Culata en T>
	</ Table>

Para colocar los nodos secundarios de carga, cada nodo hay que cambiar el nombre de la propiedad 'hijos'. Como se muestra en el código siguiente, 'hijos' Cambiar nombre de la propiedad 'niños1'. Al expandir un nodo, llamamos al método 'append' para cargar sus datos de nodos secundarios.

Código 'LoadFilter' 

	myLoadFilter función (datos, parentid) {
		setData función () {
			var TODO = [];
			for (var i = 0; i <data.length; i ++) {
				todo.push (datos [i]);
			}
			while (todo.length) {
				var = nodo todo.shift ();
				if (node.children) {
					node.state = "cerrada";
					node.children1 = node.children;
					node.children = indefinido;
					TODO = todo.concat (node.children1);
				}
			}
		}
		
		setData (datos);
		var tg = $ (this);
		var = opta tg.treegrid ( "opciones");
		opts.onBeforeExpand = function (fila) {
			si (row.children1) {
				tg.treegrid ( 'append', {
					los padres: la fila [opts.idField],
					datos: row.children1
				});
				row.children1 = indefinido;
				tg.treegrid ( 'ampliar', fila [opts.idField]);
			}
			row.children1 retorno == indefinido;
		};
		datos de retorno;
	}

Descargar ejemplos de jQuery EasyUI

jeasyui-tree-treegrid5.zip

Hot Tutorials

Contact US

menú de árbol jQuery EasyUI - árbol de la carga diferida nodos de la red
10/30