htmlayout实现表格表头拖拽排序
By
admin
at 2019-12-06 • 0人收藏 • 1697人看过
感谢: 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
1 个回复 | 最后更新于 2019-12-08
登录后方可回帖
牛牛牛