基于Google Sheet的CRUD应用HTML Datatable搜索去重及范围调整问题

问题原因分析 #

• 重复结果：原有代码遍历每行的所有列，每匹配到一列就把当前行插入结果数组一次，同一行多列匹配就会重复插入多次
• 全列搜索：原有代码内层循环遍历了行内所有列，没有做范围限制

解决方案 #

直接修改Google Apps Script的searchData函数即可，两个需求可以同时实现，修改后代码如下：

function searchData(formObject){  
  var result = [];
  // 在这里设置你要搜索的前N列，比如前3列填3，前4列填4
  const SEARCH_COL_LIMIT = 3;
  if(formObject.searchtext){
      var data = Sheets.Spreadsheets.Values.get(globalVariables().spreadsheetId, globalVariables().dataRange).values;
      var searchKey = formObject.searchtext.toLowerCase();
      for(var i=0;i<data.length;i++){
        var rowMatched = false;
        // 内层循环只遍历到设置的列数上限
        for(var j=0;j < Math.min(SEARCH_COL_LIMIT, data[i].length);j++){
          // 提前判断单元格是否有值，避免空值报错
          if(data[i][j] && data[i][j].toLowerCase().includes(searchKey)){
            rowMatched = true;
            // 匹配到之后直接跳出列循环，避免同一行重复判断
            break;
          }
        }
        if(rowMatched){
          result.push(data[i])
        }
      }
  }
  return result;
}

改动点说明 #

1. 去重实现：新增rowMatched标记位，只要某行有一列匹配就标记为匹配，直接跳出当前行的列循环，整行只会插入结果数组一次，彻底解决重复问题
2. 搜索列范围限制：新增SEARCH_COL_LIMIT常量，修改内层循环的终止条件为小于该常量即可，你需要前3列就设为3、前4列就设为4，加了Math.min是为了避免部分行长度不足设置的列数时报错
3. 额外优化：把搜索关键词转小写的操作提到循环外，减少重复计算；把search方法换成更适合判断包含关系的includes方法，逻辑更直观；新增空值判断避免空单元格调用toLowerCase时报错

其他代码说明 #

你现有的前端JS代码和HTML代码不需要做任何修改，只需要替换上述Google Apps Script的searchData函数即可正常生效。

内容的提问来源于stack exchange，提问作者goch1006