javascript - not - Cómo mostrar elementos de datos anidados en el complemento bootstrap del árbol FuelUX

tooltip bootstrap 4

Question

Estoy tratando de implementar el complemento de árbol FuelUX y he seguido el ejemplo hasta ahora, pero necesito una estructura anidada. ¿Asumo que el plugin de árbol es capaz de manejar niños anidados? ¿es esto correcto?

  var treeDataSource = new TreeDataSource({
     data: [
        { name: ''Test Folder 1'', type: ''folder'', additionalParameters: { id: ''F1'' },
          data: [
            { name: ''Test Sub Folder 1'', type: ''folder'', additionalParameters: { id: ''FF1'' } },
            { name: ''Test Sub Folder 2'', type: ''folder'', additionalParameters: { id: ''FF2'' } },
            { name: ''Test Item 2 in Folder 1'', type: ''item'', additionalParameters: { id: ''FI2'' } }
          ]
        },
        { name: ''Test Folder 2'', type: ''folder'', additionalParameters: { id: ''F2'' } },
        { name: ''Test Item 1'', type: ''item'', additionalParameters: { id: ''I1'' } },
        { name: ''Test Item 2'', type: ''item'', additionalParameters: { id: ''I2'' } }
      ],
  delay: 400
});

Hasta ahora, parece cargar los elementos de nivel superior en las carpetas abiertas en lugar de los elementos de datos anidados. Esto es lo que la demostración en su sitio también hace, pero esto no parece ser la interacción deseada. ¿Alguien puede confirmar si este es el comportamiento esperado?

¿Alguien puede indicarme que codifique dónde han creado un árbol de datos anidados utilizando este complemento? ¿Hay algo realmente obvio que me estoy perdiendo?

Answer 1

De hecho, estoy en el proceso de escribir una publicación de blog sobre este mismo tema.

La solución que he desarrollado no es para los débiles de corazón. El problema es que los objetos de la folder no admiten la instanciación con datos secundarios. Además, agregar niños no es una tarea trivial. Hice un violín rápido que puedes elegir para tener una idea de cómo lograr tu objetivo. Estoy usando esta misma solución solo que mi función addChildren llama a una ruta MVC a través de AJAX y recupera un objeto JSON para poblar los elementos dinámicamente.

Puedes, literalmente, copiar y pegar el código de mi violín y comenzar a usar la función addChildren .

Answer 2

Lamento la falta de documentación sobre esto; es necesario mejorarlo con seguridad.

La idea es que proporcione un dataSource al crear instancias del control de árbol, y que el origen de datos debe tener una función de data con la firma (opciones, devolución de llamada). Esa función de data se invocará en init de control para rellenar los datos del nivel raíz, y se volverá a llamar cada vez que se haga clic en una carpeta.

El trabajo de la función de data es mirar el parámetro de opciones que se rellena desde jQuery.data() en la carpeta jQuery.data() y responder con los datos de esa carpeta. El caso especial es la información de la carpeta raíz inicial, donde las opciones se completan desde cualquier jQuery.data () en la raíz del control div, que puede existir o no.

JQuery.data () en las carpetas se completa desde la matriz de objetos que proporciona en la devolución de llamada de la función de data . Puede ver en este ejemplo https://github.com/ExactTarget/fuelux/blob/master/index.html#L184-L189 hay una propiedad llamada additionalParameters pero realmente puede proporcionar cualquier propiedad adicional más allá del name y type requeridos para para usar más tarde (la próxima vez que se llame a su función de data ) para determinar en qué carpeta se hizo clic y devolver los datos para esa carpeta.

Nuestro ejemplo actual devuelve los mismos datos estáticos para cada carpeta, que no es el mejor ejemplo, así que espero mejorar esta situación ya sea creando un tutorial yo mismo o vinculándolo a uno si alguien me pega.

Answer 3

Siguiendo la respuesta de Adam, aquí hay un ejemplo que parece lograr lo que quieres ...

La función de datos para DataSource puede verificar si hay datos "sub" pasados ​​a través de opciones:

DataSource.prototype = {

    columns: function () {
        return this._columns;
    },

    data: function (options, callback) {

        var self = this;
        if (options.search) {
            callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page });
        } else if (options.data) {
            callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        } else {
            callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        }
    }
};

Demostración en Bootply: http://www.bootply.com/60761