jQuery EasyUI grade de dados e elemento em árvore - Árvore

depender

• draggable
• droppable

uso

Tree (árvore) é definido no elemento <ul>. A etiqueta pode ser definido nós folha e sub-nós. Nó é <li> elemento ul na lista. A seguir mostra vai ser utilizado para a produção de elementos aninhados dentro do nó elemento árvore ul.

<Ul id = "tt" class = "easyui-árvore">
    <Li>
		<Span> Pasta </ ​​span>
		<Ul>
			<Li>
				<Span> Sub Pasta 1 </ span>
				<Ul>
					<Li> <span> <a href="#"> Ficheiro 11 </a> </ span> </ li>
					<Li> <span> Arquivo 12 </ span> </ li>
					<Li> <span> Arquivo 13 </ span> </ li>
				</ Ul>
			</ Li>
			<Li> <span> Arquivo 2 </ span> </ li>
			<Li> <span> Arquivo 3 </ span> </ li>
		</ Ul>
	</ Li>
    <Li> <span> File21 </ span> </ li>
</ Ul>

Tree (Árvore) também pode ser definida em um elemento vazio <ul>, você pode usar javascript para carregar dados.

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

$ ( "# Tt '). Tree ({
    url: 'tree_data.json'
});

Use loadFilter para manipular dados JSON de serviço de web ASP.NET.

$ ( "# Tt '). Tree ({
    url: ...,
    loadFilter: function (data) {
		Se (data.d) {
			voltar data.d;
		} Else {
			retornar dados;
		}
    }
});

formato de dados Tree (Árvore de Dados Format)

Cada nó pode incluir os seguintes atributos:

• id: id do nó, é importante para carregar dados remotos.
• texto: texto a ser exibido nó.
• Estado: status do nó, "aberta" ou "fechada", o padrão é "aberta". Quando ajustado para "fechado", o nó tem nós filhos, e carregá-los a partir de um local remoto.
• verificado: Indica se o nó é selecionado.
• atributos: um nó para adicionar atributos personalizados.
• filhos: define a matriz de nós nós filho.

exemplo:

[{
    "Id": 1,
    "Texto": "Folder1",
    "IconCls": "icon-salvar",
    "Crianças": [{
		"Texto": "File1",
		"Verificado": true
    }, {
		"Texto": "Livros",
		"Estado": "aberto",
		"Atributos": {
			"URL": "/ demo / livro / abc",
			"Preço": 100
		},
		"Crianças": [{
			"Texto": "PhotoShop",
			"Verificado": true
		}, {
			"Id": 8,
			"Text": "Sub Bookds",
			"Estado": "fechada"
		}]
    }]
}, {
    "Texto": "Idiomas",
    "Estado": "fechada",
    "Crianças": [{
		"Text": "Java"
    }, {
		"Text": "C #"
    }]
}]

árvore Asynchronous

Built-in suporte para o modo de carregamento árvore assíncrona, assim os usuários podem criar uma árvore vazia, em seguida, especificar um do lado do servidor de dados retorna dinâmicas JSON, de acordo com a demanda de árvore de modo assíncrono preenchido. Aqui está um exemplo:

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

Árvore de URL 'get_data.php' carregado. nós filho depende do estado nó pai é carregado. Quando você expandir um nó fechado, se o nó não tem filhos carregado, ele vai enviar para o valor do ID do nó do servidor como http chamado 'id' parâmetros de pedido de URL acima definidos, a fim de recuperar os nós filhos.

Olhe para os dados retornados do servidor:

[{
    "Id": 1,
    "Text": "Nó 1",
    "Estado": "fechada",
    "Crianças": [{
		"Id": 11,
		"Text": "Nó 11"
    }, {
		"Id": 12,
		"Text": "Nó 12"
    }]
}, {
    "Id": 2,
    "Text": "Nó 2",
    "Estado": "fechada"
}]

Nós 1 e 2 estão fechados, quando você expandir um nó, vai mostrar a sua criança nós diretamente. Quando você expande o nó 2, o servidor irá enviar o valor (2), a fim de recuperar os nós filho.

Este tutorial para criar um árvores assíncronos demonstram como escrever código para o servidor de acordo com a demanda para retornar os dados de árvore.

propriedade

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

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

evento

Muitos eventos requerem uma função de retorno de parâmetros 'nó', que incluem as seguintes propriedades:

• ID: ligado ao valor de identidade do nó.
• texto: texto a ser exibido.
• iconCls: para exibir a classe ícone css.
• verificados: se o nó é selecionado.
• Estado: status do nó, "aberta" ou "fechada".
• atributos: bind para atributo personalizado nó.
• target: DOM objetos alvos.

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

caminho

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