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

depender

• datagrid

uso

Criar grade de árvore (TreeGrid) na marcação HTML. Na maioria dos casos, a grade de árvore (TreeGrid) segue a grade de dados (datagrid) a mesma estrutura e formato.

<Table id = class "tt" = "easyui-TreeGrid" style = "width: 600px; height: 400px"
    -opções de dados = "url: 'get_data.php', IDField: 'id', treeField: 'nome'">
    <Thead>
		<Tr>
			<Th-opções de dados = "campo: 'nome', largura: 180"> Nome da tarefa </ th>
			<Th dados-options = "campo: 'pessoas', largura: 60, alinhamento: 'certo'"> Pessoas </ th>
			<Th-opções de dados = "campo: 'começar', largura: 80"> Comece a data </ ​​th>
			<-opções de dados Th = "campo: 'end', largura: 80"> Data de Término </ th>
		</ Tr>
    </ Thead>
</ Table>

Criando uma árvore usando javascript grade (TreeGrid).

<Table id = "tt" style = "width: 600px; height: 400px"> </ table>

$ ( "# Tt '). TreeGrid ({
    url: 'get_data.php',
    IDField: 'id',
    treeField: 'nome',
    colunas: [[
		{Título: "Nome da tarefa", campo: 'nome', width: 180},
		{Field: 'pessoas', título: 'pessoas', largura: 60, alinhamento: 'direita'},
		{Field: 'começar', título: 'Begin Date', largura: 80},
		{Field: 'end', título: 'Data Final', largura: 80}
    ]]
});

propriedade

A propriedade estende-se desde a grade de dados (datagrid), o seguinte é uma propriedade de uma grade de árvore (TreeGrid) acrescentou.

evento

O evento estendido a partir da grade de dados (datagrid), o seguinte é uma grade de árvore (TreeGrid) adicionar eventos.

caminho

Muitos métodos requerem um parâmetro 'id' chamado parâmetro representa o valor do nó da árvore.

// load and send some request parameters
$('#tg').treegrid('load', {
	q: 'abc',
	name: 'name1'
});

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

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

$('#tt').treegrid('update',{
	id: 2,
	row: {
		name: 'new name',
		iconCls: 'icon-save'
	}
});