搜索
查看: 1133|回复: 4

[HTML] HL隐藏表格列,布局变化很大,请教下有没有啥办法保持初始布局

[复制链接]

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
发表于 2018-9-11 01:23:39 | 显示全部楼层 |阅读模式
  1. import win.ui;
  2. /*DSG{{*/
  3. mainForm = win.form(text="aardio form";right=973;bottom=619)
  4. mainForm.add()
  5. /*}}*/

  6. import web.layout;
  7. wbLayout = web.layout(mainForm)
  8. //wbLayout.go("/test.html")

  9. wbLayout.html = /**
  10. <!DOCTYPE html>
  11. <html lang="en">

  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>Document</title>
  15. </head>
  16. <body>
  17.     <widget type="select" id="report">
  18.         <table>
  19.             <thead>
  20.             </thead>
  21.             <tbody>
  22.             </tbody>
  23.         </table>
  24.     </widget>
  25. </body>
  26. <div id="show"></div>
  27. </html>
  28. **/

  29. wbLayout.css = /**
  30. html body {
  31.             margin: 0;
  32.             padding: 0;
  33.             font-family: '微软雅黑', '宋体';
  34.             overflow: hidden;
  35.         }
  36.         #report {
  37.             size: *;
  38.             overflow: auto;
  39.         }
  40.         table {
  41.             size: 100%%;
  42.             border-spacing: 0;
  43.         }
  44.         table thead {
  45.             height: 30px;
  46.         }
  47.         table thead th {
  48.             border: rgb(75, 75, 77) solid 1px;
  49.             background-color: #eee;
  50.         }
  51.         table thead tr {
  52.             font-size: 1.3em;
  53.             background-color: #A7C942;
  54.         }
  55.         table tbody tr {
  56.             color: #000000;
  57.             background-color: #EAF2D3;
  58.             height: 1.8em;
  59.             font-size: 1.3em;
  60.         }
  61.         table tbody td {
  62.             text-align: center;
  63.             height: 1.8em;
  64.             border: rgb(75, 75, 77) solid 1px;
  65.             padding: 0;
  66.         }
  67.         #show {
  68.             margin: 20px;
  69.         }
  70. }
  71. **/

  72. thead = {"id";"姓名";"性别";"年龄";"籍贯"}
  73. tpl = /*
  74.         <? var data = ...; ?>
  75.         <tr>
  76.         <? for(i=1;#data;1){ ?>
  77.                 <th> <? =data[ i ] ?> </th>
  78.         <?}?>
  79.         </tr>       
  80. */
  81. wbLayout.$1("thead").printf("%s",string.loadcode(tpl,thead))

  82. tbody = {
  83.         {name="张三";sex="男";age=33;jg="山东"};
  84.         {name="李四";sex="女";age=19;jg="河北"};
  85.         {name="王五";sex="男";age=25;jg="山西"};
  86. }
  87. var tr=""
  88. for(i=1;#tbody;1){
  89.         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></tr>"
  90. }

  91. wbLayout.$1("tbody").insertAdjacentHTML("beforeEnd",tr)

  92. var col = wbLayout.$("thead th");

  93. var str = ""
  94. for(i=1;#col;1){       
  95.         str++=`<span><input type="checkbox" checked="checked" id="`+i+`"/>`+col[ i ].innerText+`</span>`;       
  96. }

  97. wbLayout.$1("#show").printf("配置表头字段:%s",str);

  98. wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
  99.         var chk = wbLayout.$(`input[type="checkbox"]`)
  100.         var rootTr = wbLayout.$1("table")       
  101.         for(i=1;#chk;1){                       
  102.                 if (!chk[ i ].state.checked){
  103.                                 rootTr.enumQuery(
  104.                                         function(ltEle){                               
  105.                                                 ltEle.child(i).style["display"] = "none";
  106.                                         },"tr"
  107.                                 )       
  108.                         }else{                               
  109.                                 rootTr.enumQuery(
  110.                                         function(ltEle){                                                                                               
  111.                                                 ltEle.child(i).style["display"] = "block";
  112.                                                                
  113.                                         },"tr"
  114.                         )                                       
  115.                         }
  116.           }
  117. }

  118. mainForm.show();
  119. return win.loopMessage();
复制代码
回复

使用道具 举报

10

主题

82

帖子

666

积分

三级会员

Rank: 4

积分
666
发表于 2018-9-11 10:06:57 | 显示全部楼层
td 样式:
table tbody td {
    text-align: center;
    height: 1.8em;
    border: rgb(75, 75, 77) solid 1px;
    padding: 0;
    width: *;
}
回复

使用道具 举报

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
 楼主| 发表于 2018-9-11 10:56:36 | 显示全部楼层
alajia 发表于 2018-9-11 10:06
td 样式:
table tbody td {
    text-align: center;

谢谢,列在隐藏和显示的时候,表头th和表主体的td的高还是不能固定不变,在动态变化,css里设置了高不能对其控制了
回复

使用道具 举报

10

主题

82

帖子

666

积分

三级会员

Rank: 4

积分
666
发表于 2018-9-11 11:51:26 | 显示全部楼层
table tbody td {
    text-align: center;
    border: rgb(75, 75, 77) solid 1px;
    padding: 0;
    width: *;
    overflow: hidden;  
}
回复

使用道具 举报

6

主题

50

帖子

370

积分

二级会员

Rank: 3Rank: 3

积分
370
 楼主| 发表于 2018-9-11 12:11:52 | 显示全部楼层
alajia 发表于 2018-9-11 11:51
table tbody td {
    text-align: center;
    border: rgb(75, 75, 77) solid 1px;

非常感谢,通过你的指导,问题已解决,很多细节的东西还得深入学习才行。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2018-12-13 09:48 , Processed in 0.062500 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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