htmlayout实现表格表头拖拽排序

By admin at 2019-12-06 • 0人收藏 • 1697人看过

感谢: netfox(已认证)  分享代码

GIF.gif

主界面文件代码如下:

 import win.ui;
/*DSG{{*/
var winform = win.form(text="HL";right=498;bottom=383)
winform.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;
import web.layout.behavior.thead;

var wbLayout = web.layout( winform );
wbLayout.go("/layout/ui.html")

menu = {
    {key = "rowId";name = "全选";len = "50px"}; 
	{key = "id";name = "ID";len = "30px"};
	{key = "name";name = "姓名";len = "80px"};	
	{key = "sex";name = "性别";len = "85px"};	
	{key = "age";name = "年龄";len = "85px"};
	{key = "zero";name = "";len = "225px"};		
}
	
addHead = function(tab){//添加表头,返回列名key值在第几列table
		var thead = wbLayout.$1("table thead");
		tr = thead.createElement("tr");
		tr.class = "move";	
		var ts,tn,tcol = {},{},{};
		for(i,t in tab)	table.push(t.len ? ts : tn, t)
		for(i,t in tn)	table.push(ts, t);
		for(i,t in ts){		
			th = tr.createElement("th",tostring(t.name));
			th.key=t.key;				
		}		
		thead.updateHTML();
}

addHead(menu)

var col = wbLayout.$("thead th");
var str = ""
for(i=1;#col-1;1){	
	str++=`<li id="menu`+i+`" selected style="`+col[i].style["width"]+`"><i></i><div #menuname>`+col[i].innerText+`</div></li>`;	
}
wbLayout.$1("#headMenu").printf("%s",str);

wbLayout.$1("#headMenu").updateHTML()

var rootTr = wbLayout.$1("table")
var ok,cfg = call(web.json.parse,,..string.load("/menu.table"))
if ( ok ){	
	for(k,v in cfg){
		wbLayout.getEle( k ).setAttribute("selected",v)
		i = ..string.match(k,"\d+");
		if v = "show"{		
		rootTr.enumQuery(
				function(ltEle){											
					ltEle.child(i).style["display"] = "block";				
					
				},"tr"
			)	
		}else{	
		rootTr.enumQuery(
			function(ltEle){												
				ltEle.child(i).style["display"] = "none";						
				
			},"tr"
		)
		}	
	} 
}



tab = {
	{id="1";sex="男";age="33";barx="dsfad";dccfd="dsfad";name="hp";};
	{id="3";sex="女";age="31";barx="解放";dccfd="哇靠";name="pp"};
}


set = function(tab){ 
    tbody = wbLayout.$1("tbody")
    thNum = wbLayout.$1("thead tr").childCount();
    for( k,v in tab ){	
		var row = tbody.createElement("tr");
		row.id = tostring(v.id);
		for(i=1;thNum;1){row.createElement("td")};
		for( key,value in v ){
			for(j,eleChild in wbLayout.$1("thead tr").eachChild()){			
				if ( eleChild.key = key ) {
					index = eleChild.index();
					break;
				}
			}		
			if index row.child(index).innerText = tostring(value);
			index=null;
		}
	}
}


wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
	
	tab = {
	{id="1";sex="男";age="33";barx="dsfad";dccfd="dsfad";name="大佬";};
	{id="3";sex="女";age="31";barx="解放";dccfd="哇靠";name="小惠"};
} 
	set(tab)	
}



 function uiinit(){
 	sortFile = "/config/sore.txt";     
  	if !io.exist(sortFile) return false;     
    var code = ..string.load(sortFile);
    if ( code )	tabSortAll = eval(code);
		
	var ht = "";
	for(i=1;#tabSortAll;1){
	
		//if tabSortAll[i].index === 1 {
			//ht+=..string.format("<th hidden>%s</th>", tabSortAll[i].name);
		//}else{
			ht+=..string.format("<th key=%s>%s</th>",tabSortAll[i].key:"" ,tabSortAll[i].name:"");
		//}
	}
	
	wbLayout.$1("thead tr").innerHTML = ht;
 }
 
uiinit()

set(tab)

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

//添加阴影边框
import win.ui.shadow;
win.ui.shadow( winform,50,3 );

winform.show() 
win.loopMessage();

界面中用到的自定义web.layout.behavior.thead库如下:

namespace web.layout.behavior.thead{
    
namespace trmove{
    
    onAttach = function(ltOwner){
    	wb = ltOwner.getLayout()
    	tip = wb.$1("#info");
    }
    
    onMouseMove = function (ltTarget,ltOwner,x,y,ltMouseParams) {
    	if (ltMouseParams.button_state=1){
			tip.style.left = x;
		}
    }
    
    onMouseLeave = function( ltTarget,ltOwner,x,y,ltMouseParams ) {
    	ltOwner.parent().style.cursor = "default";
    	tip.style.display = "none";
    	tip.innerText = "";
    }
    	
}


namespace thmove{
	
	import web.json
    sortFile = "/config/sore.txt"; 
    
    onAttach = function( ltOwner ){
    	wbLayout = ltOwner.getLayout();    	
    	tip = wbLayout.$1("#info")
    }    
	
    /*
    //设置两个表格的单元格宽度相等
	onAttach = function( ltOwner ){
    	wb = ltOwner.getLayout()
    	headTR = wb.$1("#headTable");
    	hRowNum = headTR.childCount();
    	headTD = wb.$1("#headTable tr")
    	hColNum = headTD.childCount()
    	
    	mainTR = wb.$1("#mainTable");
    	mRowNum = mainTR.childCount();
    	mainTD = wb.$1("#mainTable tr")
    	mColNum = mainTD.childCount();    	
    	
    	//设置数据单元格的宽度等同于表格头(另外一个表格)的宽度
    	for(i=1;hRowNum;1){//每一行
    		for(k=1;hColNum;1){ //每个单元格
    			mainTD.child(k).width = headTD.child(k).width;
    		}
    	}
    	
    	return true	
    }
*/
    
    onMouseDown = function (ltTarget,ltOwner,x,y,ltMouseParams) {        
        if (ltMouseParams.button_state=1){          
        startIndex = ltOwner.index();           	
    	ltOwner.parent().style.cursor = "pointer";
    	x,y,cx,cy = ltOwner.getPos();
    	tip.innerText =  ltOwner.innerText;
    	tip.style["z-index"] = "-999";
    	tip.style["font-weight"] = "bold";
    	tip.style["text-align"] = "center";
    	tip.style["line-height"] = cy; 
    	with tip.style{    		
    		display = "block";
    		left = x;
    		top = y;
    		width = cx;
    		height = cy;
    		opacity = "0.75";
    		position = "absolute";  
      		color = "#999";      		
    	}
    	}	
    }
    
	onMouseUp = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		if (ltMouseParams.button_state=1){	
    		ltOwner.parent().style.cursor = "default";    		
    		tip.style.display = "none";
    		tip.innerText="";
    		if endIndex = 1||startIndex = 1 return ; 
    		if (ltOwner.index() == ltOwner.parent().childCount()||startIndex == ltOwner.parent().childCount()) return; 
    		rootTr = wbLayout.$1("table")    		
			rootTr.enumQuery(
                function(ltEle){ 
                        ltEle.child(startIndex).swap( ltEle.child(endIndex) );
                },"tr"
        	)
        	t={}
        	for(i=1;wbLayout.$1("thead tr").childCount();1){        		
        		..table.push(t,{name=wbLayout.$1("thead tr").child(i).innerText:"";key=wbLayout.$1("thead tr").child(i).key;index=wbLayout.$1("thead tr").child(i).index()})        	
        	}     	
           	..string.save(sortFile,..table.tostring(t));
		}	
	}
	
	onMouseEnter = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		endIndex = ltOwner.index();
	}
	
	onMenuItemClick =  function (ltTarget,ltOwner,reason,behaviorParams) {	
    	i = ltTarget.index();
    	var rootTr = wbLayout.$1("table")
		if (ltTarget.selected="show"){
			rootTr.enumQuery(
					function(ltEle){												
						//ltEle.child(i).style["display"] = "none";
						ltEle.child(i).setAttribute("hidden","")
					},"tr"
				)
			ltTarget.selected="hide"
		}else{
			rootTr.enumQuery(
						function(ltEle){												
							//ltEle.child(i).style["display"] = "block";
							ltEle.child(i).setAttribute("hidden",null)
						},"tr"
				)
			ltTarget.selected="show"	
		}		
	}

   	onPopupRequest = function (ltTarget,ltEle,reason,behaviorParams) {
        var wbLayout = ltEle.getLayout();
 		var ok,cfg = call(web.json.parse,,..string.load("/menu.table"))
		if ( ok ){	
 			ltTarget.child(1).state.disabled = true; //最少保留一列 
 			for(k,v in cfg){ 			
  				//wbLayout.getEle(k).$1("i").class = (v = "show") ? "select" : "unselect";
			}
		} 
	}

	onPopupDismissed = function (ltTarget,ltEle,reason,behaviorParams) {
    	cfg = {};	
		menuCount = ltTarget.childCount();
		for(i=1;menuCount;1){
				cfg[ltTarget.child(i).id] = ltTarget.child(i).selected;	
		} 	
		string.save("/menu.table",web.json.stringify(cfg,true) )
	} 
	
	
}	
	
}

拖动排序挺流畅的 , 对文件进行读写来实现拖拽排序这个方式挺特别的,

完整工程下载:

链接:https://pan.baidu.com/s/1iuSYbn8uGqri6A-8CMfUfg 

提取码:eg2g

1 个回复 | 最后更新于 2019-12-08
2019-12-08   #1

牛牛牛

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



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

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

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...