一、列名引用
计算列通过列名引用其它列的值参与计算。
• 简单列名直接写:单价 * 数量
• 列名含括号/#/空格等特殊符号时,用方括号包裹:[单价(元)] * [数量]、[#订单号]
• 点「插入列」下拉可自动插入(含符号的会自动加方括号)
二、运算符
• 算术:+ - * / %(% 为取余,如 10 % 3 = 1)
• 比较:> < >= <= = !=(= 等于,!= 不等于),结果为 是/否
• 逻辑:and(且)、or(或)、not(非),也可写 && || !
• 三元:条件 ? 真值 : 假值
• 文本拼接:& 把两边连成文本。完成率 & '%' = 85%、单价 & ' 元'
• 优先级:小括号 () 最高 → 乘除模 → 加减 → 文本拼接 & → 比较 → not → and → or → 三元
三、数学函数
• round(x, n) —— 四舍五入到 n 位小数。round(3.14159, 2) = 3.14;round(金额, 0) = 四舍五入取整
• abs(x) —— 绝对值。abs(-5) = 5
• floor(x) —— 向下取整。floor(3.9) = 3
• ceil(x) —— 向上取整。ceil(3.1) = 4
• max(a, b, ...) / min(a, b, ...) —— 最大值 / 最小值(可多个参数)
• mod(a, b) —— a 除以 b 的余数。mod(10, 3) = 1
四、字符串函数
• concat(a, b, ...) —— 拼接(也可用 & 运算符)。concat(姓, 名) 或 姓 & 名
• left(s, n) / right(s, n) —— 左/右取 n 个字符。left(订单号, 4)
• mid(s, start, len) —— 从第 start 个字符取 len 个(start 从 1 开始)。mid(身份证, 7, 8)
• len(s) —— 字符长度
• replace(s, 旧, 新) —— 替换。replace(编号, '-', '') 去掉横线
• upper(s) / lower(s) —— 转大写 / 小写
• trim(s) —— 去首尾空格
• contains(s, 子串) —— 是否包含,返回 是/否。contains(备注, '急')
• regexReplace(s, 正则, 替换串, 标志?) —— 正则替换,默认全部替换。regexReplace(编号, '\\D', '') 只留数字;regexReplace(电话, '(\\d{3})\\d{4}(\\d{4})', '$1****$2') 打码。替换串支持 $1 捕获组
• regexMatch(s, 正则, 标志?) —— 是否匹配正则,返回 是/否。regexMatch(手机, '^1[3-9]\\d{9}$') 校验手机号。标志 'i' 忽略大小写;regexReplace 传 'i' 时只替换第一处,'gi' 全部替换
• 正则中的反斜杠直接单写:'\\d+' 匹配数字、'\\s' 匹配空白,无需双写
五、日期函数
• year(d) / month(d) / day(d) —— 取年/月/日。year(订单日期)
• datediff(d1, d2, 单位) —— 两日期/时间差。单位:'second'(秒)、'minute'(分)、'hour'(时)、'day'(天)、'month'(月)。需含时间部分才能算秒/分/时。datediff(完工, 开工, 'day')=天数,datediff(结束, 开始, 'hour')=小时数
• dateadd(d, n, 单位) —— 日期加 n 天/月
• today() —— 今天
• 日期格式支持:2024-03-15、2024/3/15、2024.3.15
六、条件函数
• if(条件, 真值, 假值) —— if(金额 > 1000, '大单', '小单')
• 三元等价:金额 > 1000 ? '大单' : '小单'
• 可嵌套:if(分 >= 90, 'A', if(分 >= 60, 'B', 'C'))
七、链式计算
后定义的计算列可引用前面已定义的计算列。例如先建 金额 = 单价 * 数量,再建 税额 = 金额 * 0.13。用 ↑↓ 调整求值顺序(被引用的列必须排在前面)。
八、数字自动清洗
单元格里的数字若带千分位逗号或货币符号会自动去除:"¥1,234.50" → 1234.5、"12.5kg" → 12.5、"85%" → 85。比较时若两边都是数字则按数值比,否则按文本比。
九、错误处理
单个单元格计算出错时显示 #ERR: 原因 并标红,不影响其它单元格与排序/筛选。保存表达式时会先校验语法与列名,非法不放行。
十、综合示例
• 金额:单价 * 数量
• 含税金额:round(单价 * 数量 * 1.13, 2)
• 客户等级:if(金额 >= 10000, 'VIP', if(金额 >= 1000, '普通', '零散'))
• 工期天数:datediff(完工日期, 开工日期, 'day')
• 编号清洗:upper(replace(编号, ' ', ''))
• 百分比:round(完成率 * 100, 1) & '%'
`;
overlay.appendChild(modal);
document.body.appendChild(overlay);
const close = () => overlay.remove();
modal.querySelector('.filter-modal-close').onclick = close;
overlay.onclick = e => { if (e.target === overlay) close(); };
}
// 插入控制行
function insertControlRow(table, controlRow, structure) {
if (structure.hasThead) {
const thead = table.tHead;
thead.appendChild(controlRow);
} else if (structure.hasTbody) {
const tbody = table.tBodies[0];
if (structure.headerRows.length > 0) {
const lastHeaderRow = structure.headerRows[structure.headerRows.length - 1];
if (lastHeaderRow.parentElement === tbody) {
tbody.insertBefore(controlRow, lastHeaderRow.nextSibling);
} else {
tbody.insertBefore(controlRow, tbody.firstChild);
}
} else {
tbody.insertBefore(controlRow, tbody.firstChild);
}
} else {
table.insertBefore(controlRow, table.firstChild);
}
}
// 处理控制按钮点击
function handleControlClick(table, button) {
const action = button.dataset.action;
const columnIndex = parseInt(button.dataset.columnIndex);
const tableId = generateTableId(table);
switch (action) {
case 'sort':
cycleSort(table, columnIndex);
break;
case 'filter':
showFilterModal(table, columnIndex);
break;
case 'clear-filter':
clearFilter(table, columnIndex);
break;
}
// 刷新该表格所有列UI
const colCount = (table.querySelector('.table-control-row') || {}).cells?.length || 0;
for (let i = 0; i < colCount; i++) updateControlUI(table, i);
}
// 切换排序（支持多列）
function toggleSort(table, columnIndex, order) {
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
if (!tableState) return;
const existingIndex = tableState.sortState.findIndex(s => s.columnIndex === columnIndex);
if (existingIndex >= 0) {
// 若已存在相同排序方向 -> 取消该列排序
if (tableState.sortState[existingIndex].order === order) {
tableState.sortState.splice(existingIndex, 1);
} else {
// 更改为新的方向，并把此列提升为最前（最高优先级）
tableState.sortState.splice(existingIndex, 1);
tableState.sortState.unshift({ columnIndex, order });
}
} else {
// 新增排序，放在最前作为最高优先级
tableState.sortState.unshift({ columnIndex, order });
}
// 执行排序或恢复原始顺序
sortRows(table);
}
// 单按钮三态循环排序：无→降序→升序→无(还原)，再循环
function cycleSort(table, columnIndex) {
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
if (!tableState) return;
const existingIndex = tableState.sortState.findIndex(s => s.columnIndex === columnIndex);
const currentOrder = existingIndex >= 0 ? tableState.sortState[existingIndex].order : null;
// 推进顺序：null → desc → asc → null(还原)
let nextOrder;
if (currentOrder === null) nextOrder = 'desc';
else if (currentOrder === 'desc') nextOrder = 'asc';
else nextOrder = null; // asc → 还原
// 先移除该列现有排序
if (existingIndex >= 0) tableState.sortState.splice(existingIndex, 1);
// 新方向放入最前（最高优先级，保持多列排序行为一致）；nextOrder 为 null 即还原该列
if (nextOrder) tableState.sortState.unshift({ columnIndex, order: nextOrder });
// 执行排序或恢复原始顺序
sortRows(table);
}
// 同步 originalRows：应对表格异步追加/重渲染导致 originalRows 过期，从而在“恢复原始顺序”时丢行
function syncOriginalRows(table) {
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
if (!tableState) return;
const currentAll = getTableAllDataRows(table); // 当前DOM里所有数据行（含被筛隐藏的）
const currentSet = new Set(currentAll);
// 先移除已不存在的行引用
tableState.originalRows = (tableState.originalRows || []).filter(r => currentSet.has(r));
// 再把新出现的行追加进 originalRows（保持“出现先后”的大致顺序）
const existSet = new Set(tableState.originalRows);
currentAll.forEach(r => {
if (!existSet.has(r)) tableState.originalRows.push(r);
});
}
// 根据 tableState.sortState 对可见行进行排序（支持多列优先级）
function sortRows(table) {
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
if (!tableState) return;
// ✅ 关键：每次排序/恢复前都同步一次，避免 originalRows 过期导致丢行
syncOriginalRows(table);
const sortState = tableState.sortState;
const visibleRows = getVisibleDataRows(table);
if (visibleRows.length < 2) return;
if (!sortState || sortState.length === 0) {
// ✅ 恢复“原始顺序”（保留当前可见行），同时把 originalRows 没记录到的可见新行也带上，避免丢行
const originalPart = (tableState.originalRows || []).filter(r => visibleRows.includes(r));
const extras = visibleRows.filter(r => !(tableState.originalRows || []).includes(r));
reorderTableRows(table, originalPart.concat(extras));
return;
}
// 多列比较器
visibleRows.sort((a, b) => {
for (let i = 0; i < sortState.length; i++) {
const { columnIndex, order } = sortState[i];
const aCell = a.cells[columnIndex];
const bCell = b.cells[columnIndex];
const aText = aCell ? aCell.textContent.trim() : '';
const bText = bCell ? bCell.textContent.trim() : '';
const comparison = aText.localeCompare(bText, 'zh-CN', {
sensitivity: 'base',
numeric: true
});
if (comparison !== 0) return order === 'asc' ? comparison : -comparison;
}
return 0;
});
reorderTableRows(table, visibleRows);
}
// 更新控制UI状态（刷新单列状态显示，基于 tableState）
function updateControlUI(table, columnIndex) {
const controlIndicator = table.querySelector(`.filter-indicator[data-column-index="${columnIndex}"]`);
const controlCell = controlIndicator?.closest('td, th');
if (!controlCell) return;
const container = controlCell.querySelector('.control-container');
if (!container) return;
let buttons = container._controlButtons;
if (!buttons) {
buttons = {
sortBtn: container.querySelector('[data-action="sort"]'),
filterBtn: container.querySelector('[data-action="filter"]'),
clearFilterBtn: container.querySelector('[data-action="clear-filter"]'),
filterIndicator: container.querySelector('.filter-indicator')
};
}
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
const filter = tableState?.filters?.get(columnIndex);
// 重置排序按钮样式（默认无排序态：⇅ 灰）
if (buttons.sortBtn) {
buttons.sortBtn.classList.remove('active-asc');
buttons.sortBtn.classList.remove('active-desc');
buttons.sortBtn.textContent = '⇅';
buttons.sortBtn.title = '排序（点击循环：降序→升序→还原）';
}
// 根据 sortState 设置样式（如果存在）
if (tableState && tableState.sortState && buttons.sortBtn) {
const sortEntry = tableState.sortState.find(s => s.columnIndex === columnIndex);
if (sortEntry) {
if (sortEntry.order === 'asc') {
buttons.sortBtn.classList.add('active-asc');
buttons.sortBtn.textContent = '↑';
} else if (sortEntry.order === 'desc') {
buttons.sortBtn.classList.add('active-desc');
buttons.sortBtn.textContent = '↓';
}
// 设置 title 显示优先级信息
const rank = tableState.sortState.findIndex(s => s.columnIndex === columnIndex);
if (rank >= 0) {
const pri = rank + 1;
const dir = sortEntry.order === 'asc' ? '升序' : '降序';
buttons.sortBtn.title = `${dir}（优先级 ${pri}）`;
}
}
}
// 更新筛选按钮状态
if (buttons.filterBtn && buttons.clearFilterBtn && buttons.filterIndicator) {
if (filter) {
buttons.filterBtn.classList.add('active');
buttons.filterBtn.textContent = '⏳';
buttons.clearFilterBtn.style.display = 'inline-block';
buttons.filterIndicator.textContent = buildFilterIndicatorText(filter);
buttons.filterIndicator.style.color = '#0d6efd';
} else {
buttons.filterBtn.classList.remove('active');
buttons.filterBtn.textContent = '🔍';
buttons.clearFilterBtn.style.display = 'none';
buttons.filterIndicator.textContent = '';
}
}
}
// 获取算法显示文本
function getAlgorithmText(algorithm) {
const map = {
'equals': '等于',
'notEquals': '不等于',
'startsWith': '开头是',
'notStartsWith': '开头不是',
'endsWith': '结尾是',
'notEndsWith': '结尾不是',
'contains': '包含',
'notContains': '不包含',
'regexMatch': '符合正则',
'isEmpty': '为空',
'isNotEmpty': '不为空',
'numGt': '大于', 'numGte': '大于等于', 'numLt': '小于', 'numLte': '小于等于',
'numEq': '等于', 'numNe': '不等于', 'numBetween': '区间',
'dateGt': '晚于', 'dateGte': '晚于≥', 'dateLt': '早于', 'dateLte': '早于≤',
'dateEq': '等于', 'dateBetween': '区间',
'lenEq': '长度=', 'lenGt': '长度>', 'lenLt': '长度<'
};
return map[algorithm] || algorithm;
}
// 构建筛选指示器文本（双条件摘要，超长由 ellipsis 截断）
function buildFilterIndicatorText(filter) {
const c1Valid = isConditionValid(filter.text1, filter.algorithm1);
const c2Valid = isConditionValid(filter.text2, filter.algorithm2);
const part = (text, alg) => text ? `${text}(${getAlgorithmText(alg)})` : getAlgorithmText(alg);
if (c1Valid && c2Valid) {
const comb = filter.combiner === 'or' ? '或' : '且';
return `${part(filter.text1, filter.algorithm1)} ${comb} ${part(filter.text2, filter.algorithm2)}`;
}
if (c1Valid) return part(filter.text1, filter.algorithm1);
if (c2Valid) return part(filter.text2, filter.algorithm2);
return '';
}
// 处理排序（保留为兼容性使用，内部使用 toggleSort/sortRows）
function handleSort(table, columnIndex, order) {
toggleSort(table, columnIndex, order);
}
// 获取可见的数据行
function getVisibleDataRows(table) {
const allRows = Array.from(table.rows);
return allRows.filter(row => {
if (row.classList.contains('table-control-row')) return false;
const hasTh = row.querySelector('th');
const isHeaderRow = hasTh ||
row.parentElement.tagName === 'THEAD' ||
row.classList.contains('header');
return !isHeaderRow && row.cells.length > 0 && !row.classList.contains('row-filtered-out');
});
}
// 重新排序表格行（将 sortedRows 的顺序插入到控制行之后）
function reorderTableRows(table, sortedRows) {
const controlRow = table.querySelector('.table-control-row');
// 确保存在 tbody：优先使用第一个 tbody，若不存在则创建
let tbody = table.tBodies && table.tBodies.length > 0 ? table.tBodies[0] : null;
if (!tbody) {
tbody = document.createElement('tbody');
table.appendChild(tbody);
}
// 将表格顶层（直接子元素为 tr）的数据行统一移入 tbody，避免数据行散落到 table 根节点或 thead
Array.from(table.children).forEach(child => {
if (child.tagName === 'TR' && child !== controlRow) {
tbody.appendChild(child);
}
});
const parent = tbody;
// 移除现有可见行（避免重复），只移除非控制行的数据行
const visibleRows = getVisibleDataRows(table);
visibleRows.forEach(row => { if (row !== controlRow) row.remove(); });
// ✅ 关键修复：在移除之后再计算 refNode，避免 refNode 指向已被 remove 的节点
let refNode;
if (controlRow && controlRow.parentElement === parent) {
refNode = controlRow.nextSibling; // 可能是第一条“隐藏行”或 null
} else {
refNode = parent.firstChild; // 可能是第一条“隐藏行”或 null
}
if (refNode && refNode.parentNode !== parent) {
refNode = null; // 不在 parent 下则直接追加
}
// 过滤并插入排序后的行（确保不包含控制行或表头行）
const frag = document.createDocumentFragment();
const filtered = (sortedRows || []).filter(r => r && r.tagName === 'TR' && !r.classList.contains('table-control-row'));
filtered.forEach(row => frag.appendChild(row));
// refNode 为 null 时等价于 appendChild，安全
parent.insertBefore(frag, refNode);
// 刷新行号
updateRowNumbers(table);
}
// 各类型的筛选算法集
const FILTER_ALGO_SETS = {
text: [
{ v: 'contains', l: '包含' }, { v: 'notContains', l: '不包含' },
{ v: 'regexMatch', l: '符合正则表达式' },
{ v: 'equals', l: '等于' }, { v: 'notEquals', l: '不等于' },
{ v: 'startsWith', l: '开头是' }, { v: 'notStartsWith', l: '开头不是' },
{ v: 'endsWith', l: '结尾是' }, { v: 'notEndsWith', l: '结尾不是' },
{ v: 'isEmpty', l: '为空' }, { v: 'isNotEmpty', l: '不为空' },
{ v: 'lenEq', l: '文本长度等于' }, { v: 'lenGt', l: '文本长度大于' }, { v: 'lenLt', l: '文本长度小于' }
],
number: [
{ v: 'numGt', l: '大于 >' }, { v: 'numGte', l: '大于等于 ≥' },
{ v: 'numLt', l: '小于 <' }, { v: 'numLte', l: '小于等于 ≤' },
{ v: 'numEq', l: '等于 =' }, { v: 'numNe', l: '不等于 ≠' }
],
date: [
{ v: 'dateGt', l: '晚于' }, { v: 'dateGte', l: '晚于或等于' },
{ v: 'dateLt', l: '早于' }, { v: 'dateLte', l: '早于或等于' },
{ v: 'dateEq', l: '等于' }
]
};
// 推断列类型:计算列 number 结果 → 数值,否则文本
function inferColType(table, columnIndex) {
const tableId = generateTableId(table);
const st = tableData.get(tableId);
if (st && st.calcColumns && st.calcColumns.length) {
const headers = ElTableAdapter.readHeaderNames(table);
const origColCount = headers.length - st.calcColumns.length;
const calcIdx = columnIndex - origColCount;
if (calcIdx >= 0 && calcIdx < st.calcColumns.length) {
const def = st.calcColumns[calcIdx];
if (def && def.resultType === 'number') return 'number';
}
}
return 'text';
}
// 显示筛选弹窗
function showFilterModal(table, columnIndex) {
// 移除现有弹窗
const existingModal = document.querySelector('.filter-modal-overlay');
if (existingModal) existingModal.remove();
// 创建弹窗
const modalOverlay = document.createElement('div');
modalOverlay.className = 'filter-modal-overlay';
const modal = document.createElement('div');
modal.className = 'filter-modal';
// 获取当前筛选状态
const tableId = generateTableId(table);
const tableState = tableData.get(tableId);
const currentFilter = tableState?.filters?.get(columnIndex);
// 双条件：条件1/条件2 各自的算法与文本（兼容旧的单条件数据 {text, algorithm}）
const cf = currentFilter || {};
const selAlg1 = cf.algorithm1 || cf.algorithm || 'contains';
const selAlg2 = cf.algorithm2 || 'contains';
// 算法选项区初始展示「条件1」的算法
const selAlg = selAlg1;
// 弹窗头部
const header = document.createElement('div');
header.className = 'filter-modal-header';
header.innerHTML = `