aardio 文档

dotNet.ReoGrid 扩展库 - ReoGrid 内置单元格类型

ReoGrid 中的单元格可以包含单元格体(cell body),单元格体是一个接口,用于在单元格中显示自定义内容并与用户输入交互。自定义单元格体类必须继承自 CellBody 或实现 ICellBody 接口。更多关于单元格体的信息,请参阅自定义单元格。

以下是可用的内置单元格体类型:

类名 示例 描述
ButtonCell 按钮 普通按钮
CheckBoxCell 复选框 复选框,可在 .NET 布尔值 true 和 false 之间切换单元格数据
RadioButtonCell 单选按钮 单选按钮,可在 true 和 false 之间切换单元格数据,同组单选按钮可互相切换
HyperlinkCell 超链接 超链接,可自动导航到指定 URL
DropDownListCell 下拉列表 下拉单元格,提供候选列表让用户选择单个项目作为单元格数据
ProgressCell 进度条 进度单元格,根据单元格数据 0~1 显示进度条
NegativeProgressCell 负进度条 负进度单元格,可根据单元格数据 0~1 显示正负进度条
Image 图像 图像单元格,在单元格中显示图像
ImageButton 图像按钮 图像按钮单元格,在单元格按钮上显示图像
DatePickerCell 日期选择器 日期选择器单元格,允许用户从下拉日历中选择日期

要使用内置单元格类型,需要导入以下命名空间:

import dotNet.ReoGrid;

按钮

ButtonCell 类表示工作表中的按钮控件。

按钮单元格

sheet1[1,2] = ReoGrid.CellTypes.ButtonCell("你好");

单元格体通常使用单元格的数据作为其标签,以下代码同样有效:

sheet1[1,2] = ReoGrid.CellTypes.ButtonCell();
sheet1[1,2] = "你好";

按钮点击事件

当用户点击按钮时,会触发 Click 事件。

var button = ReoGrid.CellTypes.ButtonCell("你好");
button.Click = function(sender,event){
    winform.msgbox("按钮被点击了");
}

模拟点击

可以使用 PerformClick 方法模拟点击事件,例如:

button.PerformClick();

更改按钮文本颜色

通过更改单元格样式可以更改按钮标签的颜色,例如以下代码将按钮标签改为蓝色:

var cell = sheet1.Cells["C3"];
cell.Style.TextColor = ReoGrid.Graphics.SolidColor.Blue;
var button = ReoGrid.CellTypes.ButtonCell("你好");
cell.Body = button;

蓝色按钮

超链接

超链接使用单元格的数据作为其导航 URL。

超链接示例

sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell("http://www.google.com");
// 或者
sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell();
sheet1[1,2] = "http://www.google.com";

自动导航

构造函数的第二个参数 autoNavigate 指定用户点击此超链接时是否自动导航到指定 URL。例如:

sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell("http://www.google.com/", true);

超链接点击事件

当用户点击此超链接时触发 Click 事件。

如果 autoNavigate 参数为 true,则在触发此事件之前会先执行 URL 导航。要避免这种情况,请将 autoNavigate 设置为 false。

var link = ReoGrid.CellTypes.HyperlinkCell("http://myurl.com", false);
link.Click = function(sender,event){
    // 执行自定义事件处理
};

模拟点击

可以使用 PerformClick 方法模拟点击事件,例如:

link.PerformClick();

复选框

CheckBoxCell 类表示工作表中的复选框,但它不提供要在工作表上显示的标签。通常需要在复选框单元格前后放置标签,如下图所示:

复选框示例

var checkboxCell = ReoGrid.CellTypes.CheckBoxCell();
// 添加复选框和文本标签
sheet1["C1"] = { checkboxCell, "5分钟后自动销毁" };

获取和设置选中状态

直接使用布尔值设置单元格数据来选中或取消选中复选框,或使用 IsChecked 属性获取选中状态。

// 选中
sheet1[1, 2] = true;
// 取消选中
sheet1[1, 2] = false;
// 从工作表获取选中状态
var isChecked = sheet1["C1"] ? true : false;
// 从复选框获取或设置选中状态
var isChecked = checkboxCell.IsChecked;

点击和选中状态改变事件

当用户点击复选框时触发 Click 事件。当用户在单元格内按空格键时不会触发 Click 事件。

checkboxCell.Click = function(sender,event){
    // 执行事件处理
};

当用户通过鼠标或键盘更改复选框状态时触发 CheckChanged 事件。

checkboxCell.CheckChanged = function(sender,event){
    // 执行事件处理
};

单元格数据改变事件

由于复选框单元格将单元格数据更新为布尔值。当复选框状态改变时,也会触发 CellDataChanged 事件。

sheet1.CellDataChanged = function(sender,event){
    if(event.Cell.Position == "C1"){
        winform.msgbox("复选框状态已更改: " + event.Cell.Data);
    }
};

复选框的自定义绘制

要自定义复选框的外观而不是使用内置样式, 我们可以在 aardio 中调用 C# 代码编译一个继承自 ReoGrid.CellTypes.CellBody 的 .NET 类, 并重写 OnContentPaint 方法。

请参考:自定义单元格

以下示例使用选中和未选中的图像绘制复选框:

import win.ui;
/*DSG{{*/
var winform = win.form(text="ReoGrid - 自定义单元格")
/*}}*/

import dotNet.ReoGrid; 
var grid = ReoGrid.ReoGridControl(winform);
var sheet1 = grid.CurrentWorksheet;

import dotNet.ReoGrid.Compiler;
var compiler = dotNet.ReoGrid.Compiler();

//C# 源代码
compiler.Source = /***
using System;
using unvell.ReoGrid;
using unvell.ReoGrid.CellTypes;
using unvell.ReoGrid.Events;
using unvell.ReoGrid.Rendering;
using unvell.ReoGrid.Graphics;
using unvell.ReoGrid.Interaction;
using System.Drawing;

namespace aardio.ReoGrid {
    public class MyCheckBox : CheckBoxCell {
        Image checkedImage, uncheckedImage;
        public MyCheckBox(string checkPath,string unCheckPath) {
            checkedImage = Image.FromFile(checkPath);
            uncheckedImage = Image.FromFile(unCheckPath);
        }
        protected override void OnContentPaint(CellDrawingContext dc) {
            if (this.IsChecked) {
                dc.Graphics.DrawImage(checkedImage, this.ContentBounds);
            } else {
                dc.Graphics.DrawImage(uncheckedImage, this.ContentBounds);
            }
        }
    }
}
***/

//编译 C# 代码并生成程序集
compiler.CompileOrFail("/MyCheckBox.dll");

//加载程序集
var dll = dotNet.loadFile("/MyCheckBox.dll");

//在 aardio 中创建 .NET 对象
var MyCheckBox = dll.import("aardio.ReoGrid.MyCheckBox");

//加载到单元格
sheet1["C1"] = MyCheckBox(
    io.fullpath("\images\check.jpg"),
    io.fullpath("\images\unheck.jpg"),
);

winform.show();
win.loopMessage();

自定义复选框

单选按钮

RadioButtonCell 类表示工作表中的单选按钮,它继承自 CheckBoxCell 类,因此单选按钮单元格的用法与复选框几乎相同。

单选按钮示例

要添加单选按钮,使用以下代码:

var radio = ReoGrid.CellTypes.RadioButtonCell();
sheet1["C3"] = radio;

单选按钮组

将 RadioButtonCell 添加到 RadioGroup 或通过其 RadioGroup 属性指定,将使同组中的单选按钮自动互相切换。

var radioGroup = ReoGrid.RadioButtonGroup();

sheet1[10, 2] = {
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "苹果" },
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "橙子" },
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "香蕉" }
};

点击和选中状态改变事件

处理 Click 事件:

radio.Click = function(sender,event){
    // 执行事件处理
};

处理组中所有单选按钮的 CheckChanged 事件:

radioGroup.RadioButtons.forEach(function(rb){
    rb.CheckChanged = function(sender,event){
        winform.msgbox("选中的单选按钮: " + sheet1[rb.Cell.Row, rb.Cell.Column + 1]);
    };
});

单元格数据改变事件

由于单选按钮单元格将单元格数据更新为布尔值。当单选按钮状态改变时,也会触发 CellDataChanged 事件。有关示例代码,请参阅上面的复选框部分。

下拉列表

下拉列表单元格由 DropdownListCell 类表示。

下拉列表示例

在工作表中添加下拉列表单元格的代码:

var dropdown = ReoGrid.CellTypes.DropdownListCell(
    "苹果", "橙子", "香蕉", "梨", "南瓜", "樱桃", "椰子"
);
sheet1["B2"] = dropdown;

下拉列表单元格事件

下拉列表单元格的 SelectedItemChanged 事件用于从下拉面板中获取选定的项目。

dropdown.SelectedItemChanged = function(sender,event){
    // 处理选定项改变
};

与复选框单元格类似,下拉列表单元格也会更新单元格数据,可以通过处理 CellDataChanged 事件获取选定的项目:

sheet1.CellDataChanged = function(sender,event){
    // 处理单元格数据改变
};

了解更多关于下拉列表单元格的详细信息。

自定义下拉列表

下拉单元格可以自定义,可以将 Windows 窗体兼容的控件放入下拉面板中。

自定义下拉列表示例

参阅如何创建自定义下拉单元格。

图像

图像单元格示例

添加图像单元格的代码:

import System.Drawing;
var image = System.Drawing.Image.FromFile("C:\\path\\to\\image.png");
sheet1[2, 6] = ReoGrid.CellTypes.ImageCell(image);

关键词: 图像 图片 picture picturebox image

图像单元格的视图模式

ImageCell 有一个名为 ViewMode 的属性,用于决定如何在单元格内显示图像:

// 通过指定视图模式创建 ImageCell
var imgCell = ReoGrid.CellTypes.ImageCell(img, ReoGrid.ImageCellViewMode.Zoom);
sheet1["F6"] = imgCell;
// 或者直接更改属性
imgCell.ViewMode = ReoGrid.ImageCellViewMode.Clip;

对齐方式

单元格的水平和对齐样式可用于决定图像显示的位置:

var cell = sheet1.Cells["F6"];
cell.Style.HAlign = ReoGrid.ReoGridHorAlign.Center;
cell.Style.VAlign = ReoGrid.ReoGridVerAlign.Middle;

图像按钮单元格

在单元格 C3 创建图像按钮的代码:

sheet1["C3"] = ReoGrid.CellTypes.ImageButtonCell(
    System.Drawing.Image.FromFile("C:\\PathToFile\\Save-32.png")
);

结果:

图像按钮示例

关键词: 图像 图片 图标 图标按钮 picture picturebox image

日期选择器

内置的日期选择器单元格。日期选择器示例

要使用免费版 ReoGrid 创建自己的日期选择器单元格,请参阅如何创建日期选择器单元格。

调整单元格体大小

单元格体的大小由其父单元格和填充样式值决定,也可以通过合并多个单元格使单元格变大。

Windows 窗体和 WPF 版本

ReoGrid 在 WPF 版本中支持部分单元格类型,如下所示。

内置单元格体类型 Windows 窗体 WPF
按钮 是 是
复选框 是 是
单选按钮 是 是
超链接 是 是
图像单元格 是 是
图像按钮单元格 是 是
进度条单元格 是 是
负进度条单元格 是 是
下拉单元格 是 未实现
下拉列表单元格 是 未实现
自定义单元格体 是 是

从演示项目了解更多

演示项目中的内置单元格类型示例。

Windows 窗体版本

Windows 窗体示例

WPF 版本

WPF 示例

Markdown 格式