DataGrid控件介绍

最新推荐文章于 2024-04-04 15:06:09 发布
最新推荐文章于 2024-04-04 15:06:09 发布
阅读量1.7k 收藏
点赞数
分类专栏： Js&Jquery

DataGrid控件介绍

1. 引言

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

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

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

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

  1. 在某一行中获取user ID。
  2. 通过这个user ID来调用REST服务，从而将图片返回至回调函数中。
  3. 将这个返回的图片嵌入至handler中定义的全局图片组件。
  4. 将此图片放置在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的最下方。

[java]  view plain copy
  1. Record Stock   
  2.    Symbol string;  
  3.    NumShares int;  
  4.    Quote  decimal(5,2);  
  5.    SelectQuote boolean;  
  6. end  

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

[java]  view plain copy
  1. stockList Stock[] =[new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40},  
  2.                       new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10}  
  3.                         ];  

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

[java]  view plain copy
  1. DataGrid DataGrid{layoutData = new GridLayoutData{row = 1, column = 1}, behaviors =[], headerBehaviors =[], columns =[  
  2.                     new DataGridColumn{name = "Symbol", displayName = "Company Symbol"},  
  3.                     new DataGridColumn{name = "Quote", displayName = "Price Per Share"},  
  4.                     new DataGridColumn{name = "NumShares", displayName = "Number of Shares"},  
  5.                     new DataGridColumn{name = "Total", displayName = "Value of Shares", formatters =[totalFormatter  
  6.                             ]}]};  

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

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

[java]  view plain copy
  1. DataGrid.data = stockList as any[];  

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

 

2.6. 添加formatter函数

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

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

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

 

2.7. 切换至Preview

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




2. DataGridColumn属性

你可以为DataGrid数据Record中，每一个属性列设置相应的列属性。每一列都包含如下属性。：

 

  • alignment: 一个int常量来控制水平布局：

DataGridLib.ALIGN_LEFT(默认)

列内容靠左对齐

DataGridLib.ALIGN_RIGHT

列内容靠右对齐

DataGridLib.ALIGN_CENTER

列内容居中

  • columnComparator: 当对该列进行排序时使用这个函数来进行比较。

下面是比较函数的代理函数定义格式：

[java]  view plain copy
  1. Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end  

data1

第一个对比单元的值

data2

第二个对比单元的值

函数返回如下int类型值：

o       -1 当data1小于data2

o       1  当data1大于data2

o       0  当data1等于data2

下面是一个示例函数：

[java]  view plain copy
  1. Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)  
  2.    if ( (myFirst as string )[8:8] == "6")  
  3.       return(-1);  
  4.    else  
  5.       return(1);    
  6.    end  
  7. end  
  • displayName: 所显示的列名。如果此属性未设置的话，将会默认显示该列的name属性。
  • enableSorting: 一个布尔类型来指明该列是否支持排序。默认为真，即可以排序。
  • formatters: Grid渲染前会调用此函数来改变每个单元的格式。每个单元格都会调用一次。

以下是相应代理函数的定义格式：

[java]  view plain copy
  1. Delegate CellFormatter(class String inout, value String inout, rowData any in) end  

class

列中单元格所使用的CSS class文件The CSS class

value

单元格的值，总是STRING类型。如果单元格内为选择框，则值为true或者false。

rowData

单元格所在行的数据。

 

  • headerAlignment: 一个int值来设置列名的对齐方式。

DataGridLib.ALIGN_LEFT(默认)  向左对齐

DataGridLib.ALIGN_RIGHT      向右对齐

DataGridLib.ALIGN_CENTER     居中对齐

 

  • ignoreCase: 通过一个布尔类型来指定在排序过程中大小写是否被忽略。默认是否，即考虑大小写。此属性仅当用户未设置columnComparator 属性时生效。
  • name: 指定列所对应record中的field名称。同时也是默认的列标题名。
  • sortDirection: 一个常量来指定用户下一次排序所执行的排序顺序：

DataGridLib.SORT_UP(初始默认值)

升序

DataGridLib.SORT_DOWN

降序

DataGridLib.SORT_NONE

不排序

你可能需要在排序对比函数中使用到这个属性。

  • width: 用来制定列的宽度属性，以像素值来设置。

3. DataGrid 属性

以下是在DataGrid控件中支持的属性：

  • behaviors: 一个方法数组的引用。当DataGrid渲染时会顺序的调用所有引用的函数。这个属性不适用于列标题单元。

这段代码是behaviors代理函数的定义，每个方法必须符合如下格式：

[java]  view plain copy
  1. Delegate   
  2.    DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in,   
  3.                 rowNumber INT in, column DataGridColumn in)  
  4. end  

grid

DataGrid控件.

cell

单元格展示所使用的控件。这个控件必须是基于HTML DIV标签的。

rowData

包含行数据的record

rowNumber

行号，从1到DataGrid的最大行数。

column

包含列定义信息的DataGridColumn控件

  • checkBoxListeners: 一系列listener方法的引用。当用户选择或者取消checkbox的时候会触发所包含的listener方法。

以下是相应的代理函数的定义：

[java]  view plain copy
  1. Delegate   
  2.    CheckBoxListener(grid DataGrid in) end  
  3. end  

以下是本文之前例子中的checkBoxListener例子，响应用户的选择操作：

[java]  view plain copy
  1. function myListener(grid DataGrid in)  
  2.    columnRetrieve Stock[];  
  3.    columnRetrieve = grid.getChecked() as Stock[];  
  4.    numberOfRows int = columnRetrieve.getSize();  
  5.   
  6.    if (numberOfRows > 0)  
  7.       for (i int from 1 to numberOfRows)  
  8.          sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");  
  9.        end  
  10.    end  
  11. end  
  • checkBoxWidth: 用来改变系统提供选择框的宽度，以像素为单位。默认值为20。
  • columns: 一系列DataGridColumn定义。
  • data: DataGrid所展示的数据，ANY[]类型。
  • editorBehaviors: 一系列Behavior方法。当DataGrid渲染时会被顺序调用。目的是将widget放置到单元格中。

以下是相应的代理函数定义：

[java]  view plain copy
  1. Delegate   
  2.    EditorBehavior(grid dataGrid in, cell Widget in, rowData any in,   
  3.                   rowNumber INT in, column DataGridColumn in, value ANY in)   
  4.                   returns (Widget)  
  5. end  
  • headerBehaviors: 一系列列标题行为方法的集合。当DataGrid控件绘制时列标题单元格会调用这些方法。这些方法都会基于与behavior属性相同的代理函数定义。
  • pageSize: 一个整型变量来指定每一页中显示的行数。默认值是10。在showButtonBar和showScrollBar属性中有更详细的介绍。
  • rowHeight: 一个整型变量来指定每一行的最小高度，以像素为单位。
  • selectionListeners: 一系列Listener函数。这些函数会相应在用户有选择操作时被调用，同事当setSelection，selectAll和deSelectAll函数被调用时也会触发这些listener函数。

以下是listener函数必须符合的代理函数格式。

[java]  view plain copy
  1. Delegate   
  2.    SelectionListener(grid DataGrid in) end  
  3. end  

以下是与本文第一个例子中相同的listener函数示例。当用户做选择操作时会显示symbols属性。

[java]  view plain copy
  1. function myListener(grid DataGrid in)  
  2.    columnRetrieve Stock[];  
  3.    columnRetrieve = grid.getSelection() as Stock[];  
  4.    numberOfRows int = columnRetrieve.getSize();  
  5.   
  6.    if (numberOfRows > 0)  
  7.       for (i int from 1 to numberOfRows)  
  8.          sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");  
  9.        end  
  10.    end  
  11. end  

如果需要更详细的了解选择操作的代码写法，可以查看本文之后的selectAll和setSelection方法的介绍。

  • sortListeners: 一系列排序listener方法。仅当用户对列进行排序操作时，这些方法会被调用。仅当enableSort属性值为真时排序listener方法才会被调用。

以下是函数需要符合的代理格式：

[java]  view plain copy
  1. Delegate   
  2.    SortListener(grid DataGrid in, sortColumn DataGridColumn in) end  
  3. end  

grid  被排序的DataGrid控件

sortColumn  被排序的列

以下是示例：

[java]  view plain copy
  1. function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)  
  2.    syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");  
  3. end  
  • startRow: 一个整型变量来指定第一页所显示的行。默认值为第一行。更多的详细介绍可以查看showButtonBar。
  • selectionMode: 一个常量来指定用户是否能选择多行。同样也可以指定setSelection和selectAll是否能选择多行：

DataGridLib.MULTIPLE_SELECTION(默认选项)

可以同时支持单选或者多选

    • 按住CTRL键来选择多行
    • 按住SHIFT键来选择之间所涵盖的所有行

可以支持跨页的选择。

DataGridLib.SINGLE_SELECTION

单选模式

DataGridLib.DISABLE_SELECTION

禁止选择模式

  • showButtonBar: 一个布尔型属性来表明是否显示ButtonBar，用来换页的按钮集。当此属性为真时，以下属性也会被激活：
    • pageSize 每一页中显示的行数
    • startRow 指明哪一行是首先需要展示的。例如，一共有20行，pageSize为4并且startRow为6，那么DataGrid会首先显示第二页的第二行。

showButtonBar只能在以下情况被激活：

    • 当每页中的显示行数小于总行数时；并且
    • showScrollBar属性为否。
  • showCheckBoxes: 一个布尔型属性来表明是否显示系统提供的选择框。默认值为否。系统支持的选择框会在每行的最左侧显示。
  • showHeader:一个布尔型值来指明是否显示表格的标题单元格。默认值为真。
  • showScrollBar: 一个布尔型值来指明是否显示滚动条。当此值为真时showButtonBar将失效。

4. 在Properties视图中修改DataGrid属性

在之前的章节中，我们介绍了如何生成一个简单的包含DataGrid控件的RuiHandler。在上一节中我们还详细介绍了DataGrid的所有属性。同时，EDT还支持通过界面来修改大部分重要属性。你可以在Properties视图中便捷的改变他们，同时代码也会随之自动改变。以下是Properties视图的一个截图。


在Properties视图中分为7个子标签。General, Border,Spacing, Position, Appearance, Accessbility, Layout and Events。由于大多数控件都有很多通用的属性，所以大多数DataGrid可视化改变的属性被列在General标签栏中。以下为这些属性pageSize,startRow, checkBoxWidth, rowHeight, cellBorder, cellPadding, selectionMode,showHeader, showButtonBar, enableSorting, showScrollbar and showCheckBoxes。我们已经在上一节中介绍过他们。


5. DataGrid支持的方法

以下是DataGrid支持的方法：

  • cancelDataLoader: 主要用在exception处理函数中，用来表明DataGrid所需要的数据已经不可用。它不会结束data Loader接下来的执行，但是会终止等待data Loader完成的操作并且重新以之前的数据来重绘DataGrid控件。
  • checkAll: 你可以通过这个函数来全选系统支持的选择框。甚至可以在选择框被隐藏的时候选中它们。
  • deSelectAll:取消所有现在处在选中状态的行。这个方法是航选择机制的一部分，与系统提供选择框独立。
  • getChecked: 获取已选中行的数据，以下是函数定义。
[java]  view plain copy
  1. function getChecked() returns (any[])  

下面是一段示例代码，他先是选中行的Symbol属性：

[java]  view plain copy
  1. function myResponse (e event in)  
  2.    columnRetrieve Stock[];  
  3.    columnRetrieve = grid.getChecked() as Stock[];  
  4.    numberOfRows int = columnRetrieve.getSize();  
  5.   
  6.    if (numberOfRows > 0)  
  7.       for (i int from 1 to numberOfRows)  
  8.          sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");  
  9.       end  
  10.    end  
  11. end  

需要注意的是getChecked方法获取的数据顺序取决于当前所显示的顺序。所以排序与否会影响获取的顺序。

  • getCurrentPageIndex: 获取当前页数：
[java]  view plain copy
  1. function getCurrentPageIndex() returns (int)  
  • getPageCount: 获取可用的页数
[java]  view plain copy
  1. function getPageCount() returns (int)  
  • getSelection: 获取已选择行的数据：
[java]  view plain copy
  1. function getSelection() returns (any[])  

以下是本文开始示例代码中的一段，会显示已选择行的数据并打出Symbol属性的值。

[java]  view plain copy
  1. function myResponse (e event in)  
  2.    columnRetrieve Stock[];  
  3.    columnRetrieve = grid.getSelection() as Stock[];  
  4.    numberOfRows int = columnRetrieve.getSize();  
  5.   
  6.    if (numberOfRows > 0)  
  7.       for (i int from 1 to numberOfRows)  
  8.          sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");  
  9.       end  
  10.       grid.deSelectAll();  
  11.    else  
  12.       sysLib.writeStdOut("Select one or more rows.");                      
  13.    end   
  14. end  

与getCheck方法相同，getSelection所获取数据的顺序同样与当前数据显示的顺序相关。

goToPage: 切换至所选的页面。如果输入为小于或等于1的值，则返回第一页。如果大于页面总数则跳转至最后一页：

[java]  view plain copy
  1. function goToPage(pageNumber int in)  
  • selectAll: 选择DataGrid所有行。

setChecked: 选择某一个或者多个系统提供选择框支持的行。你甚至可以在选择框隐藏的时候选择：

[java]  view plain copy
  1. function setChecked(selection any[] in)  

一下是一个示例函数，展示了两种函数使用方式：

[java]  view plain copy
  1. function start()  
  2.   
  3.       grid.setChecked([grid.data[2], grid.data[3]]);  
  4.   
  5.    // alternative coding  
  6.    myAny ANY[] = [grid.data[2], grid.data[3]];  
  7.    grid.setChecked(myAny);  
  8. end  
  • setSelection: 用来设置选择某一行或者多行。大多数情况下，这个函数时用来在DataGrid绘制时自动选择某些行。以下是函数的定义：
[java]  view plain copy
  1. function setSelection(selection any[] in)  

当调用setSelection函数时，需要从数据中选择需要选中的元素。下面这个示例代码中展示了两种设置方式：

[java]  view plain copy
  1. function start()  
  2.   
  3.       grid.setSelection([grid.data[3], grid.data[2]]);  
  4.   
  5.    // alternative coding  
  6.    myAny ANY[] = [grid.data[3], grid.data[2]];  
  7.    grid.setSelection(myAny);  
  8. end  

设置选中行取决于DataGrid的selectionMode属性。例如，如果只能选择单行，则setSelection函数中选中的项目中只有第一个会被选中。

  • unCheckAll: 取消所有系统提供选择框中选择的项目。

6. DataGrid Selection

DataGrid控件有两种方式来表明某一行数据被关注：

  • 一种是选择某行，反选某行，或者获取当前选择的行。
  • 第二种机制是系统提供选择框的选择机制，支持选择，反选或者获取选中的项目。

两种机制相互独立。首先，我们来看一下选择机制：

  • 四个函数可以被使用： setSelection, selectAll, deSelectAll, and getSelection。
  • selectionMode属性来控制DataGrid中的行是否可以被选中，如果可以，是否支持多选。
  • 当可以被选择时，listener方法用来对用户的选择操作进行响应，或者对setSelection, selectAll, or deSelectAll方法进行响应。
  • selectionListeners属性来记录所有listener方法。

其次，我们来看一下选择框机制：

  • 四种方法可以被调用：setChecked, checkAll, unCheckAll, and getChecked.
  • 用户可以用代码来选择，清除或者对选择的行进行操作。这取决于showCheckBoxes属性是否被选中。
  • Listener方法可以用来响应用户的操作或者响应setChecked, checkAll, or unCheckAll等方法。
  • checkBoxListeners属性用来记录这些Listener方法。

 7. DataGrid分页机制

在之前的章节中，我们已经介绍了DataGrid的所有属性。其中有三个属性影响DataGrid分页功能，pageSize,showButtonBar 和showScrollBar。你可以通过这三个属性来改变分页设置。本节中我们将通过一个简单的示例程序来展示分页机制。其中通过gotoPage 方法来在不同页面间切换，并且添加了一个pageChangeListener。

[java]  view plain copy
  1. package test;  
  2.   
  3. // RUI Handler  
  4.   
  5. import com.ibm.egl.rui.widgets.DataGrid;  
  6. import data.GridEmployee;  
  7. import com.ibm.egl.rui.widgets.Button;  
  8.   
  9. //  
  10. //  
  11. handler PageDemo type RUIhandler {initialUI = [ grid, FirstPage, Button, Button1, LastPage ],onConstructionFunction = start, title="PageDemo"}  
  12.       
  13.     grid DataGrid {  
  14.         id = "pageDemo",   
  15.         pageSize = 5,  
  16.         margin = 20,  
  17.         showButtonBar = false,  
  18.         pageChangeListeners = [myPageChangeListener,myPageChangeListener1]        
  19.     };  
  20.     FirstPage Button{ text = "FirstPage", onClick ::= FirstPage_onClick };  
  21.     Button Button{ text = "Previous Page", onClick ::= Button_onClick };  
  22.     Button1 Button{ text = "Next Page", onClick ::= Button1_onClick };  
  23.     LastPage Button{ text = "Last Page", onClick ::= LastPage_onClick };  
  24.       
  25.     function start()  
  26.         data GridEmployee[0];  
  27.         names String[] = [ "Jane", "Joe", "Mary", "Fred" ];  
  28.         for (n int from 1 to 92)  
  29.             data += new GridEmployee {   
  30.                 id = n, age = 20 + n % 6,  name = names[1+n%4],home = n%2 == 1  
  31.             };  
  32.         end  
  33.         data[2].name="";  
  34.         data[4].name="";  
  35.         grid.data = data as any[];   
  36.     end  
  37.       
  38.     function FirstPage_onClick(event Event in)  
  39.         grid.gotoPage(1);  
  40.     end   
  41.       
  42.     function Button_onClick(event Event in)  
  43.         grid.gotoPage(grid.getCurrentPageIndex() - 1);  
  44.     end  
  45.       
  46.     function Button1_onClick(event Event in)  
  47.         grid.gotoPage(grid.getCurrentPageIndex() + 1);  
  48.     end  
  49.       
  50.     function LastPage_onClick(event Event in)  
  51.         grid.gotoPage(grid.getPageCount());  
  52.     end  
  53.       
  54.     function myPageChangeListener(grid DataGrid in, oldPageIndex int in, newPageIndex int in)  
  55.         syslib.writeStdout("Page Change from " + oldPageIndex + " to "+ newPageIndex);  
  56.     end  
  57.       
  58.     function myPageChangeListener1(grid DataGrid in, oldPageIndex int in, newPageIndex int in)  
  59.         syslib.writeStdout("The second page change listener is invoked");  
  60.     end  
  61. end  

8. Behavior示例

之前的章节中，我们已经介绍过一些behaviors，headerBehaviors和editorBehaviors属性的知识。他们通过规定代理函数的格式来使用户遵循一定方式来编写单元格或者表头单元的行为函数。下面这个例子中，不同的列会用不同的控件来显示，并且每列的onChange操作的相应listener函数都不尽相同。


[java]  view plain copy
  1. package client;  
  2.   
  3. // RUI Handler  
  4.   
  5. import org.eclipse.edt.rui.widgets.Box;  
  6. import org.eclipse.edt.rui.widgets.CheckBox;  
  7. import org.eclipse.edt.rui.widgets.Combo;  
  8. import org.eclipse.edt.rui.widgets.DataGrid;  
  9. import org.eclipse.edt.rui.widgets.DataGridColumn;  
  10. import org.eclipse.edt.rui.widgets.HTML;  
  11. import org.eclipse.edt.rui.widgets.TextField;  
  12. import eglx.java.class;  
  13. import eglx.persistence.id;  
  14. import eglx.persistence.sql.Column;  
  15. import eglx.rbd.StrLib;  
  16. import eglx.ui.rui.Event;  
  17. import eglx.ui.rui.RUIHandler;  
  18. import eglx.ui.rui.Widget;  
  19.   
  20. //  
  21. //  
  22. handler EditorBehaviorDemo type RUIhandler {initialUI = [ ui ],onConstructionFunction = start}  
  23.       
  24.     grid DataGrid {  
  25.         editorBehaviors = [myFunction],  
  26.         id = "EditorBehaviorDemo",   
  27.         columns = [  
  28.             new DataGridColumn { name = "id", displayName = "ID"},  
  29.             new DataGridColumn { name = "age", displayName = "Age"},  
  30.             new DataGridColumn { name = "name", displayName = "First Name"},  
  31.             new DataGridColumn { name = "home", displayName = "@Home"}  
  32.         ],  
  33.         pageSize = 7,  
  34.         margin = 20  
  35.     };  
  36.       
  37.     html HTML = new HTML{ text = "<h3>EditorBehaviorDemo shows how to set cell widget for DataGrid.</h3><br/>" +   
  38.     "Enter row index and column index in the textfield, then click enable cell widget to toggle cell widget for the specified row/column <br/>" +  
  39.     "Click Get Cell Widget, the age column of row 2 should have red background.<br/>" +  
  40.     "The buttons should only affect 1 grid<br/>" +   
  41.     "The \"FirstName\" value in the first grid should be stored after paging and sorting"};  
  42.     ui Box{ padding=8 ,columns=1, children=[ html, grid ]};  
  43.     TextField1 TextField{maxlength=2,marginRight=12, width=10};  
  44.     TextField2 TextField{maxlength=2,marginRight=12, width=10};  
  45.     TextField3 TextField{maxlength=2,marginRight=12, width=10};  
  46.     TextField4 TextField{maxlength=2,marginRight=12, width=10};  
  47.     isActivated boolean = true;  
  48.       
  49.     function start()  
  50.         data GridEmployee[];  
  51.         names String[] = [ "Jane", "Joe", "Mary", "Fred" ];  
  52.         for (n int from 1 to 10)  
  53.             data.appendElement(new GridEmployee {   
  54.                 id = n, age = 20 + n % 6, name = names[1+n%3], home = n%2 == 1  
  55.             });  
  56.         end  
  57.         grid.data = data as any[];  
  58.     end  
  59.       
  60.     function myFunction(grid DataGrid in, cell Widget in,rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns (Widget)   
  61.         case(column.name)  
  62.             when("name")   
  63.                 combo Combo { values = [ "Jane", "Joe", "Mary", "Fred" ], onChange ::= handleComboChange };  
  64.                 selIndex int = 0;  
  65.                 for (n int from 1 to combo.values.getSize() by 1)  
  66.                     if (value as String == combo.values[n])  
  67.                         selIndex = n;  
  68.                         exit for;  
  69.                     end  
  70.                 end  
  71.                 combo.selection = selIndex;  
  72.                 return (combo);  
  73.             when("age")  
  74.                 editor TextField {   
  75.                     backgroundColor = "transparent",  
  76.                     borderWidth = 1,  
  77.                     padding = 0,  
  78.                     marginTop = -1,  
  79.                     marginBottom = -1,  
  80.                     text = value,  
  81.                     fontSize = "1.0em",  
  82.                     onChange ::= handleTextFieldChange,  
  83. //                  onFocusLost ::= textFieldFocusLost,   
  84. //                  onKeyPress ::= textFieldKeyPress,  
  85.                     class = "EditableGridEditor"          
  86.                 };  
  87.                 return (editor);  
  88.             when("home")  
  89.                 editor CheckBox {  
  90.                     selected = (value as String == "true"),  
  91.                     onChange ::= handleCheckBoxChange,  
  92.                     class = "EditableGridCheckBox"        
  93.                 };  
  94.                 return (editor);  
  95.             otherwise  
  96.                 return (null);  
  97.         end  
  98.     end   
  99.       
  100.     function handleTextFieldChange(e Event in)  
  101.         text TextField = e.widget;  
  102.         cell Widget = text.parent;  
  103.         rowNumber int = cell.getAttribute("row");             
  104.         columnNumber int = cell.getAttribute("column");  
  105.         columnName String = strlib.lowerCase(grid.columns[columnNumber].name);  
  106.         grid.data[rowNumber][columnName] = text.text;     
  107.     end  
  108.     function handleCheckBoxChange(e Event in)  
  109.         check CheckBox = e.widget;  
  110.         cell Widget = check.parent;  
  111.         rowNumber int = cell.getAttribute("row");             
  112.         columnNumber int = cell.getAttribute("column");  
  113.         columnName String = strlib.lowerCase(grid.columns[columnNumber].name);  
  114.         grid.data[rowNumber][columnName] = check.selected;    
  115.     end  
  116.     function handleComboChange(e Event in)  
  117.         combo Combo = e.widget;  
  118.         cell Widget = combo.parent;  
  119.         rowNumber int = cell.getAttribute("row");             
  120.         columnNumber int = cell.getAttribute("column");  
  121.         columnName String = strlib.lowerCase(grid.columns[columnNumber].name);  
  122.         grid.data[rowNumber][columnName] = combo.values[combo.selection];     
  123.     end  
  124. end  


9. DataGrid Tooltips

如果你需要为DataGrid添加tooltip，你可以通过如下两种方式：

  • 如果你需要不论鼠标停留在DataGrid的哪里，都显示同样的tooltip的话。你可以通过声明一个全局的tooltip控件，并且在某些方法中激活它。例如在on-construction函数中或者behaviors，headerBehaviors属性函数中。
  • 如果你想在不同单元格，行或者列显示不同的tooltips的话，你可以使用DataGrid tooltip，它和tooltip控件类似但是却总是需要指定Grid-tooltip提供函数。这个函数将会返回一个box控件，其中包括需要显示的tooltip信息。

以下是创建DataGrid tooltip的过程：

  • 声明一个DataGridTooltip，其中包含一个Grid-tooltip提供函数和一个延时属性来表明当鼠标悬停多久以后会触发Tooltip：
[java]  view plain copy
  1. gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };  

你需要import相应的控件：

[java]  view plain copy
  1. import egl.rui.widgets.DataGridToolTip;  
  • 当为behaviors属性赋值一个数组时需要调用Grid-tooltip的一个函数。本例中，这个函数是gridTooltip.setToolTips。
  • 创建一个与DataGridToolTip的provider属性相同的函数。这个函数需要遵循如下代理函数定义：
[java]  view plain copy
  1. Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in,  td Widget in) returns(Box)     
  2. end  

row

提供到函数中的行信息。你可以通过输入值来访问特定的值。考虑如下数据定义：

[java]  view plain copy
  1. stocks Stock[] = [  
  2.          new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false},   
  3.          new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}  
  4.     ];   

在provider函数中，你可以判断哪一行是鼠标停留的地方：

[java]  view plain copy
  1. if (rowData.Quote as int == 200)  
  2.    // place content in a box (the tooltip) and return the tooltip  
  3. end  

fieldname 为函数提供的列数据

td         一个内部空间来展示Grid单元格。

  • 你不需要开启DataGrid tooltip；他会在声明时自动被开启。
lcczzu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DataGrid控件用法详解
10-10
DataGrid控件是操作表格、数据库的重要控件，这里是其用法详解
datagrid控件讲解
weixin_41563376的博客
05-24 777
datagrid控件：在VisualStudio中Razor视图引擎中使用datagrid控件实现对应的效果
2024 DataGrip 激活，分享几个DataGrip 激活的方案
ladymorgana的博客
03-05 4375
JetBrains 是一家专注于开发工具的软件公司，总部位于捷克。他们以提供强大的集成开发环境（IDE）而闻名，如 IntelliJ IDEA、PyCharm、和 WebStorm等。这些工具被广泛用于 Java、Python、JavaScript 等编程语言的开发，因其智能化和高效性而备受开发者喜爱。DataGrip 的强大之处在于快捷键。您可以更改对您来说不方便的快捷键，并将您自己的快捷键分配给 IDE 内的任何操作。
WPF 控件专题 DataGrid 控件详解
^@^lemon tea^@^
09-23 7495
WPF 控件专题 DataGrid 控件详解
【WPF应用32】WPF中的DataGrid控件详解与示例
最新发布
qq_35320456的博客
04-04 1368
WPF中的DataGrid控件详解与示例
DataGrid控件
03-19
NULL 博文链接：https://luyao123127.iteye.com/blog/699936
WPF, datagrid 分页控件
02-23
wpf 分页控件例子，亲测可用哦
VB利用DataGrid控件辅助录入MSHFlexGrid数据
05-11
一个标准的VB编辑控件，VB利用DataGrid控件辅助录入数据，当输入数据并按下 ENTER 键，或用鼠标单击MSHFlexGrid控件中的另一个单元时，焦点将返回此控件。这时 TextBox 中的文本被复制到活动单元中。ESC:隐藏焦点并...
wpf datagrid控件
12-02
这是一个c#版本的wpf datagrid控件，实现自定义wpf datagrid控件。
DataGrid控件详细介绍
01-01
本文档按逻辑分为5个章节介绍DataGridView，首先是结构和特性的概览，其次是内置的列/单元格类型的介绍，再次是数据操作相关的内容，然后是主要特性的综述，最后是最佳实践。
DataGrid控件属性全解
星瞳
09-24 5024
 DataGrid控件DataGrid控件在一个表格中显示一个数据源的字段 属性说明AllowCustomPaging获取或设置指示是否启用自定义分页的值。AllowPaging获取或设置指示是否启用分页的值。AllowSorting获取或设置指示是否启用排序的值。AlternatingItemStyle获取
对webdatagrid只取有更改的行
weixin_30391339的博客
04-16 116
在实际工作中，我们也许会对绑定的datagrid进行编辑，有的情况下，我们只需要得到有变更的行，在后台取不仅效率不高且不方便，所以我在前台来进行操作。 具体的步骤为： 1.　在单元格编辑后执行Editing_CellValueChanged事件，记录变更的行号。 2.　模板列（TemplateDataField）中的控件发生改变是不会触发CellValueChanged事件的，所以需要为控件...
DataGridView控件中加入下拉框的编程实现
ShadowSun的专栏
06-11 4185
以下是在网上看到的网友发的文章“VC++.NET2005中DataGridView控件中加入下拉框的编程实现”用C#作了 修改的后的方法如下： VS2005中新增加了数据浏览控件DataGridView，虽然我们可以通过其DataGridViewComboBoxColumn方法在DataGridView中添加下拉框列，但随之而来得问题是一整列的下拉框，很不美观，并且还要编程为其绑定数据
web自定义控件示例，一个自动分页的datagrid例子
cpp2017(慕白兄)的专栏
03-22 1714
 以下是一个web自定义的示例，几年前写的，写得也不是很好，权当抛砖引玉。主要实现datagrid的分页功能：调用使用方法：        this.DataGrid1.ConnectionString =  DataClass.ConnectionString; //这里指定一个连接字串。        this.DataGrid1.strSQL = strSQL;       
WebDatagrid前台后台选中行
weixin_30457065的博客
11-30 208
前台代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebDataGridSelectRow.aspx.cs" Inherits="BasisFile_WebDataGridSelectRow" %> <%@ Register Assembly="Infragistics4.Web.v15.1...
DataGridView详解（详细）
这个人好有趣....hh
11-14 8229
DataGridView控件提供一种强大而灵活的以表格形式显示数据的方式。可以使用DataGridView控件来显示少量数据的只读视图，也可以对其进行缩放以显示特大数据集的可编辑视图。使用DataGridView控件，可以显示和编辑来自多种不同类型的数据源的表格数据。将数据绑定到DataGridView控件非常简单和直观，在大多数情况下，只需设置DataSource属性即可。DataGridView控件具有极高的可配置性和可扩展性，它提供了大量的属性、方法和事件，可以用来对该控件的外观和行为进行自定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值