Table 是 AntdUI 中最重要的数据展示控件,用于展示行列数据。aardio 中建议先掌握两种稳定数据源:
System.Data.DataTable:最容易上手,适合普通文本/数字/日期表格;列类型设为 System.Object 时也能承载 CellTag、CellProgress、CellButton 等复杂单元格。AntdUI.AntItem[] 行数据:适合更复杂的单元格组合,例如同一单元格内多个链接/按钮、图片等。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),不要只传一个参数。
AntdUI.AntItem(key,value) 可以把一行拆成多个键值项,键名对应列的 Key。当 value 是 CellBadge、CellButton、CellLink[] 等对象时,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();
Columns:列集合,添加 AntdUI.Column / ColumnCheck / ColumnRadio / ColumnSwitch / ColumnSelect / ColumnSort 等。DataSource:数据源,常用 DataTable、对象列表、AntItem[] 行集合等。Summary:汇总栏数据。FixedHeader / VisibleHeader:固定表头、显示表头。Bordered:显示列边框。RowHeight / RowHeightHeader:行高与表头高度。AutoSizeColumnsMode:列宽自动调整模式,常用 AntdUI.ColumnsMode。VirtualMode:虚拟模式,大数据量时只渲染可见行。EditMode:编辑模式,常用 AntdUI.TEditMode.Click / DoubleClick / None。EditInputStyle:编辑框样式,常用 AntdUI.TEditInputStyle。MultipleRows:是否允许多选行。SelectedIndex / SelectedIndexs:当前选中行。EmptyText / EmptyImage / EmptyHeader:空数据展示。ScrollLine(rowIndex,true):滚动到指定行。ScrollColumn(columnIndexOrKey,true):滚动到指定列。CopyData(...):复制行、列或单元格数据。EnterEditMode(row,column):进入编辑模式。ToDataTable():导出表格数据为 DataTable。LoadLayout() / Refresh():刷新布局或界面。ExpandAll() / Expand(record,value):树表格展开折叠。AddMergedRegion(...) / ClearMergedRegion():合并单元格。Binding(bindingList):绑定 BindingList<T>,用于插入删除时自动刷新。CellClick / CellDoubleClick:单元格点击、双击。CellButtonClick:点击 CellLink / CellButton 触发。CheckedChanged:复选框列、开关列或可勾选单元格变化。CellBeginEdit:编辑前触发,返回 true 继续编辑。CellEndEdit:编辑结束,返回 true 应用修改。SetRowStyle:自定义行样式,可返回 AntdUI.Table.CellStyleInfo。SortModeChanged:列排序模式变化,事件参数常用 e.SortMode、e.Column。SortRows / FilterChanged:排序、筛选变化。SelectIndexChanged:选中行变化。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 数据管理页。
[AntdUI.CellLink("edit","编辑")] 可作为 CellLink[] 使用。[] 无法推断元素类型,或需要预分配固定长度 CLR 数组时,才需要 dotNet.createArray(type,count)。netObjArray[1] 访问时会自动映射到 CLR 第 0 项。只有直接调用 .SetValue(value,0) / .GetValue(0) 这类 .NET 原生方法时才写 0-based 索引。.Length 取长度,不要用 #。DataTable;如果少量列需要复杂单元格,可把列类型设为 System.Object 并填入 CellTag / CellProgress / CellButton 等对象。BindingList<T> 并调用 table.Binding(list),不要只给普通 List<T> 添加/删除元素。