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

人生方程式 · 发表于 2018-9-11 01:23:39

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio form";right=973;bottom=619)
mainForm.add()
/*}}*/
import web.layout;
wbLayout = web.layout(mainForm)
//wbLayout.go("/test.html")
wbLayout.html = /**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<widget type="select" id="report">
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
</widget>
</body>
<div id="show"></div>
</html>
**/
wbLayout.css = /**
html body {
margin: 0;
padding: 0;
font-family: '微软雅黑', '宋体';
overflow: hidden;
}
#report {
size: *;
overflow: auto;
}
table {
size: 100%%;
border-spacing: 0;
}
table thead {
height: 30px;
}
table thead th {
border: rgb(75, 75, 77) solid 1px;
background-color: #eee;
}
table thead tr {
font-size: 1.3em;
background-color: #A7C942;
}
table tbody tr {
color: #000000;
background-color: #EAF2D3;
height: 1.8em;
font-size: 1.3em;
}
table tbody td {
text-align: center;
height: 1.8em;
border: rgb(75, 75, 77) solid 1px;
padding: 0;
}
#show {
margin: 20px;
}
}
**/
thead = {"id";"姓名";"性别";"年龄";"籍贯"}
tpl = /*
<? var data = ...; ?>
<tr>
<? for(i=1;#data;1){ ?>
<th> <? =data[ i ] ?> </th>
<?}?>
</tr>
*/
wbLayout.$1("thead").printf("%s",string.loadcode(tpl,thead))
tbody = {
{name="张三";sex="男";age=33;jg="山东"};
{name="李四";sex="女";age=19;jg="河北"};
{name="王五";sex="男";age=25;jg="山西"};
}
var tr=""
for(i=1;#tbody;1){
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>"
}
wbLayout.$1("tbody").insertAdjacentHTML("beforeEnd",tr)
var col = wbLayout.$("thead th");
var str = ""
for(i=1;#col;1){
str++=`<span><input type="checkbox" checked="checked" id="`+i+`"/>`+col[ i ].innerText+`</span>`;
}
wbLayout.$1("#show").printf("配置表头字段：%s",str);
wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
var chk = wbLayout.$(`input[type="checkbox"]`)
var rootTr = wbLayout.$1("table")
for(i=1;#chk;1){
if (!chk[ i ].state.checked){
rootTr.enumQuery(
function(ltEle){
ltEle.child(i).style["display"] = "none";
},"tr"
)
}else{
rootTr.enumQuery(
function(ltEle){
ltEle.child(i).style["display"] = "block";
},"tr"
)
}
}
}
mainForm.show();
return win.loopMessage();

复制代码

alajia · 发表于 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: *;
}

人生方程式 · 发表于 2018-9-11 10:56:36

alajia 发表于 2018-9-11 10:06
td 样式：
table tbody td {
text-align: center;

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

alajia · 发表于 2018-9-11 11:51:26

table tbody td {
text-align: center;
border: rgb(75, 75, 77) solid 1px;
padding: 0;
width: *;
overflow: hidden;
}

人生方程式 · 发表于 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;

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

		自动登录	找回密码
密码			注册会员