aardio 文档

Table 表格

Table 是 AntdUI 中最重要的数据展示控件,用于展示行列数据。aardio 中建议先掌握两种稳定数据源:

最小 DataTable 示例

import win.ui;
var winform = win.form(text="AntdUI Table";right=760;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=730;bottom=380;z=1})

import dotNet.AntdUI;
import System.Data;

var grid = AntdUI.Table(winform.host);
grid.Bordered = true;
grid.EmptyText = "暂无数据";

var dt = System.Data.DataTable();
dt.Columns.Add("id");
dt.Columns.Add("name");
dt.Columns.Add("price");

var addRow = function(id,name,price){
    var row = dt.NewRow();
    row["id"] = id;
    row["name"] = name;
    row["price"] = price;
    dt.Rows.Add(row);
}

addRow("1","苹果","5.20");
addRow("2","香蕉","3.80");

grid.DataSource = dt;

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

指定列集合

如果不设置 Columns,Table 会尝试根据数据源自动生成列;业务程序通常建议显式指定列,便于设置标题、宽度、对齐、排序、固定列等。

import dotNet.AntdUI;

var cols = AntdUI.ColumnCollection();
cols.Add(AntdUI.Column("id","ID"));
cols.Add(AntdUI.Column("name","名称"));
cols.Add(AntdUI.Column("price","价格"));

cols[1].Width = "80";
cols[2].Width = "180";
cols[3].SortOrder = true;

grid.Columns = cols;

注意:当前 DLL 中 AntdUI.Column 的常用构造是 Column(key,title)Column(key,title,align),不要只传一个参数。

AntItem[] 行数据与复杂单元格

AntdUI.AntItem(key,value) 可以把一行拆成多个键值项,键名对应列的 Key。当 value 是 CellBadgeCellButtonCellLink[] 等对象时,Table 会渲染为复杂单元格。

import win.ui;
var winform = win.form(text="AntdUI Table Cell";right=780;bottom=420)
winform.add(host={cls="custom";left=20;top=20;right=740;bottom=380;z=1})

import dotNet.AntdUI;
import dotNet; // 本例仅用于 dotNet.createArrayList()

var grid = AntdUI.Table(winform.host);
grid.Bordered = true;

grid.Columns = AntdUI.ColumnCollection();
grid.Columns.Add(AntdUI.Column("name","姓名"));
grid.Columns.Add(AntdUI.Column("state","状态"));
grid.Columns.Add(AntdUI.Column("ops","操作"));

var makeButtons = function(){
    // 非空 aardio 数组可按 .NET 参数类型自动转换为 CellLink[]。
    // CellButton 继承 CellLink,也可放入同一个数组。
    return [
        AntdUI.CellButton("edit","编辑",AntdUI.TTypeMini.Primary),
        AntdUI.CellLink("delete","删除")
    ];
}

// 非空 aardio 数组可自动转换为 AntItem[]。
var row = [
    AntdUI.AntItem("name","张三"),
    AntdUI.AntItem("state",AntdUI.CellBadge(AntdUI.TState.Success,"在线")),
    AntdUI.AntItem("ops",makeButtons())
];

var rows = dotNet.createArrayList();
rows.Add(row);

grid.DataSource = rows;

grid.CellButtonClick = function(sender,e){
    winform.msgbox("点击按钮:" + e.Btn.Id);
}

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

常用属性

常用方法

常用事件

grid.CellClick = function(sender,e){
    // e.Record 原始行数据,e.RowIndex / e.ColumnIndex 为行列序号
}

grid.CellEndEdit = function(sender,e){
    // e.Value 为修改后文本,返回 true 应用修改
    return true;
}

分页建议

Pagination 只负责分页 UI,不会自动切分 Table 数据。推荐在 Pagination.ValueChanged 中重新请求或切片数据,然后重新赋值 grid.DataSource。详见 Pagination 文档与高级主题“表格与数据绑定”。

如果要实现搜索、筛选、排序、分页、编辑回写、操作按钮与消息提示的完整业务页,请参考高级主题 Table 数据管理页

常见坑

Markdown 格式