视图 表格视图(ReoGridView) - jingjiajie/FrontWork GitHub Wiki

  表格组件(ReoGridView)是FrontWork中提供的标准视图控件。非常感谢基于MIT协议发布的开源表格控件ReoGrid (https://reogrid.net)在FrontWork中做出的重要贡献。和其他组件一样，ReoGridView表格组件也在工具栏中可以找到：
ReoGridView工具箱

  我们将它拖放到窗口上，可以看到一个ReoGrid表格组件。和基本视图不同的是，ReoGridView表格组件暂不能在VS设计器中根据配置中心的配置而实时预览，最终的效果需要运行程序才可以看到。这是由ReoGrid开源表格控件本身的设计所决定的。

ReoGridView组件

  可以看到，ReoGridView同样提供了Configuration和Model两个属性。Model就是FrontWork中最核心的数据中枢，用来存储视图中的数据。Configuration就是基本视图组件连接的配置中心组件。设置好配置中心组件后，基本视图会从配置中心中读取配置，然后绘制界面。

  现在，让我们把基本视图绑定到我们的《配置中心组件》中所设置的配置中心组件，看看效果（千万不要忘记在窗口中事先拖放好Configuration组件，否则下图的下拉框中是不会有configuration1这一项的）：

预览图

  可以看到，表头已经根据配置中心的配置自动生成好了。下面让我们绑定一个Model来提供数据交互的能力：

Model

  并将ReoGridView表格组件绑定到Model上：

绑定到Model

  这样，我们的Model就绑定完成了。接下来，让我们用代码向Model中增加三行数据，并观察表格控件的数据同步：

    this.model1.AddRow(new Dictionary<string, object> {
        {"name","小明"},{"role","管理员" },{"age",18}
    });

    this.model1.AddRow(new Dictionary<string, object> {
        {"name","小红"},{"role","VIP" },{"age",19}
    });

    this.model1.AddRow(new Dictionary<string, object> {
        {"name","小华"},{"role","普通用户" },{"age",20}
    });

预览图

  可以看到，随着Model中数据的增加，表格中的数据自动地同步了。同理，如果用户在表格上编辑了数据，在Model中也会随之同步，这是MVVM框架的基本规则，在这里不再演示。另外，细心的你可能已经注意到了，表格中的单元格背景是蓝色的，而之前的截图中的单元格背景是白色的，这是什么意思呢？

  在当前版本的FrontWork中，表格控件为单元格提供了三种颜色：蓝色，红色和白色。当我们直接在前端的Model模型添加数据时，显然这些数据还没有被同步到后端服务器中。所以表格控件用蓝色标识。而如果数据是从服务器后端同步到Model里的，或者是前端在Model里添加的数据已经被同步到后端了，那么表格控件会将整行绘制成白色来标识已经同步的数据。关于数据同步的内容，请参考Synchronizer同步器相关的介绍文章，在此不作介绍。

  红色单元格代表错误数据，例如用户在下拉框的单元格中，强行输入了下拉框中不存在的值，如“黄金VIP”，则表格控件会用红色标识。这样的错误数据虽然显示在了表格控件中，但不会被同步到Model里，Model中所存储的值依然是被错误编辑之前的合法值。当然，如果错误的值是从Model同步到ReoGridView上的，也会被标为红色。此时Model和ReoGridView共同拥有错误数据。

错误数据

⚠️ **GitHub.com Fallback** ⚠️