gridjs - 以编程方式搜索 gridjs 表（使用 javascript）

问题描述

使用gridjs.io，我想在初始化 gridjs 表时执行搜索。更一般地说，我想知道如何在用户不使用输入字段的情况下以编程方式使用搜索。

我尝试了什么：

启用搜索插件（使用输入字段时搜索工作正常）
我尝试通过使用 javascript 选择输入字段并将其值更改为我的关键字来“缩小”用户输入。这没有过滤表格。仅当手动键入过滤时才会应用。

示例代码不起作用：

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";

结果应过滤网格，但仍显示所有行。未分派过滤器事件。如何使用 javascript 调度事件？

标签： gridjs

输入元素附加了一个输入事件侦听器（图片）

您可以使用以下代码创建和调度事件：

// 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);

gridjs - 以编程方式搜索 gridjs 表（使用 javascript）

问题描述

解决方案

推荐阅读