aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 15257|回复: 6

HTMLayout - Treeview 节点文本实现两端对齐

[复制链接]

3

主题

6

回帖

83

积分

一级会员

积分
83
发表于 2018-4-19 16:04:03 | 显示全部楼层 |阅读模式
求助:treeview加了些自定义的内容后,有错位等情况,可能是样式表写的不对吧。
错乱情况:展开所有节点,然后再折叠 和 展开 经理室,能看到错位,显示空白等情况。

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = win.form(text="aardio Form";right=309;bottom=399;parent=...)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. var wbLayout = web.layout(winform);

  8. wbLayout.html = /**
  9. <widget #dd type=select>
  10.         <OPTIONS expanded>
  11.                 <span .col1>某某公司</span><span .col2>481/674</span>
  12.                   <OPTIONS>
  13.                           <span .col1>经理室</span><span .col2>3/10</span>
  14.                     <OPTION>
  15.                             <span .col1>王经理</span><span .col2>(离线)</span>
  16.                     </OPTION>
  17.                     <OPTION .online>
  18.                             <span .col1>张经理 </span><span .col2>(离开)</span>
  19.                     </OPTION>
  20.                     <OPTION>
  21.                             <span .col1>李经理</span><span .col2>(在线)</span>
  22.                     </OPTION>
  23.                   </OPTIONS>
  24.                  
  25.                   <OPTIONS>
  26.                           <span .col1>办公室</span>
  27.                           <span .col2>80/94</span>
  28.                     <OPTIONS id="1011@222">
  29.                             <span .col1>科室一</span><span .col2>3/3</span>
  30.                                   <OPTION>
  31.                                     <span .col1>孟科长</span><span .col2>(离开)</span>
  32.                             </OPTION>
  33.                             <OPTION>
  34.                                     <span .col1>夏科员</span><span .col2>(离开)</span>
  35.                             </OPTION>
  36.                             <OPTION>
  37.                                     <span .col1 id="user1032" app="appname">严科员</span><span .col2>(离开)</span>
  38.                             </OPTION>
  39.                     </OPTIONS>
  40.                     <OPTION><span .col1>科室二</span><span .col2>80/94</span></OPTION>
  41.                     <OPTION><span .col1>科室三</span><span .col2>80/94</span></OPTION>
  42.                   </OPTIONS>
  43.         </OPTIONS>
  44. </widget>
  45. **/

  46. wbLayout.css = /**
  47. #dd {
  48.         width: *;
  49.         height: *;
  50.         background-color:rgb(0,0,255);
  51. }

  52. #dd .col1 {
  53.         width: *;
  54. }
  55. #dd .col2 {
  56.         width: 50px;
  57.         text-align:right;
  58.         right:5px;
  59.         position:fixed;
  60. }

  61. widget option span { color:red; text-align:right; width: 50px;width: 50px;position:fixed;border:1}
  62. widget option
  63.     {
  64.       list-marker-color:red;
  65.       width:100%%;
  66.       border: 1;
  67.       line-height:14px;
  68.     }   
  69. #dd span{
  70.         font-size:14px;
  71. }

  72. #dd .online{
  73.         color:blue;
  74.         font-weight:800;
  75. }
  76. **/

  77. winform.show();
  78. win.loopMessage();
复制代码

170

主题

2169

回帖

1万

积分

管理员

积分
13161
发表于 2018-4-19 16:37:50 | 显示全部楼层
这并不是错位了,
CSS的问题CSS里解决,CSS的基础知识最好是先了解一下,
position:fixed是相对于浏览器定位,当然你折叠他不动。其实你这里的 position:fixed 是不必要的,直接删掉就可以了。

另外,你这样写好像是为了做到左右两端对齐(为方便他人,帖子标题已帮你改掉)。
如果要实现这种效果,用HTMLayout还是很容易的,用flow布局就可以了。

入门的一些教程还是要去看看,
不然会不必要的浪费很多时间去走弯路,
HTMLayout flow布局样式http://bbs.aardio.com/forum.php?mod=viewthread&tid=7159
HTMLayout版块的置顶帖子,也就是紧挨着你的帖子上面的那个帖子。

很难得的是,提问附上了可运行的代码,所以投桃报李,我也给你一份直接可用的代码
import win.ui;
/*DSG{{*/
var winform = win.form(text="HTMLayout - Treeview 节点文本实现两端对齐";right=454;bottom=620)
winform.add()
/*}}*/

import web.layout;
var wbLayout = web.layout(winform);

wbLayout.html =
/**
<widget #dd type=select>
  <OPTIONS expanded>
    <div>
      <div .col1>某某公司</div>
      <div .col2>481/674</div>
    </div>
    <OPTIONS>
      <div>
        <div .col1>经理室</div>
        <div .col2>3/10</div></div>
      <OPTION>
        <div .col1>王经理</div>
        <div .col2>(离线)</div></OPTION>
      <OPTION .online>
        <div .col1>张经理</div>
        <div .col2>(离开)</div></OPTION>
      <OPTION>
        <div .col1>李经理</div>
        <div .col2>(在线)</div></OPTION>
    </OPTIONS>
    <OPTIONS>
      <div>
        <div .col1>办公室</div>
        <div .col2>80/94</div>
      </div>
      <OPTIONS id="1011@222">
        <div>
          <div .col1>科室一</div>
          <div .col2>3/3</div>
        </div>
        <OPTION>
          <div .col1>孟科长</div>
          <div .col2>(离开)</div></OPTION>
        <OPTION>
          <div .col1>夏科员</div>
          <div .col2>(离开)</div></OPTION>
        <OPTION>
          <div .col1 id="user1032" app="appname">严科员</div>
          <div .col2>(离开)</div></OPTION>
      </OPTIONS>
      <OPTION>
        <div .col1>科室二</div>
        <div .col2>80/94</div></OPTION>
      <OPTION>
        <div .col1>科室三</div>
        <div .col2>80/94</div></OPTION>
    </OPTIONS>
  </OPTIONS>
</widget>
**/


wbLayout.css =
/**
#dd {
    width:*;
    height:*;
    background-color:rgb(0,0,255);
}
#dd .col1 {
    width:100%%;
}
#dd .col2 {
    width:50px;
    text-align:right;
    margin-right:5px;
}
widget option span {
    color:red;
    text-align:right;
    width:50px;
    width:50px;
    border:1
}
widget option {
    list-marker-color:red;
    width:100%%;
    border:1;
    line-height:14px;
    flow:horizontal;
}
widget options div {
    flow:horizontal;
}
#dd span {
    font-size:14px;
}
#dd .online {
    color:blue;
    font-weight:800;
}
**/

winform.show();
win.loopMessage();



3

主题

6

回帖

83

积分

一级会员

积分
83
 楼主| 发表于 2018-4-19 16:55:28 | 显示全部楼层
非常感谢,果然是css的问题。
不知道winform中的treeview能否实现类似的功能,估计要实现自定义绘制吧。还是htmlayout方便。

3

主题

6

回帖

83

积分

一级会员

积分
83
 楼主| 发表于 2018-4-20 08:31:25 | 显示全部楼层
不好意思啊,仔细测试了一下,好像问题没有解决。
全部展开时正常,如图:


此时折叠 经理室,下面显示不正常了,如图:


不知道还有什么其他原因。

7

主题

32

回帖

428

积分

二级会员

积分
428
发表于 2018-4-20 08:39:21 来自手机 | 显示全部楼层
美好风景 发表于 2018-4-20 08:31
不好意思啊,仔细测试了一下,好像问题没有解决。
全部展开时正常,如图:


Jacen不是说了,css问题css里解决,多查查css手册            

0

主题

21

回帖

167

积分

一级会员

积分
167
发表于 2018-4-20 08:58:06 | 显示全部楼层
复制你的代码发现有问题,复制Jacen的代码没问题,而且看你后面的截图,颜色什么的又改了,不知道是不是又复制了Jacen的代码过去然后又不小心改错了什么了。

170

主题

2169

回帖

1万

积分

管理员

积分
13161
发表于 2018-4-20 12:44:09 | 显示全部楼层
美好风景 发表于 2018-4-20 08:31
不好意思啊,仔细测试了一下,好像问题没有解决。
全部展开时正常,如图:
你运行的不是我给你的代码,
前面说过了,折叠以后错位,是因为你的CSS里写了 position:fixed,找到这句去掉就可以了。
position:fixed是相对浏览器定位,当然你折叠了他的位置不会跟着折叠变化。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2024-10-4 19:02 , Processed in 0.061558 second(s), 22 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

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