Kendo UI Treeview y JSON
datasource hierarchical-data (3)
Así que quiero crear un árbol con la vista de árbol de la interfaz de usuario kendo y vincularlo a un origen de datos jerárquico remoto que es un archivo JSON.
Quiero que el árbol resultante sea algo así como:
(Vehículos)
--(Carros)
---- FM-1100
---- FM-4200
- (Bicicletas)
---- FM-3100
(Personal)
--(Clientela)
---- GH-3000
- (VIP)
---- GH-3100
PD. Los nombres en () se supone que son algo así como las carpetas que contienen sus "hijos"
Revisé la documentación sobre todo lo anterior en el sitio web de kendo ui, pero estoy un poco confundido con toda la función de devolución de llamada que usa treeview para cargar las etapas más profundas cada vez que expandes un elemento en el árbol.
Tomemos el ejemplo en la documentación de kendo, por ejemplo:
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/Employees",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({dataSource: homogeneous});
Datos de muestra JSON:
{
"employees": [
{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":3,"FullName":"Carl Jenkins","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":4,"FullName":"Aston Miller","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":5,"FullName":"Damon Sherbands","HasEmployees":false,"ReportsTo":2},
{"EmployeeId":6,"FullName":"Dariel Hanks","HasEmployees":true,"ReportsTo":null},
{"EmployeeId":7,"FullName":"Jason Jackson","HasEmployees":false,"ReportsTo":3},
{"EmployeeId":8,"FullName":"Reylen Scribbs","HasEmployees":false,"ReportsTo":6}
]
}
Por lo tanto, tengo que configurar un servidor de reposo en "http://demos.kendoui.com/service/Employees" que acepte un GET del árbol que proporciona el "EmployeeId" y luego hace una búsqueda dentro del archivo y devuelve aquellos que "ReportTo" el "EmployeeId" recibido ... ?? ¿Y qué pasa la primera vez que el árbol quiere mostrar los nodos iniciales?
Algo como:
@Path("/Employees")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnEmployees(@QueryParam("EmployeeId") int accID) {
//search the employees.json
return "<head></head><body><pre>" + searchResultsString + "</pre></body>";
}
¿Cómo busco de manera eficiente un archivo JSON y devuelvo todos los resultados en una cadena? O si todo esto está mal, ¿alguien puede ayudarme a entender todo el GET y las cosas de devolución de llamada? ¿Quizás tiene que ver con jsonp de lo que he oído hablar? Un poco perdido aquí ...
Gracias por adelantado
¿Eres capaz de crear un archivo JSON con la siguiente estructura (similar a lo que propone en formato XML)?
[
{
"id" :100,
"text" :"tree",
"items":[
{
"id" :1,
"text" :"Vehicle",
"items":[
{
"id" :2,
"text" :"Cars",
"items":[
{
"id" :3,
"text":"FM-1100"
},
{
"id" :4,
"text":"FM-4200"
}
]
},
{
"id" :5,
"text" :"Bikes",
"items":[
{
"id" :6,
"text":"FM-3100"
}
]
}
]
},
{
"id" :7,
"text" :"Personnel",
"items":[
{
"id" :8,
"text" :"Personnel",
"items":[
{
"id" :9,
"text" :"Clients",
"items":[
{
"id" :10,
"text":"GH-3000"
}
]
},
{
"id" :11,
"text" :"VIPs",
"items":[
{
"id" :12,
"text":"GH-3100"
}
]
}
]
}
]
}
]
}
]
Donde cada elemento tiene un id un text que es lo que se mostrará en el árbol y un items matriz items contiene cada subelemento del árbol.
Si es así, tu código debería ser:
$.getJSON("/testTree.json", function (data) {
$("#treeview").kendoTreeView({
dataSource: data
});
})
Donde /testTree.json es la URL de su archivo JSON.
En realidad, debajo de la descripción de la lógica se generará la tabla de auto referencia como formato JSON y luego se pasará su contenido a la fuente de datos de la vista de árbol. He generado este método para el modelo de datos a continuación que ilustra que hay personal en la organización que tal vez tiene un gerente o empleador, si su base de datos es diferente, debe mirar el código y cambiar un poco sobre eso.
namespace Treeview.Models
{
public class Personal
{
public int ID { get; set; }
public int Parent_ID { get; set; } //reportsto field
public string Name { get; set; }
}
}
Para generar un origen de datos jerárquico como archivo JSON, siga estos pasos y para obtener una explicación completa, siga el enlace: paso 1: crear un método anidado llamado Treeview
public string Treeview(int itemID, string mystr, int j, int flag)
que su salida es json como cadena y obtener
1.1: itemID --> ID for current node
1.2: mystr --> previous json string
{in every self call this method , new string will be added to mystr}
1.3: j is inner counter
1.4: flag is illustrated if current node has child or not
paso 2: Primero llama a este método desde tu acción en mvc u otra parte de tu llamada a la aplicación, como Treeview(0,””,0,0)
2.1: Assume you do not know the current node so itemid is equal to zero
2.2: At first time you do not have any string for json
2.3: j = 0 as the same token
2.4: flag = 0 as the same token
paso 3: compruebe que este nodo actual tiene padre o no? 3.1: raíz del nodo principal: si solo ingresa a este método, suponga que tiene que
seleccione desde los nodos base de datos que no tienen padres y su ID padre es NULO aquí genere su cadena json como mystr = "[" 3.2 Nodo anidado: si este método ha sido llamado más de una vez, verifique todos los nodos que sus padres son iguales para itemid aquí genere su cadena json como mystr = ", item: ["
Paso 4: Ahora tiene una lista de datos que ha intentado en el tercer paso 4.1: Haga un ciclo foreach y llame a cada nodo y escríbalo como
4.2:
foreach (item in querylist)
mystr = { id: “” , text: “”
4.3: Dentro de este lazo, ¿este nodo tiene hijos o no?
Querylist= select personal where reportsto=item.id
4.3.1: **(It has child)** --> call again Treeview method such as
<code> mystr = Treeview (item.id, mystr, i,1) </code>
Now your item.id is crrent node, mystr is the whole string which is generated
until now i as j and flag is equal to one due to this node is parent and
has child
4.3.2: **(It has No Child && this node is not last node)**
**mystr =" }, "**
4.3.3: **(It has No Child && this node is last node)**
4.3.3.1: Count number of parent of this node
Foreach parent put **mystr = "}]"**
4.3.3.2: Count number of child of parent of this node
4.3.3.2.1: if (Child = 0) **mystr = "}]"**
4.3.3.2.2: if (Child > 0) **mystr = "}]"**
4.3.3.2.2.1: if (This node is the last child node
&& parent of this node is last parent)
**mystr = "},"**
4.3.3.2.2.2: if (This node is the last child node &&
parent of this node is last parent &&
flag=1 )
**mystr =" },"**
4.3.3.2.2.3: if (This node is the last child node &&
parent of this node is last parent &&
flag=0 )
**mystr =" }]"**
Espero que te ayude a obtener más información aquí :
hola: debe agregar propiedad de datos en el esquema:
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees",
data: "employees"
}
}