Necesito tener dos autocompletados en mi definición de Tabulador. Un usuario seleccionará un empleado, primero autocompletar, luego, cuando se mueva para seleccionar un contrato, segunda columna, el autocompletado debe estar vinculado al valor seleccionado en la primera columna.
Que yo sepa, Tabulator no tiene esa función. Así que estaba pensando que al hacer clic en la celda "contrato" se actualizaría la definición de columna (definición de autocompletar). No puedo hacer que funcione porque la función updateDefinition tiene errores . Crea una nueva columna en lugar de actualizar su definición.
Trabajando jsFiddle
table.on("cellEditing", function(cell){ //e - the click event object //cell - cell component 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:"Updated Title"}) } } Estoy usando MaterializeCSS y su función de autocompletar , pero no sé cómo usarlo inside de Tabulator. Y si en realidad es una buena idea.
¿Podría sugerir la mejor solución?
En su ejemplo, aún desea tener un autocompletado diferente por columna, solo desea que los valores de autocompletar "contrato" dependan del valor de la columna "nombre".
Puede pasar una función a la opción editorParams en lugar de un objeto, esa función se activará cada vez que se abra el editor y debería devolver el objeto params para el editor.
Con esto, puede crear una función que cambiará los values prop de los parámetros del editor en función del valor de la celda de nombre. en este ejemplo, asumiremos que estos valores se almacenan en una lista de búsqueda de contratos simple para el nombre de cada usuario, pero puede buscar esto como quiera
{title:"contract", field:"contract", editor:"autocomplete", editorParams: function(cell){ var contracts = { bob:["A", "B", "C"], jim:["D", "E", "F"], }; return { values: contracts[cell.getData().name] //set values list based on name cell value } }},