JointJS中点击表格列时仅显示该列属性的Inspector实现问题

我在用JointJS的表格组件时，想实现点击表格某一列，就让Inspector只展示该列的属性，而非整个表格的属性。目前已经能通过点击事件分离出选中列，但用克隆表格的方式无法在属性面板中渲染修改后的值，相关代码如下：

const HIGHLIGHTER_ID = 'table-selected',
            table = tableView.model as Table,
            tableName = table.getName();

        TableHighlighter.add(tableView, 'root', HIGHLIGHTER_ID);
        const columnDetails = table.clone();

        if (columnClickEvt) {
            const itemId = columnClickEvt.target.attributes['item-id'].value,
                selectedColumn = table.getColumnByName(itemId);
            columnDetails.setColumns([selectedColumn]);
        }

        const inspector = new ui.Inspector({
            cell: (columnClickEvt ? columnDetails : table),
            theme: 'default',
            inputs: {
                'attrs/headerLabel/text': {
                    label: 'Name',
                    type: 'text'
                },
                'columns': {
                    label: 'Columns',
                    type: 'list',
                    addButtonLabel: 'Add Column',
                    removeButtonLabel: 'Remove Column',
                    item: {
                        type: 'object',
                        properties: {
                            name: {
                                label: 'Name',
                                type: 'text'
                            },
                            type: {
                                label: 'Type',
                                type: 'select',
                                options: AllowedDataTypes
                            }
                        }
                    }
                }
            }

你当前克隆表格的思路存在核心问题：克隆出的模型和原表格模型完全独立，修改克隆模型的属性不会同步到原表格，自然也无法在视图中体现变化。正确的做法是直接绑定原表格模型，根据选中状态动态配置Inspector的输入项。

修改后的代码示例 #

const HIGHLIGHTER_ID = 'table-selected',
      table = tableView.model as Table,
      tableName = table.getName();

TableHighlighter.add(tableView, 'root', HIGHLIGHTER_ID);

// 记录选中的列对象
let selectedColumn = null;
if (columnClickEvt) {
    const itemId = columnClickEvt.target.attributes['item-id'].value;
    selectedColumn = table.getColumnByName(itemId);
}

// 动态生成Inspector配置项
const inspectorInputs = {};
if (!selectedColumn) {
    // 未选中列时，展示整个表格的属性
    inspectorInputs['attrs/headerLabel/text'] = {
        label: '表格名称',
        type: 'text'
    };
    inspectorInputs['columns'] = {
        label: '列列表',
        type: 'list',
        addButtonLabel: '添加列',
        removeButtonLabel: '删除列',
        item: {
            type: 'object',
            properties: {
                name: {
                    label: '列名',
                    type: 'text'
                },
                type: {
                    label: '列类型',
                    type: 'select',
                    options: AllowedDataTypes
                }
            }
        }
    };
} else {
    // 选中列时，仅展示该列的属性
    inspectorInputs['columnName'] = {
        label: '列名',
        type: 'text',
        get: () => selectedColumn.name,
        set: (value) => {
            selectedColumn.name = value;
            // 更新原表格模型，触发视图同步
            table.setColumns([...table.getColumns()]);
            tableView.render();
        }
    };
    inspectorInputs['columnType'] = {
        label: '列类型',
        type: 'select',
        options: AllowedDataTypes,
        get: () => selectedColumn.type,
        set: (value) => {
            selectedColumn.type = value;
            table.setColumns([...table.getColumns()]);
            tableView.render();
        }
    };
}

// 绑定Inspector到原表格模型
const inspector = new ui.Inspector({
    cell: table,
    theme: 'default',
    inputs: inspectorInputs
});

关键说明 #

1. 绑定原模型：始终将Inspector绑定到原表格模型，避免克隆带来的同步问题
2. 动态配置输入项：根据是否选中列，生成对应的Inspector配置，未选中时展示全表属性，选中时仅展示列属性
3. 手动触发同步：修改列属性后，通过table.setColumns触发模型的change事件，确保表格视图和Inspector同步更新

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