目录

winform基于antdui中table控件的使用

winform基于antdui中table控件的使用

官方链接gitee:

Table表格属性、方法:

属性:

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

方法:

名称描述返回值参数
ScrollLine滚动到指定行voidint i
CopyData复制表格数据voidint row
CopyData复制表格数据voidint row , int column
EnterEditMode进入编辑模式voidint 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."),
};

https://i-blog.csdnimg.cn/img_convert/c777614a153b65bdf1ef5a393e1160c3.png

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

Column

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

属性名称描述类型必填默认值
Key绑定名称string
Title显示文字string
Visible 🔴是否显示booltrue
Align对齐方式ColumnAlignColumnAlign.Left
ColAlign 🔴表头对齐方式ColumnAlign?null
Width列宽度string?
MaxWidth 🔴列最大宽度string?
Fixed列是否固定boolfalse
Ellipsis超过宽度将自动省略boolfalse
LineBreak 🔴自动换行boolfalse
SortOrder 🔴启用排序boolfalse
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 🔴图标比例float0.7F
Prefix 🔴前缀Image ?
PrefixSvg 🔴前缀SVGstring ?
Suffix 🔴后缀Image ?
SuffixSvg 🔴后缀SVGstring ?
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状态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警告

https://i-blog.csdnimg.cn/img_convert/a6be0913e86bb26611890e45eb866452.png

CellTag

标签

名称描述类型默认值
Fore字体颜色Color ?
Back背景颜色Color ?
BorderWidth边框宽度float1F
Type类型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信息

https://i-blog.csdnimg.cn/img_convert/6b72fb06d3b4a8ba520810001318be1a.png

CellImage

可以在单元格内展示图片

名称描述类型默认值
BorderColor边框颜色Color ?
BorderWidth边框宽度float0F
Radius圆角int6
Round圆角样式boolfalse
Size自定义大小Size ?
Image图片Image ?null
ImageSvg图片SVGstring ?null
FillSvgSVG填充颜色Color ?
ImageFit图片布局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不对替换的内容调整大小

超链接,也可以new CellButton

名称描述类型默认值
IdIDstring
Enabled启用booltrue
Text文本string ?
TextAlign文本位置ContentAlignmentMiddleCenter
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)
};                         

https://i-blog.csdnimg.cn/img_convert/485649f2c845761cac0c83f97e4093db.png

CellButton

按钮控件,继承自CellLink

名称描述类型默认值
Fore字体颜色Color ?
Back背景颜色Color ?
BackHover悬停背景颜色Color ?
BackActive激活背景颜色Color ?
DefaultBack 🔴Default模式背景颜色Color ?
DefaultBorderColor 🔴Default模式边框颜色Color ?
Radius圆角int6
BorderWidth边框宽度float0F
IconRatio 🔴图标比例float0.7F
Image 🔴图像Image ?null
ImageSvg 🔴图像SVGstring ?null
ImageHover 🔴悬停图像Image ?null
ImageHoverSvg 🔴悬停图像SVGstring ?null
ImageHoverAnimation 🔴悬停图像动画时长int200
Shape形状Default
Ghost幽灵属性 使按钮背景透明boolfalse
ShowArrow显示箭头boolfalse
IsLink箭头链接样式boolfalse
Type类型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;
        }
    }
},

https://i-blog.csdnimg.cn/img_convert/6fe28d9fec2cc9021a08c2095889c0dd.png

通过调用表格的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圆角int6
Shape形状Default
Value进度条 0.0-1.0float0F
private CellProgress cellProgress;
public CellProgress CellProgress
{
    get { return cellProgress; }
    set
    {
        if (cellProgress == value) return;
        cellProgress = value;
        OnPropertyChanged(nameof(CellProgress));
    }
}
CellProgress = new CellProgress(0.5f);  // 设置圆角弧度值

https://i-blog.csdnimg.cn/img_convert/d67f925e5add1a61da41537cfe603dc2.png

使用 BindingListAntList 作为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();  // 必须触发该事件,才能将数据映射到对应单元格中
        }
    }
}