一个仿AntdUI的漂亮的虚表UI

光庆 13小时前 147

这是AntdUI做的表格界面:

这是用虚表高仿的:

为了方便操作,对虚表库进行了升级,请用最新版。

以下为实现代码:

import win.ui;
import godking.vlistEx;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=998;bottom=559;border="thin")
mainForm.add(
vlist={cls="vlistEx";left=5;top=5;right=994;bottom=553;db=1;dl=1;dr=1;dt=1;edge=1;transparent=1;z=1}
)
/*}}*/

//填充虚表数据
var statuses = ["Running","Pending","Closed","Error"];
var cities = [
    "London Park",
    "New York No. 1 Lake Park",
    "Sydney Road",
    "Tokyo Tower Street",
    "Berlin Square",
    "Singapore Bay"
];
var t = {fields={"  ","ID","Name","Age","Address","Status","Progress","Enabled","Created","Action"}};
for(i=1;137;1){
	var st = statuses[(i - 1) % #statuses + 1];
    table.push(t,
        {
        	ID = i;
        	Name = "Edward King " ++ i;
        	Age = 18 + (i * 7) % 45;
        	Address = cities[(i - 1) % #cities + 1] ++ " no. " ++ i;
        	Status = st;
        	Progress = ((i * 13) % 100);
        	Enabled = i % 3 != 0;
        	Created = time.date(2026,(i - 1) % 12 + 1,(i - 1) % 28 + 1);
        	Action="View";
    	}
    )
}

mainForm.vlist.setTable(t,,{30,50,120,50,100,100,100,100,100,100,100},1);
mainForm.vlist.fillParent(5/*列号支持负数*/,-1/*滚动条计算方式-1或-2*/)

//常规设置
mainForm.vlist.checkBox.show = true;
mainForm.vlist.lineWidthV=0;
mainForm.vlist.onSortColumn = {2,3,4,5,6,7,8,9,10,function(col,desc,row,mergeCol){
	owner.sort(col/*排序列*/,desc/*是否逆序*/,3/*数据转换0无1时间2数值3文本*/,true/*是否使用微软排序法*/,desc/*null值排序位置false靠前true靠后*/);
}}; 
mainForm.vlist.color1=0x888888
mainForm.vlist.bkColor1=0xF0F0F0;
mainForm.vlist.selectedBkColor=0xE0FFFF;
mainForm.vlist.checkBox.setColor(0xFFAAAAAA);
mainForm.vlist.setHeaderHeight(40);
mainForm.vlist.setRowHeight(40);
mainForm.vlist.font = ::LOGFONT(name="Microsoft YaHei";h=12;color=0x000000 );
mainForm.vlist.headerFont = ::LOGFONT(name="Microsoft YaHei";h=12;color=0x000000;bold=true);

//设置第7列为进度条
mainForm.vlist.setColumnType(7/*列号*/,3/*_vlistEx_ColType_Progress*/,0xFFDDDDDD/*背景色ARGB*/,0xFF1677FF/*前景色ARGB*/,/*是否显示非数值内容*/,30/*圆角半径*/,true/*是否隐藏进度值*/,50/*进度条宽度*/,12/*进度条高度*/);
mainForm.vlist.onDrawProgress = function(hdc,row,col,text,font,rect){
	var num=tonumber(text):0
	if num>80 return null,0xFF52C41A,null,"优秀"; 
	if num>40 return null,0xFF1677FF,null,"一般";
	return null,0xFFFAAD14,null,"很差";  
}

//设置第10列为按钮
mainForm.vlist.setColumnType(10/*列号*/,5/*_vlistEx_ColType_Button*/,true/*自绘按钮*/,0xFF1677FF/*正常颜色*/,0xFF000088/*悬停颜色*/,0xFFFFFFFF/*正常文本颜色*/,0xFFFFFFFF/*悬停文本颜色*/,/*正常边框颜色*/,/*悬停边框颜色*/,4/*圆角半径*/,50/*宽度*/,25/*高度*/);

//设置第6列为按钮,并通过事件改变按钮外观
mainForm.vlist.setColumnType(6/*列号*/,5/*_vlistEx_ColType_Button*/,true/*自绘按钮*/,0xFF1677FF/*正常颜色ARGB*/,0xFF000088/*悬停颜色ARGB*/,0xFFFFFFFF/*正常文本颜色ARGB*/,0xFFFFFFFF/*悬停文本颜色ARGB*/,/*正常边框颜色ARGB*/,/*悬停边框颜色ARGB*/,6/*圆角半径*/,50/*宽度*/,25/*高度*/);
var colors = {
	Running = {0xFFF6FFED,0xFF73C419,0xFFD2EFBB};
	Pending = {0xFFFFFBE6,0xFFFAAD14,0xFFFEEFBB};
	Closed = {0xFFFAFAFA,0xFF000000,0xFFE6E6E6};
	Error = {0xFFFFF2F0,0xFFFF4C4E,0xFFFEDEDB};
}
mainForm.vlist.onDrawButton =  function(hdc,row,col,text,font,rect,xuanting) {
	if row and col===6 {
		var textrect = mainForm.vlist.getSize(hdc,font,text,0/*限制宽度*/,0/*限制高度*/,true/*支持纯文本*/)
	 	return colors[text][[1]],colors[text][[2]],colors[text][3],6,textrect.width+20,null; 
	}
}

//设置第8列为开关
mainForm.vlist.setColumnType(8/*列号*/,4/*_vlistEx_ColType_Switch*/,true/*点击切换*/,true/*使用内置函数*/,0xFFDDDDDD,0xFF1777FF,40,20)

//设置点击事件
mainForm.vlist.onClick = function(row/*行*/,col/*列*/,x,y,buttonIndex/*按钮区域序号*/){
	if row and col==10 {
		..win.msgbox("您点击了按钮");
	}
}

mainForm.show();
win.loopMessage();


最新回复 (5)
  • niheibie 10小时前
    0 引用 2
    6666666
  • nanyi 9小时前
    0 引用 3
    一摸一样啊
  • suruozhong 8小时前
    0 引用 4
    此楼层已删除
  • suruozhong 8小时前
    0 引用 5
    666,界面美观了
  • Mr_MAO 6小时前
    0 引用 6
    👍👍👍
返回