71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
/**
|
|
* DOM 操作工具模块
|
|
* 提供用于创建和管理 DOM 元素的辅助函数
|
|
*/
|
|
|
|
import { FIELD_TYPES } from './constants.js';
|
|
|
|
/**
|
|
* 从表元素中提取列宽度信息
|
|
* @param {HTMLElement} tableElement - 要分析的表元素
|
|
* @param {string} fieldType - 字段类型（影响返回的宽度数组）
|
|
* @returns {Array<number>} 表列宽度的数组
|
|
*/
|
|
export const getColumnWidths = (tableElement, fieldType) => {
|
|
// 获取所有标题元素并提取它们的客户端宽度
|
|
const headerElements = Array.from(tableElement.querySelectorAll('th'));
|
|
const columnWidths = headerElements.map(header => header.clientWidth);
|
|
|
|
// 对于子表返回所有宽度，其他表跳过第一列（通常是操作列）
|
|
return fieldType === FIELD_TYPES.SUBTABLE
|
|
? columnWidths // 子表保留所有列
|
|
: columnWidths.slice(1); // 其他表跳过第一列
|
|
};
|
|
|
|
/**
|
|
* 安全地将标签元素插入到指定目标元素之前
|
|
* @param {HTMLElement} targetElement - 要插入之前的目标元素
|
|
* @param {HTMLElement} labelElement - 要插入的标签元素
|
|
* @returns {boolean} 插入是否成功
|
|
*/
|
|
export const safelyInsertLabel = (targetElement, labelElement) => {
|
|
try {
|
|
if (!targetElement || !labelElement) {
|
|
console.warn('Failed to insert label: target element or label element does not exist');
|
|
return false;
|
|
}
|
|
|
|
if (!targetElement.before) {
|
|
console.warn('Failed to insert label: target element does not support before method');
|
|
return false;
|
|
}
|
|
|
|
targetElement.before(labelElement);
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error inserting label: ', error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 安全地将标签元素追加到指定目标元素
|
|
* @param {HTMLElement} targetElement - 要追加到的目标元素
|
|
* @param {HTMLElement} labelElement - 要追加的标签元素
|
|
* @returns {boolean} 追加是否成功
|
|
*/
|
|
export const safelyAppendLabel = (targetElement, labelElement) => {
|
|
try {
|
|
if (!targetElement || !labelElement) {
|
|
console.warn('Failed to append label: target element or label element does not exist');
|
|
return false;
|
|
}
|
|
|
|
targetElement.appendChild(labelElement);
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error appending label: ', error);
|
|
return false;
|
|
}
|
|
};
|