当前位置：首页 > news >正文

winform基于antdui中table控件的使用

news 来源：原创 2025/5/23 15:56:21

官方链接gitee：AntdUI/AntdUI

Table表格属性、方法：

属性：

名称	描述	类型	默认值
Gap	间距	int	12
Radius 🔴	圆角	int	0
CheckSize	复选框大小	int	16
SwitchSize 🔴	开关大小	int	16
TreeButtonSize 🔴	树开关按钮大小	int	16
FixedHeader	固定表头	bool	true
VisibleHeader 🔴	显示表头	bool	true
Bordered	显示列边框	bool	false
RowHeight 🔴	行高	int`?`	`null`
RowHeightHeader 🔴	表头行高	int`?`	`null`
EnableHeaderResizing	手动调整列头宽度	bool	false
ColumnDragSort	列拖拽排序	bool	false
LostFocusClearSelection	焦点离开清空选中	bool	false
AutoSizeColumnsMode 🔴	列宽自动调整模式	ColumnsMode	Auto
ClipboardCopy	行复制	bool	true
EditMode	编辑模式	TEditMode	None
ShowTip	省略文字提示	bool	true
DefaultExpand 🔴	默认是否展开 `树`	bool	false
Empty	是否显示空样式	bool	true
EmptyText	数据为空显示文字	string	No data
EmptyImage	数据为空显示图片	Image`?`	`null`
EmptyHeader	空是否显示表头	bool	false
RowSelectedBg	表格行选中背景色	Color`?`	`null`
RowSelectedFore 🔴	表格行选中字色	Color`?`	`null`
BorderColor 🔴	表格边框颜色	Color`?`	`null`
ColumnFont 🔴	表头字体	Font`?`	`null`
ColumnBack 🔴	表头背景色	Color`?`	`null`
ColumnFore 🔴	表头文本色	Color`?`	`null`
SelectedIndex	选中行	int	-1
Columns	表格列的配置	ColumnCollection	`null`
DataSource	数据数组	object `?`	`支持DataTable，Class等`

方法：

名称	描述	返回值	参数
ScrollLine	滚动到指定行	void	int i
CopyData	复制表格数据	void	int row `行`
CopyData	复制表格数据	void	int row `行` , int column `列`
EnterEditMode	进入编辑模式	void	int row `行` , int column `列`
SortIndex 🔴	获取排序序号	int[]
SortList 🔴	获取排序数据	object[]

Table表格双击单元格实现修改内容操作，通过调用CellEndEdit事件，处理修改后逻辑：

主要是通过事件参数e，获取当前修改是哪一行var row = e.RowIndex - 1;然后在通过该行索引，获取该行的数据内容，在执行后续的更新逻辑。

private bool table1_CellEndEdit(object sender, AntdUI.TableEndEditEventArgs e)
{
    var newVal = e.Value;
    var row = e.RowIndex - 1; // 当前行数据
    var column = e.ColumnIndex; // 当前列

    var dataSource = table1.DataSource as List<TestClass>;
    if (dataSource == null)
    {
        MessageBox.Show("数据源无效！");
        return false;
    }
    var rowData = dataSource[row];
    var columnName = table1.Columns[column].Key;
    switch (columnName)
    {
        case "Name":
            rowData.Name = newVal.ToString();
            break;
        case "Age":
            rowData.Age = Convert.ToInt32(newVal);
            break;
        case "Job":
            rowData.Job = newVal.ToString();
            break;
        default:
            MessageBox.Show("无效的列名！");
            return false;
    }
    DialogResult result = MessageBox.Show("是否更新数据？", "数据更新", MessageBoxButtons.YesNo);
    if (result == DialogResult.Yes)
    {
        // 保存到数据库
        UpdateToDatabase(rowData);

        // 刷新表格
        table1.DataSource = null; // 清空数据源
        table1.DataSource = dataSource; // 重新绑定数据源
        _logHelper.Log("数据更新成功");
        // 返回 true 表示更新成功
        return true;
    }
    else
    {
        // 返回 false 表示取消更新
        return false;
    }
}

表头类型：

如下用于初始化table表头的创建配置：

table1.Columns = new AntdUI.ColumnCollection
{
    new AntdUI.ColumnCheck("check").SetFixed(),
    new AntdUI.Column("name", "姓名").SetFixed().SetLocalizationTitleID("Table.Column."),
    new AntdUI.ColumnCheck("checkTitle", "不全选标题").SetColAlign().SetLocalizationTitleID("Table.Column."),
    new AntdUI.ColumnRadio("radio", "单选").SetLocalizationTitleID("Table.Column."),
    new AntdUI.Column("online", "状态", AntdUI.ColumnAlign.Center).SetLocalizationTitleID("Table.Column."),
    new AntdUI.ColumnSwitch("enable", "启用", AntdUI.ColumnAlign.Center)
    {
        LocalizationTitle ="Table.Column.{id}",
        Call = (value, record, i_row, i_col) => {
            System.Threading.Thread.Sleep(2000);
            return value;
        }
    },
    new AntdUI.Column("age", "年龄", AntdUI.ColumnAlign.Center).SetLocalizationTitleID("Table.Column."),
    new AntdUI.Column("address", "住址").SetLocalizationTitleID("Table.Column."),
    new AntdUI.Column("tag", "Tag"),
    new AntdUI.Column("imgs", "图片").SetLocalizationTitleID("Table.Column."),
    new AntdUI.Column("btns", "操作").SetFixed().SetWidth("auto").SetLocalizationTitleID("Table.Column."),
};

属性	描述
SetFixed()	使该列固定（在表格滚动时，列内容保持可见）。
SetLocalizationTitleID("Table.Column.")	为该列标题设置本地化ID，使得可以通过本地化资源文件加载不同语言的标题。
SetColAlign()	设置该列的对齐方式。
AntdUI.ColumnAlign.Center	将列内容水平居中对齐
SetWidth("auto")	列的宽度设置为自动调整。

Column

多样表头，可以创建多种形式表头，普通表头、按钮表头、徽标、富文本、进度条等等，按钮表头通过嵌入按钮来实现按钮点击操作：

属性名称	描述	类型	必填	默认值
Key	绑定名称	string	✅
Title	显示文字	string	✅

Visible 🔴	是否显示	bool	⛔	true
Align	对齐方式	ColumnAlign	⛔	ColumnAlign.Left
ColAlign 🔴	表头对齐方式	ColumnAlign？	⛔	null
Width	列宽度	string？	⛔
MaxWidth 🔴	列最大宽度	string？	⛔

Fixed	列是否固定	bool	⛔	false
Ellipsis	超过宽度将自动省略	bool	⛔	false
LineBreak 🔴	自动换行	bool	⛔	false
SortOrder 🔴	启用排序	bool	⛔	false
KeyTree 🔴	树形列	string？	⛔

ColumnCheck

复选框表头，可以使用该行的勾选状态。继承于 Column

名称	描述	类型	必填	默认值
Key	绑定名称	string	✅

Columnadio

单选框表头。继承于 Column

名称	描述	类型	必填	默认值
Key	绑定名称	string	✅
Title	显示文字	string	✅

ColumnSwitch

开关表头，可以用来设置改行是否启用。继承于 Column

名称	描述	类型	必填	默认值
Key	绑定名称	string	✅
Title	显示文字	string	✅
Call	改变回调	Func<bool, object?, int, int, bool>`?`

Cell单元格配置

CellText

富文本文本单元格，可以带图标，不同的字体。

名称	描述	类型	默认值
Fore	字体颜色	Color`?`
Back	背景颜色	Color`?`
Font	字体	Font`?`
IconRatio 🔴	图标比例	float	0.7F
Prefix 🔴	前缀	Image`?`
PrefixSvg 🔴	前缀SVG	string`?`
Suffix 🔴	后缀	Image`?`
SuffixSvg 🔴	后缀SVG	string`?`
Text	文本	string`?`

初始化设置：

private CellText cellText;
public CellText CellText
{
    get { return cellText; }
    set
    {
        if (cellText == value) return;
        cellText = value;
        OnPropertyChanged(nameof(CellText));
    }
}

CellText = new CellText("这是一个带图标的文本")
{
    IconRatio = 0.5f,
    PrefixSvg = "<svg viewBox=\"64 64 896 896\" focusable=\"false\" data-icon=\"search\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z\"></path></svg>"
},

CellBadge

徽标显示在单元格内

名称	描述	类型	默认值
Fore	字体颜色	Color`?`
Fill	颜色	Color`?`
State	状态	TState	Default
Text	文本	string`?`

初始化构建：

private CellBadge cellBadge;
public CellBadge CellBadge
{
    get { return cellBadge; }
    set
    {
        if (cellBadge == value) return;
        cellBadge = value;
        OnPropertyChanged(nameof(CellBadge));
    }
}
CellBadge = new CellBadge(TState.Processing, "测试中")

TState状态属性，每一个属性对应一种不同的样式：

名称	描述
Primary	主要
Default	默认
Success	成功
Error	错误
Processing	处理中
Warn	警告

CellTag

标签

名称	描述	类型	默认值
Fore	字体颜色	Color`?`
Back	背景颜色	Color`?`
BorderWidth	边框宽度	float	1F
Type	类型	TTypeMini	Default
Text	文本	string`?`

private CellTag[] cellTags;
public CellTag[] CellTags
{
    get { return cellTags; }
    set
    {
        if (cellTags == value) return;
        cellTags = value;
        OnPropertyChanged(nameof(CellTags));
    }
}
CellTags = new CellTag[] {
    new CellTag("测试", TTypeMini.Primary),
    new CellTag("测试", TTypeMini.Success),
    new CellTag("测试", TTypeMini.Warn) };

如上代码，在CellTags单元格内创建了三个标签，其他类型的单元格也可以通过数组创建多个控件。

TTypeMini类型属性：

名称	描述
Default	默认
Primary	主要
Success	成功
Error	错误
Warn	警告
Info	信息

CellImage

可以在单元格内展示图片

名称	描述	类型	默认值
BorderColor	边框颜色	Color`?`
BorderWidth	边框宽度	float	0F
Radius	圆角	int	6
Round	圆角样式	bool	false
Size	自定义大小	Size`?`
Image	图片	Image`?`	`null`
ImageSvg	图片SVG	string`?`	`null`
FillSvg	SVG填充颜色	Color`?`
ImageFit	图片布局	TFit	Fill
Tooltip 🔴	文本提示	string`?`

private CellImage[] cellImages;
public CellImage[] CellImages
{
 get { return cellImages; }
 set
 {
     if (cellImages == value) return;
     cellImages = value;
     OnPropertyChanged(nameof(CellImages));
 }
}
CellImages = new CellImage[] { new CellImage(Properties.Resources.head) };
// Properties.Resources.head是一个图片资源
// 这里只添加了一个图片，如果要添加多个，就以“，”分割多new几个CellImage出来

TFit 图片布局属性

名称	描述
Fill	调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象
Contain	缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框
Cover	调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应
None	不对替换的内容调整大小

CellLink

超链接,也可以new CellButton

名称	描述	类型	默认值
Id	ID	string
Enabled	启用	bool	true
Text	文本	string`?`
TextAlign	文本位置	ContentAlignment	MiddleCenter
Tooltip 🔴	文本提示	string`?`

private CellLink[] cellLinks;
public CellLink[] CellLinks
{
    get { return cellLinks; }
    set
    {
        if (cellLinks == value) return;
        cellLinks = value;
        OnPropertyChanged(nameof(CellLinks));
    }
}
CellLinks = new CellLink[] {
    new CellLink("https://gitee.com/antdui/AntdUI", "AntdUI"),  // 超链接
    new CellButton(Guid.NewGuid().ToString(),"编辑",TTypeMini.Primary), // button
    new CellButton(Guid.NewGuid().ToString(),"删除",TTypeMini.Error),
    new CellButton(Guid.NewGuid().ToString(),"查看图片",TTypeMini.Primary)
};

CellButton

按钮控件，继承自CellLink

名称	描述	类型	默认值
Fore	字体颜色	Color`?`
Back	背景颜色	Color`?`
BackHover	悬停背景颜色	Color`?`
BackActive	激活背景颜色	Color`?`
DefaultBack 🔴	Default模式背景颜色	Color`?`
DefaultBorderColor 🔴	Default模式边框颜色	Color`?`
Radius	圆角	int	6
BorderWidth	边框宽度	float	0F
IconRatio 🔴	图标比例	float	0.7F
Image 🔴	图像	Image`?`	`null`
ImageSvg 🔴	图像SVG	string`?`	`null`
ImageHover 🔴	悬停图像	Image`?`	`null`
ImageHoverSvg 🔴	悬停图像SVG	string`?`	`null`
ImageHoverAnimation 🔴	悬停图像动画时长	int	200
Shape	形状	TShape	Default
Ghost	幽灵属性 `使按钮背景透明`	bool	false
ShowArrow	显示箭头	bool	false
IsLink	箭头链接样式	bool	false
Type	类型	TTypeMini	Default
Text	文本	string`?`

创建一个普通的按钮：

new CellButton(Guid.NewGuid().ToString(),"编辑",TTypeMini.Primary),

创建一个具有下拉框属性的按钮：

new CellButton(Guid.NewGuid().ToString(), "徽标", TTypeMini.Success)
{
    //支持所有单元格控件
    // 创建下拉列表元素
    DropDownItems = new ISelectItem[]
    {
         new AntdUI.SelectItem(TState.Default),
         new AntdUI.SelectItem(TState.Primary),
         new AntdUI.SelectItem(TState.Success),
         new AntdUI.SelectItem(TState.Error),
         new AntdUI.SelectItem(TState.Warn),
         new AntdUI.SelectItem(TState.Processing),

    },
    // 当下拉列表值改变时触发的事件操作
    // 这里实现的操作是通过下拉选择的不同徽标，将其赋给另外一徽标控件上
    DropDownValueChanged = (value) =>
    {
        string badge = value.ToString();
        switch(badge) {
        case "Default":
                curUser.CellBadge = new CellBadge(TState.Default, badge); break;
        case "Primary":
                curUser.CellBadge = new CellBadge(TState.Primary, badge); break;
        case "Success":
                curUser.CellBadge = new CellBadge(TState.Success, badge); break;
        case "Error":
                curUser.CellBadge = new CellBadge(TState.Error, badge); break;
        case "Warn":
                curUser.CellBadge = new CellBadge(TState.Warn, badge); break;
        case "Processing":
                curUser.CellBadge = new CellBadge(TState.Processing, badge); break;
        }
    }
},

通过调用表格的CellButtonClick点击事件来实现单元格按钮被点击时处理对应业务逻辑：

如下代码通过点击按钮，实现将某一单元格数值置零：

private void Table_base_CellButtonClick(object sender, TableButtonEventArgs e)
{
    // 获取鼠标点击按钮的id值，指定点击的哪一个
    var buttontext = e.Btn.Id;

    if (e.Record is ControlItemStatisticsData info)
    {
        curControlItem = info;
        switch (buttontext)
        {
            //暂不支持进入整行编辑，只支持指定单元格编辑，推荐使用弹窗或抽屉编辑整行数据
            case "BtnUsageReset":
                var result = AntdUI.Modal.open(this, "清零警告！", "确认要清零吗？", TType.Warn);
                if (result == DialogResult.OK)
                    curControlItem.Used = 0;
                break;
            case "BtnAccumulatedReset":
                //超链接内容
                result = AntdUI.Modal.open(this, "清零警告！", "确认要清零吗？", TType.Warn);
                if (result == DialogResult.OK)
                {
                    curControlItem.TotalAccumulatedCount = 0;
                }
                break;
        }
    }
}

CellProgress

进度条

名称	描述	类型	默认值
Back	背景颜色	Color`?`
Fill	进度条颜色	Color`?`
Radius	圆角	int	6
Shape	形状	TShape	Default
Value	进度条 `0.0-1.0`	float	0F

private CellProgress cellProgress;
public CellProgress CellProgress
{
    get { return cellProgress; }
    set
    {
        if (cellProgress == value) return;
        cellProgress = value;
        OnPropertyChanged(nameof(CellProgress));
    }
}
CellProgress = new CellProgress(0.5f);  // 设置圆角弧度值

使用 BindingList 或 AntList 作为List，并在设置数据时使用Binding(AntList<T> list)来绑定实现数据在table上的实时更新。

使用类继承 NotifyProperty OR INotifyPropertyChanged，并在set时触发OnPropertyChanged (string 字段名称)

public class TestClass : AntdUI.NotifyProperty
{
    bool _check = false;
    public bool check  // check与表头的key值对应
    {
        get => _check;
        set
        {
            if (_check == value) return;
            _check = value;
            OnPropertyChanged();  // 必须触发该事件，才能将数据映射到对应单元格中
        }
    }
}