¿Qué será el formato de respuesta ajax para los datos de grupo en tabulador?

Quiero saber el formato de respuesta ajax para los datos en la siguiente tabla?

enter image description here

En mi caso, los valores serán dinámicos también.

var table = new Tabulator("#example-table", {
    height:"311px",
    movableRows:true,
    groupBy:"col",
    groupValues:[["green", "blue", "purple"]]
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30},
        {title:"Name", field:"name", width:150},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, hozAlign:"center", width:120},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
    ],
});

Gracias.

Pregunta hecha hace 3 años, 5 meses, 0 días - Por cyberjedi


3 Respuestas:

  • Sólo hay dos tipos de respuesta ajax necesaria para la tabla, para los datos paginados y no pintados. todas las otras opciones de diseño son generadas por la propia tabla y no están representadas en la matriz de datos.

    Como no parece estar usando paginación el formato estándar sería un array codificado JSON:

    [
        {"id":1, "name":"bob", "age":"23"},
        {"id":2, "name":"jim", "age":"45"},
        {"id":3, "name":"steve", "age":"32"}
    ]
    

    Detalles de esto se pueden encontrar en Ajax Documentation

    Sólo tienes que asegurarte de establecer el groupBy propiedad en su definición de tabla y especificar la propiedad en cada objeto fila que debe ser utilizado para agruparlo:

    var table = new Tabulator("#example-table", {
        groupBy:"age",
    });
    

    Si quieres cambiar el campo que las cosas se agrupan una vez que se haya construido la mesa, puedes usar el setGroupBy función sobre la mesa.

    table.setGroupBy("gender");
    

    Detalles de esto se pueden encontrar en Grouping Data Documentation

    Grupo por valores

    Cuando elija utilizar el groupValues opción, todo lo que hace es decirle a Tabulator que esos son los grupos que serán creados, en su caso "verde", "azul" y "purple".

    El groupBy opción entonces le dice a Tabulator qué campo en la fila datos para ver para determinar en qué grupo deben estar los datos, cuando el valor de ese campo coincide con uno de los valores en su groupValues array que se añade a ese grupo.

    Si no quieres que esa columna sea visible en los datos que está bien, simplemente establece la visible propiedad de la columna a false y se ocultará de la vista pero todavía se utiliza para agrupar los datos

     {title:"Favourite Color", field:"col", visible:false},
    

    Respondida el Dec 17, 2020 a las 03:04 - por byteninja8245

    Votos positivos: 0 | Votos negativos: 0

  • Para obtener el formato de respuesta ajax para los datos en la tabla de Tabulator, primero necesitas tener claro cómo se están cargando los datos en la tabla. En el código que proporcionaste, no se ve explícitamente un método ajax para cargar los datos, por lo que asumiré que los datos se están cargando de alguna fuente externa.

    La respuesta ajax típicamente será un array de objetos JSON, donde cada objeto representa una fila de la tabla y cada propiedad del objeto representa una columna.

    Un ejemplo de un formato de respuesta ajax para los datos de la tabla podría ser el siguiente:

    json
    [
      {
        "name": "John Doe",
        "progress": 50,
        "gender": "Male",
        "rating": 4,
        "col": "blue",
        "dob": "1990-05-15",
        "car": true
      },
      {
        "name": "Jane Smith",
        "progress": 75,
        "gender": "Female",
        "rating": 5,
        "col": "green",
        "dob": "1985-10-20",
        "car": false
      },
      // Agregar más objetos según sea necesario
    ]
    

    Este sería un ejemplo básico de cómo podría ser el formato de respuesta ajax para los datos de la tabla. Cada objeto representa una fila y las propiedades de cada objeto corresponden a las columnas de la tabla.

    Por supuesto, este es un ejemplo simplificado y en tu caso los valores serán dinámicos, por lo que deberás asegurarte de ajustar la estructura de la respuesta ajax según tus necesidades y la estructura de tus datos.

    Respondida el Dec 18, 2020 a las 03:03 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El formato de respuesta Ajax para los datos del grupo en Tabulator dependerá de la configuración de tu tabla y de los datos subyacentes. Sin embargo, en general, el formato de respuesta será un objeto JSON que contenga una matriz de grupos. Cada grupo será un objeto con las siguientes propiedades:

    key: La clave del grupo. values: Una matriz de los valores del grupo. rows:* Una matriz de los datos de las filas del grupo.

    En tu caso específico, el formato de respuesta Ajax podría verse así:

    json
    {
      "groups": [
        {
          "key": "green",
          "values": ["green"],
          "rows": [
            {
              "name": "Bob",
              "progress": 10,
              "gender": "male",
              "rating": 3,
              "col": "green",
              "dob": "1980-01-01",
              "car": true
            },
            {
              "name": "Alice",
              "progress": 20,
              "gender": "female",
              "rating": 4,
              "col": "green",
              "dob": "1985-01-01",
              "car": false
            }
          ]
        },
        {
          "key": "blue",
          "values": ["blue"],
          "rows": [
            {
              "name": "Tom",
              "progress": 30,
              "gender": "male",
              "rating": 5,
              "col": "blue",
              "dob": "1990-01-01",
              "car": true
            },
            {
              "name": "Jane",
              "progress": 40,
              "gender": "female",
              "rating": 6,
              "col": "blue",
              "dob": "1995-01-01",
              "car": false
            }
          ]
        },
        {
          "key": "purple",
          "values": ["purple"],
          "rows": [
            {
              "name": "John",
              "progress": 50,
              "gender": "male",
              "rating": 7,
              "col": "purple",
              "dob": "2000-01-01",
              "car": true
            },
            {
              "name": "Mary",
              "progress": 60,
              "gender": "female",
              "rating": 8,
              "col": "purple",
              "dob": "2005-01-01",
              "car": false
            }
          ]
        }
      ]
    }
    

    Ten en cuenta que este es sólo un ejemplo y el formato de respuesta real puede variar dependiendo de tu configuración y datos específicos.

    Respondida el Dec 18, 2020 a las 03:08 - por Gemini

    Votos positivos: 0 | Votos negativos: 0