拼了个HtmlLayout的grid库,大数据不适用

By onething576 at 2022-04-14 • 0人收藏 • 1105人看过

image.png

htgrid.aardio 库代码如下:

//htgrid 表格
import web.layout;
import web.layout.behavior.grid;

class htgrid { 
    ctor(winform){ 
		this.wbwin=..web.layout( winform );		
		this.dwt={};
		this.wbwin.html = /*

			<html>

			<head>

			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

			</head> 

			<body>

			<widget type="select" id="report">

			<table .layout-grid fixedrows=1 fixedlayout #table>

				<thead/><tbody/>

			</table>

			</widget> 

			</body>

			</html>

		*/

        this.mcss= /*

			html 

			{

  				background-color: white white white white;

			}

			#report 

    		{

      			width:*;

      			height:*;

      			padding:-6px; 

	  			margin:-2px;

	  			line-height:100%;

			} 

			

			body,table,th,td{

  				font-family:"宋体","Verdana"; 

  				font-size:9pt; 

			}

			table.layout-grid{

  				background:white;

  				border:1px solid #999; 

  				width:*;

  				height:*;

  				behavior: grid column-resizer;

  				overflow:auto;

  				flow: table-fixed;

  				font-size:9pt;	//font-size:62.5%;

  				border-spacing:0;

  				border-top:1px solid black;

  				border-left:1px solid black;

			}



			table.layout-grid th{

  				color: black;

  				background-color: #F1F5F9 white white #F4F3F9;

  				font-size:9pt; 

  				border-right:1px solid #DDD;

  				border-bottom:1px solid #EEE;

  				border-right:1px solid black;

  				border-bottom:1px solid black;

  				padding:1px;

  				font-weight:normal;

  				line-height:1.6em;

  				text-align:center;

			}

			table.layout-grid th:hover {

   				border-bottom-color: orange;

			}

			

			table.layout-grid tbody tr{  

   				height:1.4em;

   				border-bottom:1px solid #EEE;

  			}

  			

			table.layout-grid tbody tr:hover{

  				background:blue; 

				color:white;      

			}

			table.layout-grid td {

				display:block;

    			//context-menu: selector(menu#menuId);

  				white-space:nowrap;

  				padding:2px; 

  				border-right:1px solid #EEE;

  				border-right:1px solid black;

  				border-bottom:1px solid black;

  				vertical-align: middle;

			}
		*/ 

		this.wbwin.css =this.mcss
	};

						

	sethead=function(col_w,col_m){

		this.col_w=col_w
		this.wbwin.$1("thead").innerText="";this.wbwin.$1("thead").updateHTML();
		var tr="<tr>";
		for(i=1;#col_m;1){

			if (!col_w){tr+="<th style='width: 60px;'>"++col_m[i]++"</th>";}else {

				tr+="<th style='width: "+col_w[i]+"px;'>"++col_m[i]++"</th>"   
			}
		}
    	tr+="</tr>"
    	this.wbwin.$1("thead").insertAdjacentHTML("beforeEnd",tr)
	}

	

	setTable=function(dt){
		this.dwt=dt;
	}

	

    showTable=function(){

        this.wbwin.$1("tbody").innerText="";this.wbwin.$1("tbody").updateHTML();

        if !( #this.dwt) return;
		var dbTable=this.dwt
 		var fields = this.dwt.fields;
		var tr="";
   		for(i=1;#dbTable;1){

   			tr="<tr role='option' value='"+i+"'>";

			for (c=1;#fields;1){
		    	if (dbTable[i][fields[c]]=null or dbTable[i][fields[c]]=0){tr+="<td/>"}else {
		    	    tr+="<td>"++tostring(dbTable[i][fields[c]])++"</td>"
		    	}
        	}

        	tr+="</tr>"
        	this.wbwin.$1("tbody").insertAdjacentHTML("beforeEnd",tr);
    	}
    }	

	toxlsx=function(fn){

		var ht_h=this.wbwin.$1("thead")
		
		import com.excel;
		var excel = com.excel()
		excel.alerts = false; //关闭所有操作提示

		//excel.createFile(fn); //创建指定文件名的excel文件

		var book = excel.WorkBooks.Add();  //创建工作簿excel.ActiveWorkbook;//excel.WorkBooks.Add()
		var sheet = book.Sheets(1);
		sheet.Name="导出数据";
		var dt=this.dwt

		var rows=#dt;//表体行数
		var cols=#dt.fields;//表头列数
		for (i=1;cols;1){
			sheet.Cells(1,i).Value2=ht_h.child(1).child(i).innerText;
		}

		for (i=1;rows;1){
			for (j=1;cols;1){
				sheet.Cells(i+1,j).Value2=dt[i][dt.fields[j]]:"";
			}
		}

		//字体9,细框线,黑色

		with sheet.range("A1").reSize(rows+1,cols){

     		with Font {

          		Size = 9    

     		}

     		with Borders{

        		ColorIndex = 1

        		LineStyle = 1

        	}

     		//BorderAround(1,2,1)

     		Columns.AutoFit() 

 		}

 		//标题居中,背景改色

 		with sheet.range("A1").reSize(1,cols){

     		HorizontalAlignment = xlCenter

        	VerticalAlignment = xlCenter

        	with Font {

          		Bold = true    

     		}

     		with Interior {

        		ColorIndex = 15

        		Pattern = xlSolid

        		PatternColorIndex = xlAutomatic

        	}

 		}



		excel.SaveAs(fn); //指定文件名保存

		excel.Quit(); //退出

		book = null;sheet = null;excel = null;//释放所有对excel对象的引用

		collectgarbage("collect");//内存回收,确保excel完全退出

		..win.msgbox("已保存为"+fn);

	} 

}





/*intellisense()

htgrid.sethead(宽度,标题) = 加载列名,指定宽度数组,标题数组

htgrid.setTable(dt) = 加载数据源

htgrid.showTable() = 显示数据,有局限性,未分页

htgrid.toxlsx(fn) = 导出到Execl,参数:文件名fn

end intellisense*/

使用代码, mainForm.aardio 代码如下:

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程3";right=679;bottom=474)
mainForm.add(
button={cls="button";text="导出XLSX";left=536;top=435;right=676;bottom=469;db=1;dr=1;z=2};
static={cls="static";left=0;top=0;right=339;bottom=431;bgcolor=12639424;db=1;dl=1;dr=1;dt=1;z=1};
static2={cls="static";left=341;top=0;right=680;bottom=434;bgcolor=12639424;db=1;dl=1;dr=1;dt=1;z=3})
/*}}*/

//创建测试数据库
import sqlite;
var db = sqlite("/test-sqlite.db"); 
if( not db.existsTable("each-tab") ){ 
        db.exec( "CREATE TABLE [each-tab](text, number, cid);");
	//添加测试数据
        var cmd = db.prepare("INSERT INTO [each-tab] VALUES (@text, @number , @cid );")
        for(i=1;15;1){ cmd.step(number = i;text = "测试数据" + i;cid = string.random(8); ) }

} 

import htgrid;
var dw1=htgrid(mainForm.static)
var mcss= dw1.mcss

var lcss=/**
	table tbody td:nth-child(1),
	table tbody td:nth-child(4)
	{ text-align:center;}      //第1列,第四列内容居中

	table tbody td:nth-child(2)
	{ text-align:left;}        //第2列,第二列内容居左
**/ 

dw1.wbwin.setCss(mcss+lcss)

dw1.sethead({60;100;80;90},{"编码";"物料名称";"规格型号";"id"})

dw1.setTable(db.getTable("SELECT rowid,text,number,cid FROM [each-tab]"))

dw1.showTable()

dw2.wbwin.setCss(mcss+lcss2)
dw2.sethead({50;80;100},{"编码";"规格型号";"id"})

//取光标行数据

var ltb=dw1.wbwin.$1("#report table")

ltb.onTableRowClick = function (ltTarget,ltOwner,rowIndex,behaviorParams) {
	var index=dw1.wbwin.$1("#report").value;//光标行

	if (index>0 and rowIndex>0) {
    	dwmc=ltTarget.child(index).child(2).innerText;//取index行的第四个字段
	dw2.setTable(db.getTable("SELECT rowid,number,cid FROM [each-tab] where text='"+dwmc+"'"))
    	dw2.showTable()
	}

}
ltb.attachEventHandler();

//导出excel文件
import fsys.dlg;
mainForm.button.oncommand = function(id,event){
	var fn= fsys.dlg.save("xlsx文件|*.xlsx|");
	if(fn){dw1.toxlsx(fn)}
}

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


工程下载:

aardio工程3.zip


5 个回复 | 最后更新于 2022-04-17
2022-04-14   #1

感谢分享.

贴代码可以选[代码语言里面的aardio] ,然后将代码黏贴到里面就行了,

我发现你有一个函数名写错了 ,另外少了数据库 , 我给你稍微修改了下, 

2022-04-14   #2

代码语言里面的aardio] 

哈哈,我第一次发的时候也在好奇,你们代码怎么会反色显示的。。。后面找到了

2022-04-14   #3

看起来这个导出excel超简单。。

2022-04-14   #4

是第一次贴

2022-04-17   #5

例子少了一句59行,否则附加的事件没生效

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...