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

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

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行,否则附加的事件没生效

登录后方可回帖

登 录
信息栏
公 告:

专注分享

谢绝纯提问

谢谢合作!
本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...