htmlayout实现表格表头拖拽排序

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

主界面文件代码如下:

 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