Usando gridjs.io, me gustaría realizar una búsqueda cuando se inicializa la tabla gridjs. Hablando de manera más general, me gustaría saber cómo usar programáticamente la búsqueda sin que el usuario use el campo de entrada.

Lo que intenté:

  • complemento de búsqueda habilitado (la búsqueda funciona perfectamente bien cuando se usa el campo de entrada)
  • Intenté "minicar" la entrada del usuario seleccionando el campo de entrada con javascript y cambiando su valor a mi palabra clave. Esto no filtró la tabla. Solo cuando se aplica el filtrado manualmente.

El código de ejemplo no funciona :

HTML

<div id="wrapper"></div>

Javascript

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ]
});
grid.render(document.getElementById("wrapper"));

// SEARCH/FILTER WITH JAVASCRIPT (NOT WORKING):
document.querySelector("input.gridjs-input").value = "John";

Resultado La cuadrícula debe filtrarse, pero aún muestra todas las filas. El evento de filtro no se envió. ¿Cómo puedo enviar el evento con javascript?

enter image description here

0
thomas 25 feb. 2021 a las 04:46

1 respuesta

La mejor respuesta

El elemento de entrada tiene un detector de eventos de entrada adjunto (Imagen)

Puede crear y enviar el evento usando este código:

// Find the gridjs searchbox and set the value
var el = document.querySelector('.gridjs-search-input');
el.value = newVal;

// Create and dispatch the event
var event = new Event('input', {
    bubbles: true,
    cancelable: true,
});
el.dispatchEvent(event);
1
koean 9 mar. 2021 a las 10:58