请问表格组件的动态表格功能的设计初衷是什么？应该怎样用才最合适？

[zhyy2008z]

我最近在写一个数据库增删改查功能，因为列数不固定，查询文档后得知有两种方案一种是动态表格，一种是动态列。因为两者都能够支持数据列不固定的这一需求，就先选了动态表格方案。

我发现这个方案很难与数据库做同步，具体会遇到：
1、如何单纯监听记录变更？OnAddAsync、OnDeleteAsync 等几个方法，一旦被设置就会不走内部修改数据源的实现，需要我自行更新DataTable；
2、点击新建按钮后，如果未能向数据库成功插入数据，如何阻止在界面添加这行数据？
3、监听记录保存只能通过OnValueChanged，这个事件只能一个字段一个字段保存效率很低。

综上所述，动态表格方案好像不太适合逐条记录地更新数据库？也可能是我没有找到正确的使用方法，还请指教，感谢！

[ArgoZhang]

@zhyy2008z 首先感谢来社区提问，帮忙给项目一个 star 先谢谢了

尽量提供复现例子，并截图画框标注箭头，光凭中文文字描述很难顺畅沟通。你的代码也没有，不知道具体如何使用的组件

[zhyy2008z]

感谢回答，已star。我提的问题不是说表格组件的动态表格功能存在什么bug。而是不太了解这个功能的最佳实践。举个例子，如何实现当用户点击下图左上角的“新增”按钮后，执行一段自定义判定逻辑，如果这段自定义逻辑返回值为true，则正常添加“新建值”记录行，否则不在界面增加这行记录？也就是我想简单地实现在“用户操作“和”界面更新”的中间增加一段自定义判断逻辑，框架会根据这个逻辑来确定是否执行界面更新。请您给出指点，感谢！

[ArgoZhang]

@zhyy2008z 感谢给与项目 star

你这个思路与设计不符，设计上不应该是让用户点了 新建 再去执行一段逻辑，而应该是跟权限（所谓的一段逻辑）挂钩，如果用户没有权限就不要显示新建 按钮 了。这就是 RBAC 建议搜索学习一下

[zhyy2008z]

感谢回答！我想说明一下，这段逻辑不是权限，而是数据校验，由于在动态表格模式下，点击新建按钮的时候会立刻把空白数据显示在界面表格里，并且还不处于编辑模式，为了保证数据库与界面显示一致，我只能先参考外部的两个输入框的值（该数据表的两个主键）在数据库新建一条对应记录，如果数据记录可以添加成功，则允许界面添加这行，否则不允许。

我想应该是我的需求与控件的设计初衷不一致，我才会遇到此问题，因此，才有了这个FAQ。我已经使用Reflection.Emit API动态生成实体类型来实现这个功能了，最基本的列绑定模式，在这个模式下新建按钮会先显示新建对话框，点击保存按钮后会执行数据库添加逻辑，并根据添加是否成功来决定是否真的添加到界面，编辑、删除也是同理，非常符合我的需求。

[zhyy2008z]

我一开始就是用的这个DataTableDynamicContext做测试，它可以立刻将用户操作反映到DataTable中，但是DataTable最终是要进入数据库的，如果执行失败了如何及时处理呢？我是想用户的每次增删改查操作都及时同步到数据库中，如果失败了就不更新界面，成功了才去更新界面，用这个DataTableDynamicContext不知道如何实现？

[ArgoZhang]

@zhyy2008z

给组件 Context
DynamicContext="DynamicContext"

这个 Context 就有实例方法 OnAddAsync OnDeleteAsync 等方法，甚至可以做到单元格变化时进行入库操作

示例代码

var context = new DataTableDynamicContext(data, (context, col) =>
{
    // 设置排序
    col.Sortable = sortColumns.Any(i => i == col.GetFieldName());
    // 设置只读
    col.Readonly = readonlyColumns.Any(i => i == col.GetFieldName());
    // 表头本地化
    col.Text = localizer[col.GetFieldName()];
    // 单元格可编辑
    col.EditTemplate = new RenderFragment<object>(row => builder =>
    {
        if (row is DynamicObject d)
        {
            var fieldName = col.GetFieldName();
            var items = tableData.ColParams.FirstOrDefault(i => i.Name == fieldName && i.Items.Any())?.Items;
            if (items != null)
            {
                col.Items = items.Select(i => new SelectedItem(i, i)).ToList();
            }
            var v = d.GetValue(fieldName);
            // 创建单元格组件 此处 OnCellValueChanged 可实现单元格入库操作
            builder.CreateCellComponent(component, d, col, v, OnCellValueChanged, callback, DataSource.Index);
        }
    });
})
{
    OnAddAsync = OnAddAsync,
    OnDeleteAsync = OnDeleteAsync,
    EqualityComparer = (x, y) => x!.GetValue("Guid") == y!.GetValue("Guid")
};

[zhyy2008z]

@ArgoZhang 感谢回答！这个基本用法我最开始就测试了，确实可以做到监听用户修改，可以做到同步数据库！但我的痛点我之前可能没有足够地表达清楚，我这里再重点说一下：数据库操作不可能总是一凡风顺，如果数据库操作失败了怎么办？因为在DataTableDynamicContext模式，经过我的测试OnChanged、OnValueChanged这些方法都是界面已经更新后才会调用我写的代码，这个时候如果操作数据库失败，除了要报错外，还需要把界面还原到用户执行这个操作之前的状态，这个时候我要如何做呢？

[ArgoZhang]

我理解这个的。我们的组件库我们自己都在大量使用，不是跟别的组件库是的，他们自己都不用。所以你这个我很理解。我们先梳理一下

假设是一个文本框，用户 UI 更改了文本框的值，这个时候不管你数据库保存成功与否，这个时候 UI 都已经变了啊。所以你这个思维逻辑需要改变

我是想用户的每次增删改查操作都及时同步到数据库中，如果失败了就不更新界面，成功了才去更新界面

这个思路就给自己制造了很多困难

正确的思路应该是，组件只负责 UI 保存数据成功或者失败跟组件无关，首先你要认可这一点，所以如果保存成功了。我们可以不更新 UI 保持即可；如果保存失败了，你就重置 Context 再给 Table 组件，组件就会把老数据恢复了啊，当然这只是一个思路而已，也可以单元格自己出现红框等，这些都是自己的业务设计跟逻辑，仅供参考

我担心你又会继续问如何重置 Context 我再给你一段代码片段

public void InitDynamicContext()
{
    CorrectionDynamicContext = ChromaService.InitDataTableContext(this, DataSource, CtrlName, () =>
    {
        InitDynamicContext();
        StateHasChanged();
    }, Localizer, UniLocalizer);
}

第四个参数是一个回调，就是底层数据库保存失败或者成功后，都回调这个这个回调又调用自己并且 StateHasChanged 我们的系统是多人协作的。所以不管是保存成功还是失败，都要重新刷新表格的，即重读数据库中最新数据。

别的参数与此问题无关

对了再补充一点，面对大数据时还有一个痛点就是这个所谓的重置 Context 可能数据比较大，我们特意还是做了一个行模板，能做到 CRUD 仅针对这个行即 DataTableRow 进行操作大大提高性能。这些小细节几乎都是市面上别的组件没有的功能

[zhyy2008z]

受教了，非常感谢 @ArgoZhang 的耐心解答！我已经明白了 DataTableDynamicContext 模式的设计思路，后面会根据具体需要灵活选择不同的使用方式，再次表达感谢！顺便问一下，您说的”行模板“指的是通过Table的“RowTemplate”或“RowContentTemplate”属性控制行如何渲染吗？

[ArgoZhang]

@zhyy2008z 尽量使用 RowContentTemplate 这个模板是针对模型属性转化成可见列的模板，如果使用 RowTemplate 那么你就要负责更多的逻辑，比如行号，是否多选，功能按钮等逻辑，这些差异建议看看源码，不需要完全看懂，至少了解一下区别，这样能加深理解

[zhyy2008z]

@ArgoZhang 感谢！已了然