搜索
查看: 1122|回复: 1

[其他] HL表格通过表头菜单隐藏和显示列

[复制链接]

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
发表于 2018-9-17 23:50:36 | 显示全部楼层 |阅读模式
  1. import win.ui;
  2. /*DSG{{*/
  3. mainForm = win.form(text="aardio form";right=973;bottom=619)
  4. mainForm.add()
  5. /*}}*/
  6. import web.json
  7. import web.layout;
  8. import console;
  9. import web.layout.fontAwesome;
  10. wbLayout = web.layout(mainForm)
  11. //wbLayout.go("/test.html")

  12. wbLayout.html = /**
  13. <!DOCTYPE html>
  14. <html lang="en">

  15. <head>
  16.     <meta charset="UTF-8">
  17.     <title>Document</title>
  18. </head>
  19. <body>
  20.     <widget type="select" id="report">
  21.         <table>
  22.             <thead>
  23.                            <tr>
  24.                             <th style='width:30px'>id</th>
  25.                             <th style='width:60px'>姓名</th>
  26.                             <th style='width:160px'>性别</th>
  27.                             <th style='width:80px'>年龄</th>
  28.                             <th style='width:80px'>籍贯</th>
  29.                             <th style='width:*'></th>
  30.                     </tr>
  31.             </thead>
  32.             <tbody>
  33.             </tbody>
  34.         </table>
  35.     </widget>
  36. </body>
  37. <menu.context id="headMenu">       
  38. </menu>
  39. </html>
  40. **/

  41. wbLayout.css = /**
  42. html body {
  43.             margin: 0;
  44.             padding: 0;
  45.             font-family: '微软雅黑', '宋体';
  46.             overflow: hidden;
  47.         }
  48.         #report {
  49.             size: *;
  50.             overflow: auto;
  51.         }
  52.         table {
  53.             size: 100%%;
  54.             border-spacing: 0;
  55.         }
  56.         table thead {
  57.             height: 30px;
  58.         }
  59.         table thead th {
  60.             border: rgb(75, 75, 77) solid 1px;
  61.             background-color: #eee;
  62.             padding: 0;
  63.             width:*;
  64.             height:30px;
  65.             overflow: hidden;
  66.         }
  67.         table thead tr {
  68.             font-size: 1.3em;
  69.             background-color: #A7C942;
  70.         }
  71.         table tbody tr {
  72.             color: #000000;
  73.             background-color: #EAF2D3;
  74.             height: 25px;
  75.             font-size: 1.3em;
  76.         }
  77.         table tbody td {
  78.             text-align: center;
  79.             height: 30px;
  80.             border: rgb(75, 75, 77) solid 1px;
  81.             overflow: hidden;  
  82.         }
  83.                
  84.        table th {
  85.                         context-menu: selector(menu#headMenu);
  86.                         border: 1px solid threedlightshadow;
  87.                         padding: 4px;
  88.                 }
  89.                 menu#headMenu li{
  90.                         font-size:16px;                       
  91.                         min-width:70px;
  92.                         flow:horizontal;
  93.                         padding:5px;
  94.                         height:15px;
  95.                 }       
  96.                
  97.                 #menuname{
  98.                         width:max-intrinsic;
  99.                         padding:0;
  100.                         margin:0;
  101.                         min-width:38px;                        
  102.                 }       
  103.                        
  104.                 .select {
  105.                         margin-left:5px;
  106.                         content:"√" ;
  107.                 }
  108.                 .unselect{
  109.                         margin-left:5px;
  110.                         content:" ";
  111.                 }
  112. }
  113. **/

  114. tbody = {
  115.         {name="张三";sex="男";age=33;jg="山东"};
  116.         {name="李四";sex="女";age=19;jg="河北"};
  117.         {name="王五";sex="男";age=25;jg="山西"};
  118. }
  119. var tr=""
  120. for(i=1;#tbody;1){
  121.         tr+="<tr><td>"+i+"</td><td>"+tbody[ i ].name+"</td><td>"+tbody[ i ].sex+"</td><td>"+tbody[ i ].age+"</td><td>"+tbody[ i ].jg+"</td><td></td></tr>"
  122. }
  123. wbLayout.$1("tbody").printf("%s",tr);

  124. //根据表头生成管理菜单
  125. var col = wbLayout.$("thead th");
  126. var str = ""
  127. for(i=1;#col-1;1){       
  128.         str++=`<li id="menu`+i+`" selected style="`+col[ i ].style["width"]+`"><i></i><div #menuname>`+col[ i ].innerText+`</div></li>`;       
  129. }
  130. wbLayout.$1("#headMenu").printf("%s",str);

  131. var rootTr = wbLayout.$1("table")
  132. var ok,cfg = call(web.json.parse,,string.load("/menu.table"))
  133. if ( ok ){       
  134.         for(k,v in cfg){
  135.                 wbLayout.getEle( k ).setAttribute("selected",v)
  136.                 i = string.match(k,"\d+");
  137.                 if v = "show"{               
  138.                 rootTr.enumQuery(
  139.                                 function(ltEle){                                                                                       
  140.                                         ltEle.child(i).style["display"] = "block";                               
  141.                                        
  142.                                 },"tr"
  143.                         )       
  144.                 }else{       
  145.                 rootTr.enumQuery(
  146.                         function(ltEle){                                                                                               
  147.                                 ltEle.child(i).style["display"] = "none";                                               
  148.                                
  149.                         },"tr"
  150.                 )
  151.                 }       
  152.         }
  153. }

  154. wbLayout.onMenuItemClick =  function (ltTarget,ltOwner,reason,behaviorParams) {       
  155.     i = ltTarget.index();
  156.         if (ltTarget.selected="show"){
  157.                 rootTr.enumQuery(
  158.                                 function(ltEle){                                                                                               
  159.                                         ltEle.child(i).style["display"] = "none";
  160.                                 },"tr"
  161.                         )
  162.                 ltTarget.selected="hide"
  163.         }else{
  164.                 rootTr.enumQuery(
  165.                                         function(ltEle){                                                                                               
  166.                                                 ltEle.child(i).style["display"] = "block";
  167.                                         },"tr"
  168.                         )
  169.                 ltTarget.selected="show"       
  170.         }               
  171. }

  172. wbLayout.onPopupRequest = function (ltTarget,ltEle,reason,behaviorParams) {
  173.         var ok,cfg = call(web.json.parse,,string.load("/menu.table"))
  174.         if ( ok ){       
  175.         ltTarget.child(1).state.disabled = true; //最少保留一列
  176.         for(k,v in cfg){
  177.                 if v = "show"{
  178.                           wbLayout.getEle(k).$1("i").class = "select";
  179.                 }else{       
  180.                         wbLayout.getEle(k).$1("i").class = "unselect";
  181.                 }       
  182.           }
  183.         }
  184. }

  185. wbLayout.onPopupDismissed = function (ltTarget,ltEle,reason,behaviorParams) {
  186.     cfg = {};       
  187.         menuCount = ltTarget.childCount();
  188.         for(i=1;menuCount;1){
  189.                         cfg[ltTarget.child(i).id] = ltTarget.child(i).selected;       
  190.         }        
  191.         string.save("/menu.table",web.json.stringify(cfg,true) )
  192. }

  193. mainForm.show();
  194. return win.loopMessage();
复制代码


代码粗糙,欢迎批评指正,菜单根据表头动态生成的,如果表头名称较长,弹出菜单就比较狗血了,暂时没有找到好的方法。还想请教一下,怎么实现拖动表头列,改变列的位置(顺序),并实现记忆位置。
回复

使用道具 举报

12

主题

57

帖子

423

积分

二级会员

Rank: 3Rank: 3

积分
423
发表于 2018-9-18 09:32:38 | 显示全部楼层
给li增加css样式文字过长隐藏,菜单项增加title提示完整文字


            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*clip将溢出的部分裁切掉*/
            overflow: hidden;
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-15 14:21 , Processed in 0.062500 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表