sciter 表格组件例子,演示了组件之间的事件订阅和触发

By terrorist at 2022-05-04 • 0人收藏 • 539人看过
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add()
/*}}*/


import web.sciter
import web.sciter.debug

var wb = web.sciter( winform )
wb.attachEventHandler( web.sciter.debug );	

wb.html = /**
<!doctype html>
<html>
<head>
   <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
    	class Item extends Element{
    	   	this(props){
    	   	    this.info = props.info
    	   	}
    	    render(){
    	        return <tr> 
    	        	<td>{this.info.txt}</td>
    	        	<td><button cmd="delete">删除</button></td>
    	        </tr>
    	    }


   	  		 ["on click at button[cmd=delete]"](){
 				 this.postEvent(new Event("delete", {bubbles: true, data:this.nodeIndex}));
    	    }
    	}
    	
    	class Table extends Element{
    	    this(props){
    	        this.data = props.data
    	    }
    	    render(){
    	        return <div> 
    	        	<input type="text" class="new-txt" /><button cmd="new">新建</button>
    	         	<table>
                		<thead>
                			<tr>
                				<th>content</th>
                				<th>delete button</th>
                			</tr>
                		</thead>
                		<tbody>
                    		{this.data.map( (info) => <Item info = {info}/> )}
                		</tbody>
            		</table>
    	        </div>
    	        

    	    }
    	    
    	    ["on click at button[cmd=new]"](){
    	        let txt = this.$(".new-txt").value;
    	        if(txt.length){
    	            this.data.push({txt:txt})
    	            this.componentUpdate()
    	        }
    	    }

    		["on delete"](evt){
    	    	this.data.splice(evt.data, 1)
    	    	this.componentUpdate()
    		}
    	}
    	
    	let data = [
    		{txt:"a"},
    		{txt:"b"},
    		{txt:"c"},
    	]
    	document.body.content(<Table data={data} />)
    </script>
    <style type="text/css">
    </style>
</head>
<body>
</body>
</html>
**/

winform.show();
win.loopMessage();


演示了 

1  删除一行数据的步骤: 从数据源上删除数据, 父组件执行  componentUpdate 让子组件也就是表格重新渲染

2 子组件 >>父组件 传递事件

3 个回复 | 最后更新于 2022-05-05
2022-05-04   #1

赞,

疫情期间刚好可以学学sciter,有没比较好入门的视频文章啥的推荐?

2022-05-05   #2

2022-05-05   #3

登录后方可回帖

登 录
信息栏
公告:
私人站, 专注分享, 可在分享中适当提问, 但谢绝纯提问, 否则不再提醒一律删帖, 谢谢合作!



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

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

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