高亮显示搜索关键字支持表格内的文字。需要js来实现d

原官方的没有支持表格的说明

请增加文字高亮显示支持表格或el表格里面的内容

普通的表格跟el表格的内容支持
高亮显示搜索关键字支持表格内的文字。需要js来实现d

原生表格


缓存：缓存表格对象和上次查询结果以提升执行和渲染性能

获取原生表格操作对象并缓存

1. // 找到带有 fgcname 的父级 DIV
   
2. const con = document.querySelector("div[fgcname='表格1']");
   
3. let spreadInstance;
   
4. if (con) {
   
5.     console.log("找到父级 DIV:", con);
   
6.     spreadParent = con.querySelector(".spreadDiv[gcuielement='gcSpread']");
   
7.     // 获取绑定的 SpreadJS 实例
   
8.     spreadInstance = GC.Spread.Sheets.findControl(spreadParent);
   
9. }
   
10. 
    
11. // 获取工作表
    
12. const sheet = spreadInstance.getActiveSheet();
    
13. Forguncy.Page.getCell("obj_page").setValue(sheet);
    
14. 
    

复制代码

搜索对应列中的值后进行渲染

1. // 上一次查询的结果
   
2. let cachedRows = Forguncy.Page.getCell("row_page").getValue() || [];
   
3. const sheet = Forguncy.Page.getCell("obj_page").getValue();
   
4. 
   
5. var columnIndex = 0;  // 查找列
   
6. var searchValue = Forguncy.CommandHelper.getVariableValue("target");  // 查找的值
   
7. var rowCount = sheet.getRowCount();
   
8. var foundRows = [];  // 用于保存当前查询匹配的行号
   
9. 
   
10. clearPreviousHighlights(sheet, cachedRows);
    
11. 
    
12. // 遍历列，查找模糊匹配值
    
13. for (var row = 0; row < rowCount; row++) {
    
14.     var cellValue = sheet.getValue(row, columnIndex);
    
15.     if (cellValue && cellValue.indexOf(searchValue) !== -1) {
    
16.         foundRows.push(row);  
    
17.     }
    
18. }
    
19. 
    
20. // 打印结果
    
21. if (foundRows.length > 0) {
    
22.     console.log("值 '" + searchValue + "' 在以下行找到: " + foundRows.map(row => row + 1).join(", "));
    
23. } else {
    
24.     console.log("未找到值 '" + searchValue + "'。");
    
25. }
    
26. 
    
27. highlightRows(sheet, foundRows);
    
28. 
    
29. // 更新缓存为当前查询结果
    
30. cachedRows = foundRows.slice();
    
31. Forguncy.Page.getCell("row_page").setValue(cachedRows);
    
32. 
    
33. // 清除上一次高亮函数
    
34. function clearPreviousHighlights(sheet, cachedRows) {
    
35.     if (cachedRows.length > 0) {
    
36.         cachedRows.forEach(rowIndex => {
    
37.             let defaultStyle = new GC.Spread.Sheets.Style();
    
38.             sheet.getRange(rowIndex, 0, 1, sheet.getColumnCount()).setStyle(defaultStyle);
    
39.         });
    
40.     }
    
41. }
    
42. 
    
43. // 高亮当前查询匹配的行
    
44. function highlightRows(sheet, foundRows) {
    
45.     let highlightStyle = new GC.Spread.Sheets.Style();
    
46.     highlightStyle.font = "bold 14px Arial";
    
47.     highlightStyle.foreColor = "white";  
    
48.     highlightStyle.backColor = "green";  
    
49. 
    
50.     if (foundRows.length > 0) {
    
51.         foundRows.forEach(rowIndex => {
    
52.             sheet.getRange(rowIndex, 0, 1, sheet.getColumnCount()).setStyle(highlightStyle);
    
53.         });
    
54.     }
    
55. }
    

复制代码

EL表格

1. const wrapper = document.querySelector("div[fgcname='elTable']");
   
2. let highlightedRows = Forguncy.Page.getCell("cache_page").getValue() || []; // 用于存储已高亮的行
   
3. 
   
4. if (wrapper) {
   
5.     const tables = wrapper.querySelectorAll("table");
   
6.     tables.forEach(table => {
   
7.         const rows = table.querySelectorAll("tr"); // 获取所有行
   
8. 
   
9.         const columnIndex = 1; // 查询第2列（索引从0开始）
   
10.         const searchValue = Forguncy.Page.getCell("target").getValue(); // 要查询的特定值
    
11. 
    
12.         // 在查询新值之前，先恢复之前高亮的行样式
    
13.         highlightedRows.forEach(row => {
    
14.             const cells = row.querySelectorAll("td, th");
    
15.             cells.forEach(cell => {
    
16.                 cell.style.backgroundColor = ""; // 恢复背景色
    
17.                 cell.style.color = ""; // 恢复字体颜色
    
18.             });
    
19.         });
    
20. 
    
21.         // 清空已高亮的行记录
    
22.         highlightedRows = [];
    
23. 
    
24.         rows.forEach(row => {
    
25.             const cells = row.querySelectorAll("td, th"); // 获取每行的单元格
    
26.             if (cells[columnIndex] && cells[columnIndex].textContent.trim() === searchValue) {
    
27.                 // 高亮整行
    
28.                 cells.forEach(cell => {
    
29.                     cell.style.backgroundColor = "blue"; // 设置每个单元格的背景色
    
30.                     cell.style.color = "white"; // 设置每个单元格的字体颜色
    
31.                 });
    
32.                 highlightedRows.push(row); // 记录已高亮的行
    
33.             }
    
34.         });
    
35. 
    
36.         // 更新已高亮的行数据
    
37.         Forguncy.Page.getCell("cache_page").setValue(highlightedRows);
    
38.     });
    
39. 
    
40. } else {
    
41.     console.warn("未找到具有 fgcname='elTable' 的div元素。");
    
42. }
    

复制代码

写在末尾，因为是直接对页面上的数据查询，所以应该适用于数据源为数据库和JSON两种类型，这里是通过循环进行匹配查询的。

是这个效果吗

二麻子 发表于 2024-12-9 17:23
是这个效果吗

高亮显示搜索关键字支持表格内的文字。需要js来实现的你这样子是全部背景了

二麻子 发表于 2024-12-9 16:05
原生表格

能把关键启单个高亮起来吗？不要全亮单个可以不

mfkpie8 发表于 2024-12-10 13:06
能把关键启单个高亮起来吗？不要全亮单个可以不

这段代码添加到原先的代码中，这里提供了一个参数，由数组控制亮起的列。将原先控制高亮的方法注释掉，启用这个新方法。

1. // 高亮指定单列或者多列中的匹配行
   
2. function highlightRows(sheet, foundRows, targetColumns) {
   
3.     let highlightStyle = new GC.Spread.Sheets.Style();
   
4.     highlightStyle.font = "bold 14px Arial";
   
5.     highlightStyle.foreColor = "white";  
   
6.     highlightStyle.backColor = "green";  
   
7. 
   
8.     if (foundRows.length > 0) {
   
9.         foundRows.forEach(rowIndex => {
   
10.             targetColumns.forEach(colIndex => {
    
11.                 // 获取当前列的单元格
    
12.                 sheet.getRange(rowIndex, colIndex, 1, 1).setStyle(highlightStyle);
    
13.             });
    
14.         });
    
15.     }
    
16. }

复制代码

EL表格的则将代码修改为下面的

1. const wrapper = document.querySelector("div[fgcname='elTable']");
   
2. const searchValue = Forguncy.Page.getCell("target").getValue(); // 要查找的值
   
3. const columnIndex = 1; // 要查找的列索引（第2列）
   
4. const targetColumns = [0, 2]; // 高亮第1列和第3列
   
5. highlightRowsInTable(wrapper, searchValue, columnIndex, targetColumns);
   
6. 
   
7. 
   
8. 
   
9. // 高亮某列或整行的单元格
   
10. function highlightRowsInTable(wrapper, searchValue, columnIndex, targetColumns = null) {
    
11.     const tables = wrapper.querySelectorAll("table");
    
12. 
    
13.     // 记录高亮的行
    
14.     let highlightedRows =  Forguncy.Page.getCell("cache_page").getValue() || [];
    
15. 
    
16.      // 在查询新值之前，先恢复之前高亮的行样式
    
17.     highlightedRows.forEach(row => {
    
18.             const cells = row.querySelectorAll("td, th");
    
19.             cells.forEach(cell => {
    
20.                 cell.style.backgroundColor = "";
    
21.                 cell.style.color = "";
    
22.             });
    
23.         });
    
24. 
    
25.      // 清空已高亮的行记录
    
26.     highlightedRows = [];
    
27. 
    
28.     tables.forEach(table => {
    
29.         const rows = table.querySelectorAll("tr");
    
30. 
    
31.         rows.forEach(row => {
    
32.             const cells = row.querySelectorAll("td, th");
    
33. 
    
34.             // 如果当前列的单元格内容与搜索值匹配
    
35.             if (cells[columnIndex] && cells[columnIndex].textContent.trim() === searchValue) {
    
36.                 // 判断是否高亮特定列
    
37.                 if (targetColumns) {
    
38.                     targetColumns.forEach(colIndex => {
    
39.                         if (cells[colIndex]) {
    
40.                             cells[colIndex].style.backgroundColor = "blue";
    
41.                             cells[colIndex].style.color = "white";
    
42.                         }
    
43.                     });
    
44.                 } else {
    
45.                     // 如果没有指定列，则高亮整行
    
46.                     cells.forEach(cell => {
    
47.                         cell.style.backgroundColor = "blue";
    
48.                         cell.style.color = "white";
    
49.                     });
    
50.                 }
    
51.                 highlightedRows.push(row);
    
52.             }
    
53.         }
    
54.     );}
    
55.    
    
56.     );
    
57.     Forguncy.Page.getCell("cache_page").setValue(highlightedRows);
    
58.     console.log(`查询值 "${searchValue}" 的行已成功高亮。`);
    
59. }
    

复制代码

模糊查询 的逻辑可以吗？整个表格任意字。js模糊匹配字符串 亮符的逻辑

mfkpie8 发表于 2024-12-10 15:36
模糊查询 的逻辑可以吗？整个表格任意字。js模糊匹配字符串 亮符的逻辑

修改后的文件

二麻子 发表于 2024-12-10 17:21
修改后的文件

非常感谢您 大佬。我想全表格就是普通的表格。我再看一下您 的代码，是所有的列，好比ctrl+f查找的逻辑，
整个表格高亮可以不，在哪一个列里面。

你的意思是对所有列进行搜索？需要通过双重循环遍历每一个单元格，这个性能就没法保证了。