cloudpivot-sheet-filter

子表筛选工具，支持多字段、多条件、不同逻辑的筛选操作。

适用云枢版本

云枢版本 6.14，应该6版本都兼容。其他版本需自行测试。

安装

通过 CDN 使用

ES 模块方式

import("https://cdn.jsdelivr.net/npm/cloudpivot-sheet-filter/+esm").then(
  ({ default: sheetFilter, FilterOperators }) => {
    // 此处写自己的代码...
  },
);

基本使用

// 导入模块
import("https://cdn.jsdelivr.net/npm/cloudpivot-sheet-filter/+esm").then(
  ({ default: sheetFilter, FilterOperators }) => {
    // 子表筛选定义
    var sheetF = null;

    // 子表筛选类实例化
    sheetF = new sheetFilter();

    // 添加筛选条件：检结果等于NG
    // 第一个参数 'Radio1719304490857' 是子表内的控件的编码
    sheetF.addFilter("Radio1719304490857", FilterOperators.EQ, "NG");

    // 启用筛选
    // 第一个参数 this.Sheet1719303475853 是子表的对象
    sheetF.filter(this.Sheet1719303475853, true);

    // 关闭筛选
    // sheetF.filter(this.Sheet1719303475853, false);
  },
);

高级用法

预筛选与应用筛选

使用预筛选方法可以在不修改子表的情况下检查筛选结果，适合用于控制UI元素的显示状态。

// 添加筛选条件
sheetF.addFilter("Radio1719304490857", FilterOperators.EQ, "NG");

// 预筛选，获取筛选结果但不修改子表
const previewResult = sheetF.previewFilter(this.Sheet1719303475853);

// 根据预筛选结果控制switch开关的可见性
if (previewResult !== null) {
  // 有筛选结果，显示switch开关
  showFilterSwitch(true);

  // 用户点击switch开关时应用筛选
  applyFilterButton.onclick = () => {
    sheetF.applyFilter(this.Sheet1719303475853, previewResult);
  };
} else {
  // 无筛选结果，隐藏switch开关或禁用
  showFilterSwitch(false);
  alert("当前筛选条件无匹配结果，无法进行筛选操作");
}

多条件筛选

// 链式调用添加多个筛选条件
// 每个 addFilter 的第一个参数都是子表内的控件的编码
sheetF
  .addFilter("Radio1719304490857", FilterOperators.EQ, "NG") // 控件编码：Radio1719304490857
  .addFilter("Number1719304500123", FilterOperators.GT, 100) // 控件编码：Number1719304500123
  .addFilter("Date1719304510456", FilterOperators.LTE, new Date()); // 控件编码：Date1719304510456

设置筛选逻辑

// 设置 AND 逻辑（默认）
sheetF.setAndLogic();

// 设置 OR 逻辑
sheetF.setOrLogic();

// 获取当前筛选逻辑
const logic = sheetF.getLogic();
console.log("当前筛选逻辑:", logic); // 'AND' 或 'OR'

清除筛选条件

// 清除所有筛选条件
sheetF.clearFilters();

检查筛选状态

// 检查是否已筛选
const isFiltered = sheetF.isFiltered();
console.log("是否已筛选:", isFiltered); // true 或 false

操作符说明

| 操作符 | 描述 | 值 | | ------------------- | -------- | ----- | | FilterOperators.EQ | 等于 | 'eq' | | FilterOperators.NEQ | 不等于 | 'neq' | | FilterOperators.LT | 小于 | 'lt' | | FilterOperators.LTE | 小于等于 | 'lte' | | FilterOperators.GT | 大于 | 'gt' | | FilterOperators.GTE | 大于等于 | 'gte' |

API 文档

sheetFilter 类

构造函数

const sheetF = new sheetFilter();

方法

setAndLogic()

设置筛选逻辑为 AND（默认）。

setOrLogic()

设置筛选逻辑为 OR。

getLogic()

返回当前筛选逻辑，'AND' 或 'OR'。

isFiltered()

返回筛选状态，true 表示已筛选，false 表示未筛选。

clearFilters()

清除所有筛选条件。

addFilter(columnKey, operator, value)

添加筛选条件。

• columnKey: 子表内的控件的编码（字符串）
• operator: 操作符（字符串或 FilterOperators 常量）
• value: 筛选值（任意类型）
• 返回值：当前实例，支持链式调用

filter(key, enable)

执行筛选操作。

• key: 子表的对象
• enable: true 启用筛选，false 关闭筛选

previewFilter(key)

预筛选子表，获取筛选结果但不修改子表对象。

• key: 子表的对象
• 返回值：筛选结果 { index: [], value: [] } 或 null（无匹配结果）

applyFilter(key, filteredList)

应用筛选，根据预筛选结果修改子表对象。

• key: 子表的对象
• filteredList: 预筛选结果（可选，如果不提供则自动执行预筛选）
• 返回值：true 成功应用筛选，false 筛选失败

cancelFilter(key)

取消筛选，恢复原始子表数据。

• key: 子表的对象
• 返回值：true 成功取消筛选，false 取消失败

完整示例

// 导入模块
import("https://cdn.jsdelivr.net/npm/cloudpivot-sheet-filter/+esm").then(
  ({ default: sheetFilter, FilterOperators }) => {
    // 实例化
    const sheetF = new sheetFilter();

    // 设置筛选逻辑为 OR
    sheetF.setOrLogic();

    // 添加多个筛选条件
    // 第一个参数都是子表内的控件的编码
    sheetF
      .addFilter("Radio1719304490857", FilterOperators.EQ, "NG") // 控件编码：Radio1719304490857
      .addFilter("Number1719304500123", FilterOperators.GT, 100); // 控件编码：Number1719304500123

    // 启用筛选
    // 第一个参数 this.Sheet1719303475853 是子表的对象
    sheetF.filter(this.Sheet1719303475853, true);

    // 检查筛选状态
    console.log("是否已筛选:", sheetF.isFiltered());

    // 稍后关闭筛选
    setTimeout(() => {
      // 第一个参数 this.Sheet1719303475853 是子表的对象
      sheetF.filter(this.Sheet1719303475853, false);
      console.log("筛选已关闭");
    }, 5000);
  },
);

注意事项

1. 筛选操作会修改原始子表数据，关闭筛选时会恢复原始数据。
2. 支持的数据类型包括字符串、数字、日期等。
3. 操作符大小写敏感，但建议使用 FilterOperators 常量以确保正确性。
4. 当筛选逻辑为 AND 时，所有条件必须同时满足；当筛选逻辑为 OR 时，只要满足任一条件即可。

浏览器兼容性

• 支持所有现代浏览器
• 支持 ES6+ 环境
• 支持通过 CDN 直接使用