以编程方式搜索网格 js 表（使用 javascript）答案

【问题标题】：Programatically search gridjs table (with javascript)以编程方式搜索网格 js 表（使用 javascript）
【发布时间】：2021-02-25 01:46:02
【问题描述】：

使用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 调度事件？

【问题讨论】：

我发现需要在此处调度打字稿源代码中指定的搜索事件：github.com/grid-js/gridjs/blob/…，但不知道如何导入和访问此代码。

标签： gridjs

【解决方案1】：

输入元素有一个附加的输入事件监听器(Image)

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

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

【讨论】：