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

By terrorist at 2022-05-04 • 0人收藏 • 1193人看过
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

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



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

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

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...