虚表 —— 虚表二次封装的listbar库的使用演示-虚表专题-Aardio资源网

虚表 —— 虚表二次封装的listbar库的使用演示

光庆 2月前 889

虚表功能太多，很多人其实都不会用。

经小肥羊建议，尝试对虚表做二次封装，将某些经常用、好用的功能，封装为一个个独立的小库，小巧方便，非常实用。

也希望有此想法的朋友，封装好了以后分享给我，我集成到虚表库中进行统一发布。

import win.ui;
import godking.vlistEx.listbar;
import fonts.fontAwesome;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=439;bottom=503)
mainForm.add(
checkbox={cls="checkbox";text="菜单单开";left=208;top=448;right=336;bottom=480;z=2};
checkbox2={cls="checkbox";text="多开时始终展开";left=208;top=392;right=336;bottom=424;z=3};
vlistEx={cls="vlistEx";left=8;top=8;right=192;bottom=496;acceptfiles=1;aw=1;border=1;db=1;dl=1;dr=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/

//创建图片数据
import godking.paint
import inet.http
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0)
for(i=1;#imgs;1){
    mainForm.vlistEx.addImg(i/*图片名称*/,imgs[i]/*图片文件*/,false/*是否替换*/,/*宽度*/,/*高度*/);
}

//创建实例
var listbar = godking.vlistEx.listbar(mainForm.vlistEx,{
		menuBkColor = 0x71B33C; 		/*菜单背景颜色*/
		menuHoverBkColor = 0xFFB33C;	/*菜单鼠标划过背景颜色*/
		itemBkColor = 0xFFFFFF;			/*项目背景颜色*/
		itemHoverBkColor = 0xEEEEEE;	/*项目鼠标划过背景颜色*/
		itemHeight = 40;				/*项目高度*/
		lineColorH = 0xDDDDDD;			/*横线颜色*/
		bkcolor = 0xFFFFFF;				/*表格背景颜色*/
		single = 0;	 /*菜单单开时默认展开的菜单索引。0是多开默认全展开。无效索引(如-1)则单开默认全不展开。*/
		alwaysOpen = false; 			/*菜单多开时，是否所有菜单项都一直展开，不允许关闭*/
		menuFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF}); 		/*菜单字体*/
    	menuHoverFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF});	/*菜单鼠标划过字体*/
    	itemFont=::LOGFONT({name="fontAwesome",h=14,color=0x000000});		/*项目字体*/
    	itemHoverFont=::LOGFONT({name="fontAwesome",h=14,color=0xFF0000});	/*项目鼠标划过字体*/
})

//设置项目数据
var t = {
    {0,"　<img name=17,w=30,h=30> 基本操作",1}
    {1,'　　\uF0AE　数据录入',1.1}
    {1,'　　\uF0D0　数据编辑',1.2}
    {1,'　　\uF0CC　数据删除',1.3}
    {0,"　<img name=20,w=30,h=30> 数据查询",2}
    {1,'　　\uF093　人员查询',2.1}
    {1,'　　\uF0EA　地址查询',2.2}
    {1,'　　\uF125　编码查询',2.3}
    {1,'　　\uF073　索引查询',2.4}
    {0,"　<img name=14,w=30,h=30> 系统设置",3}
    {1,'　　\uF1E8　人员过滤',3.1}
    {1,'　　\uF172　数据管理',3.2}
    {1,'　　\uF085　账号登录',3.3}
};
listbar.setItemList(t);

//定义点击事件
listbar.onClick = function(index/*项目索引*/,text/*项目文本*/,data/*附加数据*/){
	win.msgbox("您点击了：第"++index++"行"++text++'\n附加数据：'++data);   
}

mainForm.checkbox.oncommand = function(id,event){
	listbar.config.single = owner.checked?1:0;
	if owner.checked listbar.open(1);
	else listbar.openAll();
}

mainForm.checkbox2.oncommand = function(id,event){
	listbar.config.alwaysOpen = mainForm.checkbox2.checked;
	if mainForm.checkbox2.checked listbar.openAll();
}

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

最新回复 (12)

无双经典 2月前

0 引用 2楼

同时只有一个一级菜单是展开的，要怎么设置

光庆 2月前

0 3楼

无双经典同时只有一个一级菜单是展开的，要怎么设置

重新下载虚表库

然后参考下面代码，设置一下 single 属性即可。

import win.ui;
import godking.vlistEx.listbar;
import fonts.fontAwesome;
/*DSG{{*/
mainForm = win.form(text="vlistEx - table adapter";right=439;bottom=503)
mainForm.add(
vlistEx={cls="vlistEx";left=8;top=8;right=192;bottom=496;acceptfiles=1;aw=1;border=1;db=1;dl=1;dr=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/

//创建图片数据
import godking.paint
import inet.http
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250124/1737707732.png",5,5,0,0,0,0)
for(i=1;#imgs;1){
    mainForm.vlistEx.addImg(i/*图片名称*/,imgs[i]/*图片文件*/,false/*是否替换*/,/*宽度*/,/*高度*/);
}

//创建实例
var listbar = godking.vlistEx.listbar(mainForm.vlistEx,{
		menuBkColor = 0x71B33C; 		/*菜单背景颜色*/
		menuHoverBkColor = 0xFFB33C;	/*菜单鼠标划过背景颜色*/
		itemBkColor = 0xFFFFFF;			/*项目背景颜色*/
		itemHoverBkColor = 0xEEEEEE;	/*项目鼠标划过背景颜色*/
		itemHeight = 40;				/*项目高度*/
		lineColorH = 0xDDDDDD;			/*横线颜色*/
		bkcolor = 0xFFFFFF;				/*表格背景颜色*/
		single = 1;	 /*菜单单开时默认展开的菜单索引。0是多开全展开。无效索引(如-1)则全不展开。*/
		menuFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF}); 		/*菜单字体*/
    	menuHoverFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF});	/*菜单鼠标划过字体*/
    	itemFont=::LOGFONT({name="fontAwesome",h=16,color=0x000000});		/*项目字体*/
    	itemHoverFont=::LOGFONT({name="fontAwesome",h=16,color=0xFF0000});	/*项目鼠标划过字体*/
})

//设置项目数据
var t = {
    {0,"　<img name=17,w=30,h=30> 基本操作"}
    {1,'　　\uF0AE　数据录入'}
    {1,'　　\uF0D0　数据编辑'}
    {1,'　　\uF0CC　数据删除'}
    {0,"　<img name=20,w=30,h=30> 数据查询"}
    {1,'　　\uF093　人员查询'}
    {1,'　　\uF0EA　地址查询'}
    {1,'　　\uF125　编码查询'}
    {1,'　　\uF073　索引查询'}
    {0,"　<img name=14,w=30,h=30> 系统设置"}
    {1,'　　\uF1E8　人员过滤'}
    {1,'　　\uF172　数据管理'}
    {1,'　　\uF085　账号登录'}
};
listbar.setItemList(t);

//定义点击事件
listbar.onClick = function(index/*项目索引*/,text/*项目文本*/){
	win.msgbox("您点击了：第"++index++"行"++text);   
}

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

zhhyit 2月前

0 引用 4楼

光大武威，超喜欢这个listbar
axuanup 2月前

0 引用 5楼

不愧是庆帝

近我者赤 4天前

0 6楼

再次求助大佬，想做3级菜单，第2级也能象第1级那样点击能收起、打开第3级，应该怎么做？？

我直接改treelevel为2，不行啊？

//设置项目数据
var t = {
{0,"　<img name=17,w=30,h=30> 基本操作"}
{1,'　　\uF0AE　数据录入'}
{2,'　　　\uF0D0　数据编辑'}
{2,'　　　\uF0CC　数据删除'}
{0,"　<img name=20,w=30,h=30> 数据查询"}
{1,'　　\uF093　人员查询'}
{2,'　　　\uF0EA　地址查询'}
{2,'　　　\uF125　编码查询'}
{2,'　　　\uF073　索引查询'}
{0,"　<img name=14,w=30,h=30> 系统设置"}
{1,'　　\uF1E8　人员过滤'}
{1,'　　\uF172　数据管理'}
{1,'　　\uF085　账号登录'}
};

光庆 3天前

0 引用 7楼

近我者赤再次求助大佬，想做3级菜单，第2级也能象第1级那样点击能收起、打开第3级，应该怎么做？？我直接改treelevel为2，不行啊？//设置项目数据 var t =& ...
需要修改。可以自己根据现有代码改一下试试。
近我者赤 3天前

0 引用 8楼

光庆需要修改。可以自己根据现有代码改一下试试。
改库吗？试过了，没成功，所以要求助啊

近我者赤 1天前

0 9楼

已经基本实现所需功能（但点开主菜单时，下面的菜单和子菜单栏是全部默认打开的，不知道怎样默认子菜单关闭，不过够用了）：

import win.ui;
import godking.vlistEx.listbar2;
import fonts.fontAwesome;
/*DSG{{*/
mainForm = win.form(text="多层折叠菜单";right=1233;bottom=713)
mainForm.add(
custom={cls="static";text="自定义控件";left=276;top=8;right=1225;bottom=706;border=1;db=1;dr=1;dt=1;edge=1;z=2};
splitter={cls="splitter";left=270;top=8;right=275;bottom=706;bgcolor=0;db=1;dt=1;frame=1;z=3};
vlistEx={cls="vlistEx";left=8;top=8;right=269;bottom=706;acceptfiles=1;aw=1;border=1;db=1;dl=1;dt=1;hscroll=1;vscroll=1;z=1}
)
/*}}*/

mainForm.splitter.split( mainForm.vlistEx,mainForm.custom )

//创建图片数据
import godking.paint
import inet.http
var imgs = godking.paint.splitImage("https://aardio.online/upload/files/20250201/1738408235.png",10,10,0,0,0,0)
for(i=1;#imgs;1){
    mainForm.vlistEx.addImg(i/*图片名称*/,imgs[i]/*图片文件*/,false/*是否替换*/,/*宽度*/,/*高度*/);
}

//创建实例
var listbar = godking.vlistEx.listbar2(mainForm.vlistEx,{
        menuBkColor = 0x71B33C;         /*菜单背景颜色*/
        menuHoverBkColor = 0xFB3F3C;    /*菜单鼠标划过背景颜色*/
        itemBkColor = 0xFFFFFF;            /*项目背景颜色*/
        itemHoverBkColor = 0xFEE0E0;    /*项目鼠标划过背景颜色*/
        itemHeight = 40;                /*项目高度*/
        lineColorH = 0xDDDDDD;            /*横线颜色*/
        bkcolor = 0xFFFFFF;                /*表格背景颜色*/
        single = -1;     /*菜单单开时默认展开的菜单索引。0是多开全展开。无效索引(如-1)则全不展开。*/
        alwaysOpen = false; 			/*菜单多开时，是否一直展开，不允许关闭*/
        menuFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF});         /*菜单字体*/
        menuHoverFont=::LOGFONT({name="fontAwesome",h=16,color=0xFFFFFF});    /*菜单鼠标划过字体*/
        itemFont=::LOGFONT({name="fontAwesome",h=16,color=0x000000});        /*项目字体*/
        itemHoverFont=::LOGFONT({name="fontAwesome",h=16,color=0xFF0000});    /*项目鼠标划过字体*/
})

/*设置项目数据{{*/
var t = {
	{0,"　<img name=95,w=30,h=30>　主菜单1"}
	{1,"　　<img name=91,w=30,h=30>　菜单1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx1.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx1.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx1.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx1.4"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单5","bx1.5"}
	{1,"　　<img name=91,w=30,h=30>　菜单2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx2.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx2.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx2.3"}
	{1,"　　<img name=91,w=30,h=30>　菜单3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx3.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx3.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx3.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx3.4"}
	{0,"　<img name=95,w=30,h=30>　主菜单2"}
	{1,"　　<img name=91,w=30,h=30>　菜单1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx1.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx1.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx1.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx1.4"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单5","bx1.5"}
	{1,"　　<img name=91,w=30,h=30>　菜单2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx2.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx2.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx2.3"}
	{1,"　　<img name=91,w=30,h=30>　菜单3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx3.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx3.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx3.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx3.4"}
	{0,"　<img name=95,w=30,h=30>　主菜单3"}
	{1,"　　<img name=91,w=30,h=30>　菜单1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx1.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx1.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx1.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx1.4"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单5","bx1.5"}
	{1,"　　<img name=91,w=30,h=30>　菜单2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx2.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx2.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx2.3"}
	{1,"　　<img name=91,w=30,h=30>　菜单3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单1","bx3.1"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单2","bx3.2"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单3","bx3.3"}
	{2,"　　　<img name=72,w=30,h=30>　子菜单4","bx3.4"}
};
/*}}*/
listbar.setItemList(t);

//定义点击事件
listbar.onClick = function(index/*项目索引*/,text/*项目文本*/,data/*附加数据*/){
	var txt = string.replace( text, "　　\<.*\>　", "");
    mainForm.text="多层折叠菜单"++txt;
    mainForm.custom.text=txt++data;
}

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

需要把listbar.aardio的第68行后面作如下改动：

        		if this.itemlist[rrow]["[@treeLevel]"]==0 or this.itemlist[rrow]["[@treeLevel]"]==1{ //菜单，不触发点击事件
        			if this.config.single { //单开
       			    	//先把其他的菜单都隐藏了
        				for(i=1;#this.itemlist;1){
        					if this.itemlist[i]["[@treeLevel]"]==0 or this.itemlist[i]["[@treeLevel]"]==1{
        						if (i!==rrow and this.itemlist[i]["[@treeLevel]"]!==1 and this.itemlist[i]["[@treeLevel]"]!==0){
        							vlist.hideRowAndSubRow( i /*行号*/,true/*是否隐藏*/,false/*是否立即刷新*/);
        						}
        					}
        				}

或直接下载我改好的listbar2.aardio。

上传的附件：

listbar2.aardio (大小：9.46K，下载次数：5)

光庆 1天前

0 引用 10楼

近我者赤已经基本实现所需功能（但点开主菜单时，下面的菜单和子菜单栏是全部默认打开的，不知道怎样默认子菜单关闭，不过够用了）：import win.ui; import g ...
厉害了，赞一个！
近我者赤 1天前

0 引用 11楼

感谢大佬😁
光庆 1天前

0 引用 12楼

近我者赤已经基本实现所需功能（但点开主菜单时，下面的菜单和子菜单栏是全部默认打开的，不知道怎样默认子菜单关闭，不过够用了）：import win.ui; import g ...
已升级虚表库，对你这个listbar2进行了稍微修改，可以实现你的要求了。升级试试。
近我者赤 1天前

0 引用 13楼

此楼层已删除

发新帖

光庆

主题数
216

帖子数
521

精华数
0

注册排名
2

虚表 —— 虚表二次封装的listbar库的使用演示

光庆

作者最近主题：