DataGrid控件介绍-CSDN博客

本文链接：https://blog.csdn.net/RationalGroup/article/details/7403318

本文详述了DataGrid组件的使用，包括创建DataGrid、DataGridColumn属性、DataGrid属性、分页机制、Behavior和Tooltips等功能。DataGrid用于展示数据，支持自定义列属性、排序、监听用户操作等，提供了灵活的扩展性，便于实现复杂的数据展示和交互需求。

摘要由CSDN通过智能技术生成

DataGrid控件介绍

1. 引言

Rich UI中的DataGrid组件可以在表中显示一组行数据。本文将详细介绍DataGrid组件相关信息。

如果想要较好的理解DataGrid，你需要熟悉以下内容：

如何定义表头
如何定义behavior，它是DataGrid组件中包含一系列behavior函数的属性。当组件被渲染时，属性中的behavior函数将被调用。
如何定义listener，它是DataGrid组件中包含一系列listener函数的属性。这些函数可以响应用户操做。例如，当用户选择或者取消勾选框时对应的listener函数将被调用。
如何对列的排序进行定制。
如何对DataGridColumn格式进行定制。
其他关于DataGrid的技巧，例如分页，使用Data Loader，等等。

Behaviors和listeners可以改变style属性并可以调用多种处理逻辑；例如改变某列的排序方法；调用服务；计算结果并在某列中显示；调整某些其他组件并将其内嵌至某一列中。你可以根据以上逻辑来实现你的想法；比如你可以做如下操作；

在某一行中获取user ID。
通过这个user ID来调用REST服务，从而将图片返回至回调函数中。
将这个返回的图片嵌入至handler中定义的全局图片组件。
将此图片放置在user ID的同一行中。

你可以使用许多有用的DataGrid属性，方法和扩展来完成你想实现的功能。我想现在你已经跃跃欲试，迫不及待的想开始DataGrid之旅了吧。那么我们就从创建一个RUI DataGrid组件开始吧。

2. 创建一个简单的DataGrid组件

本章是一个一步一步的指导教程。通过这个教程，你可以尝试在EDT中创建一个包含DataGrid组件的RuiHandler。

2.1. 右击EGL project/package >> New >> Handler. New EGL Handler向导会弹出。

填写名字一栏并选择Rich UI Handler作为模板，然后点击Finish。Handler会被自动创建至目标package里。

2.2. 当Handler创建好，它会自动的在EGL Rich UI编辑器中被打开。或者你可以通过双击文件或者右击>> Open With >> EGL Rich UI Editor来打开。

切换至design视图，你可以在右侧看到Palette面板。你可以在“Display and Input”一栏中找到DataGrid组件。你可以将其从Palette中拖拽至design区域中。

当拖拽结束时，“New Variable”向导会自动弹出。

输入DataGrid变量名并点击OK。DataGrid将出现在design面板中，并且源码同时被更新。

2.3. 定义一个Record类型作为作为Record数组的基础结构。 每一个Record包含了一行中所需要展示的数据。你可以为Record另外创建一个新的EGL源文件或者可以直接将Record定义添加到RUI Handler的最下方。

Record Stock 
   Symbol string;
   NumShares int;
   Quote  decimal(5,2);
   SelectQuote boolean;
end

2.4. 如下例所示，声明Record的数组类型

stockList Stock[] =[new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40},
                      new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10}
                		];

2.5. 将DataGrid声明更改至适合之前创建的Record模式。

DataGrid DataGrid{layoutData = new GridLayoutData{row = 1, column = 1}, behaviors =[], headerBehaviors =[], columns =[
                    new DataGridColumn{name = "Symbol", displayName = "Company Symbol"},
                    new DataGridColumn{name = "Quote", displayName = "Price Per Share"},
                    new DataGridColumn{name = "NumShares", displayName = "Number of Shares"},
                    new DataGridColumn{name = "Total", displayName = "Value of Shares", formatters =[totalFormatter
                            ]}]};

前三个DataGridColumn分别引用了Record的三个属性。第四个声明则定义了一个计算结果列，这一列没有引用Record的属性。所以，在Record中没有一个叫Total的属性。

DataGridColumn声明的顺序决定了每一列在DataGrid中的显示顺序。你可以为data属性赋值一个Stock类型的Record数组。以下是一段示例代码：

DataGrid.data = stockList as any[];

你可以直接将这行代码放到start函数中。数组中每一项都提供了DataGrid中的一行数据。

2.6. 添加formatter函数

你可以通过改变相应属性的值来添加behavior和listener函数。每一个属性都与一个代理函数类型相关，这个代理函数定义了可以被添加到属性里的函数定义，包括参数和返回类型。在这个例子中，第四列的DataGridColumn formatters被使用，它会调用了一个含有三个参数没有返回类型的函数。以下是这个函数：

function totalFormatter(class string inOut, value string inOut, rowData any in)
    // display the total value of the shares after calculating the value 
    // from the content of two other columns in the same row
        value = rowData.NumShares as int * rowData.Quote as decimal(5, 2);
end

当Grid被渲染时，表中的每行数据都会调用formatters属性中包含的函数。被调用函数的第三个参数包含了所有所需的数据，另外还可以通过第一个控制CSS class的参数改变单元的样式，或者通过第二个参数控制相应的值。

2.7. 切换至Preview

之前创建的DataGrid应该已经如图所示的在Preview模式中生成。