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 格式