es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Se puede configurar el autocompletado del tabulador por celda y no por columna?

05 Aug, 2023 Programación

Necesito tener dos autocompletados en mi definición de Tabulator. Un usuario seleccionará un empleado – primer autocompletado – y luego cuando pase a seleccionar un contrato – segunda columna – el autocompletado debe estar vinculado al valor seleccionado en la primera columna.

A mi entender, Tabulator no tiene esta característica. Así que estaba pensando que al hacer clic en la celda “contrato”, se actualizaría la definición de esa columna – definición del autocompletado. No puedo hacer que funcione porque la función updateDefinition está con errores. Crea una nueva columna en lugar de actualizar su definición.

jsFiddle de trabajo.

table.on("cellEditing", function(cell){
    //e - el objeto de evento de clic
    //cell - componente de celda
    updateTitle(cell)
})
table.on("cellClick", function(e, cell){
    updateTitle(cell)
})

function updateTitle(cell){
    var field = cell.getField()
    if (field == "contract" || field =="id"){
        var column = cell.getColumn()
        var name = cell.getRow().getData().name
        console.log(field)   
        console.log(name)
        column.updateDefinition({title:"Título actualizado"}) 
    }
}

Estoy usando MaterializeCSS y su autocompletado, pero no sé cómo usarlo dentro de Tabulator. Y si es realmente una buena idea.

¿Podrías sugerir la mejor solución, por favor?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución sería utilizar el método getCellComponent para obtener la instancia de Autocomplete para ambas columnas y actualizar las opciones correspondientemente cuando se selecciona un valor en la primera columna. Aquí hay un ejemplo:

    // define las opciones de Autocomplete para la columna de empleados
var employeesAutocomplete = {
  // ...
};

// define las opciones de Autocomplete para la columna de contratos
var contractsAutocomplete = {
  // ...
};

// define las columnas para la tabla
var columns = [
  {title: "Empleado", field: "employee", editor: "autocomplete", editorParams: employeesAutocomplete},
  {title: "Contrato", field: "contract", editor: "autocomplete", editorParams: contractsAutocomplete},
  // ...
];

// crea la tabla
var table = new Tabulator("#example-table", {
  columns: columns,
  // ...
});

// obtén las instancias de Autocomplete para ambas columnas
var employeesEditor = table.getColumn("employee").getCellComponent().getEditor();
var contractsEditor = table.getColumn("contract").getCellComponent().getEditor();

// actualiza las opciones de Autocomplete para contratos cuando cambie el empleado
employeesEditor.on("change", function(value, text, choice) {
  contractsAutocomplete.lookup = function(query, callback) {
    // realiza una búsqueda basada en el empleado seleccionado
    var employeeId = choice ? choice.value : null;
    var results = [
      {value: "Contrato A", label: "Contrato A", employeeId: employeeId},
      {value: "Contrato B", label: "Contrato B", employeeId: employeeId},
      // ...
    ];
    callback(results);
  };
  contractsEditor.setParams(contractsAutocomplete);
});

    En este ejemplo, definimos las opciones de Autocomplete para ambas columnas y creamos la tabla con estas opciones. Luego obtenemos las instancias de Autocomplete para ambas columnas y actualizamos las opciones para Autocomplete de contratos cuando cambia el empleado. Logramos esto escuchando el evento change en el Autocomplete de empleados, actualizando la función lookup para Autocomplete de contratos para usar el empleado seleccionado y configurando las nuevas opciones para el editor de contratos. De esta manera, cuando el usuario selecciona un empleado en la primera columna, las opciones de Autocomplete para contratos se actualizan para mostrar solo contratos para ese empleado.

Comments are closed.