aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步，快速开始

搜索
aardio 官方社区»首页 › 标准库、扩展库 › htmlayout/sciter › 请教：批量充填数据到table，但使用innerHTML属性的无效 ...
返回列表 发新帖
查看: 14391|回复: 2

请教：批量充填数据到table，但使用innerHTML属性的无效，如何解决？

[复制链接]
superpig

1

主题

3

回帖

28

积分

新手入门

积分
28
发表于 2013-5-9 21:26:38 | 显示全部楼层 |阅读模式
创建一个简单的界面，有一个table，用数据去填充，形成多行。下面的写法得到的结果是“图标”这一列毫无内容，如果改成innerText填充纯文本是没问题。但这里我想利用shell-icon来显示文件缩略图，所以一定是要一个html的图像来填充。谁知道是什么原因么？还是我这种写法不行？
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout示例")
  4. winform.add(  )
  5. /*}}*/

  7. //web.layout 这里很需要你
  8. import web.layout;

  10. var wbLayout = web.layout( winform )


  13. wbLayout.html = /**

  15. <div id="itemList">
  16.         <table>
  17.                 <tr class="header">
  18.                         <th>序号</th>
  19.                         <th>图标</th>
  20.                         <th>名称</th>
  21.                         <th>大小</th>
  22.                 </tr>
  23.         </table>
  24. </div>
  25. <textarea id="val"></textarea>

  27. **/

  29. wbLayout.css = /**

  31. #itemList
  32. {
  33.         style-set: "item-list";
  34. }
  35. @set item-list
  36. {
  37.         :root
  38.         {
  39.                 width:*;
  40.                 height: *;
  41.                 min-height:100px;
  42.                 padding:2px;
  43.         }
  44.         :root table
  45.         {
  46.                 behavior:grid column-resizer;
  47.                 overflow:auto;
  48.                 width:*; height:*;
  49.                 border-collapse:collapse;
  50.                 flow: table-fixed;
  51.                 assigned!:self.fixedrows=1;
  52.         }

  54.         :root table tr
  55.         {
  56.                 height: 1.8em;
  57.         }

  59.         :root table td
  60.         {
  61.                 white-space:nowrap;
  62.                 border-bottom:1px solid silver;
  63.         }

  65.         :root table th
  66.         {
  67.                 height: 1.6em;
  68.                 font-weight: bold;
  69.                 text-align: left;
  70.         }
  71.         :root table th:hover
  72.         {
  73.                 border-bottom-color: orange;
  74.         }

  76.         :root table tr:current
  77.         {
  78.                 background-color: blue;
  79.                 color: white;
  80.         }
  81. }

  83. textarea#val
  84. {
  85.         width: *;
  86.         height:200px;
  87. }

  89. **/

  91. // 示例数据，将填充html中的table
  92. data = {
  93.     ["1"] = { SIZE="651";TYPE="doc";NAME="改造方案（精简版）.doc";
  94.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";
  95.     UPDATED="02/01/13 17:11:27";CREATED_BY="超猪";CREATED="03/18/13 10:30:01";
  96.     VERSION="0.1";ROWID=1 }
  97.     ["2"] = { SIZE="15.66";TYPE="xls";NAME="修订表.xls";
  98.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="01/07/13 17:03:15";
  99.     CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=2 }
  100.     ["3"] = { SIZE="13";TYPE="ppt";NAME="清单v2-20130105.ppt";
  101.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="02/04/13 15:37:59";
  102.     CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=3 }
  103. }

  105. var list = wbLayout.$1("#itemList table");

  107. // 开始填充
  108. for(k,v in data){
  109.         tr = wbLayout.createEle("tr");
  110.         tr.name = "data";

  112.         var coldata = {
  113.                 { innerText = tostring(v.ROWID) };
  114.                 { innerHTML = "<img class='shell-icon' filename='."+v.TYPE+"' />" };
  115.                 { innerText = v.NAME };
  116.                 { innerText = v.SIZE };
  117.         };
  118.        
  119.         for(i, j in coldata){
  120.                 var td = wbLayout.createEle("td");
  121.                 tr.append(td);
  122.                 for(attrName, attrValue in j) { td[attrName]=attrValue; }
  123.        
  124.         }
  125.        
  126.         list.append(tr);
  127.                                        
  128. }

  130. // 显示table的html，可发现图标这栏没填充上
  131. wbLayout.$1("textarea#val").value = wbLayout.$1("#itemList").outerHTML


  134. winform.show();
  135. win.loopMessage();
复制代码
回复

举报

superpig

1

主题

3

回帖

28

积分

新手入门

积分
28
 楼主| 发表于 2013-5-9 22:12:32 | 显示全部楼层
终于弄明白了。
三个问题，一个是behavior的库要引用，一个是css设置，还有是代码的执行顺序。
一定要先加入DOM再修改属性。这点好像跟js不一样啊。
可以参考 http://www.aardiofans.com/page/3/
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout示例")
  4. winform.add(  )
  5. /*}}*/

  7. import web.layout;
  8. import web.layout.behavior.grid;
  9. import web.layout.behavior.shellIcon;

  11. var wbLayout = web.layout( winform )

  13. import console;

  15. wbLayout.html = /**

  17. <div id="itemList">
  18.         <table>
  19.                 <tr class="header">
  20.                         <th>序号</th>
  21.                         <th>图标</th>
  22.                         <th>名称</th>
  23.                         <th>大小</th>
  24.                 </tr>
  25.         </table>
  26. </div>
  27. <textarea id="val"></textarea>

  29. **/

  31. wbLayout.css = /**

  33. #itemList
  34. {
  35.         style-set: "item-list";
  36. }
  37. @set item-list
  38. {
  39.         :root
  40.         {
  41.                 width:*;
  42.                 height: *;
  43.                 min-height:100px;
  44.                 padding:2px;
  45.         }
  46.         :root table
  47.         {
  48.                 behavior:grid column-resizer;
  49.                 overflow:auto;
  50.                 width:*; height:*;
  51.                 border-collapse:collapse;
  52.                 flow: table-fixed;
  53.                 assigned!:self.fixedrows=1;
  54.         }

  56.         :root table tr
  57.         {
  58.                 height: 1.8em;
  59.         }

  61.         :root table td
  62.         {
  63.                 white-space:nowrap;
  64.                 border-bottom:1px solid silver;
  65.         }

  67.         :root table th
  68.         {
  69.                 height: 1.6em;
  70.                 font-weight: bold;
  71.                 text-align: left;
  72.         }
  73.         :root table th:hover
  74.         {
  75.                 border-bottom-color: orange;
  76.         }

  78.         :root table tr:current
  79.         {
  80.                 background-color: blue;
  81.                 color: white;
  82.         }
  83. }

  85. img.shell-icon
  86. {
  87.         width:20px;
  88.     height:20px;
  89.     behavior: shell-icon;
  90.     vertical-align:middle;
  91. }

  93. textarea#val
  94. {
  95.         width: *;
  96.         height:200px;
  97. }

  99. **/

  101. // 示例数据，将填充html中的table
  102. data = {
  103.     ["1"] = { SIZE="651";TYPE="doc";NAME="改造方案（精简版）.doc";
  104.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";
  105.     UPDATED="02/01/13 17:11:27";CREATED_BY="超猪";CREATED="03/18/13 10:30:01";
  106.     VERSION="0.1";ROWID=1 }
  107.     ["2"] = { SIZE="15.66";TYPE="rar";NAME="修订表.rar";
  108.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="01/07/13 17:03:15";
  109.     CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=2 }
  110.     ["3"] = { SIZE="13";TYPE="ppt";NAME="清单v2-20130105.ppt";
  111.     UPDATED_BY="超猪";PATH="D:\dev\aau\HTMLayout";UPDATED="02/04/13 15:37:59";
  112.     CREATED_BY="超猪";CREATED="03/18/13 13:20:57";VERSION="0.1";ROWID=3 }
  113. }

  115. var list = wbLayout.$1("#itemList table");

  117. // 开始填充
  118. for(k,v in data){
  119.         tr = wbLayout.createEle("tr");
  120.         list.append(tr);
  121.         tr.name = "data";

  123.         var coldata = {
  124.                 { innerText = tostring(v.ROWID) };
  125.                 { innerHTML = "<img class='shell-icon' filename='."+v.TYPE+"' />" };
  126.                 { innerText = v.NAME };
  127.                 { innerText = v.SIZE };
  128.         };
  129.        
  130.         for(i, j in coldata){
  131.                 var td = wbLayout.createEle("td");
  132.                 tr.append(td);
  133.                 for(attrName, attrValue in j) {
  134.                         td[attrName]=attrValue;
  135.                         //td.innerHTML = "<div>Hello</div>"
  136.                 }
  137.        
  138.         }
  139.        

  141.                                        
  142. }

  144. // 显示table的html，可发现图标这栏没填充上
  145. wbLayout.$1("textarea#val").value = wbLayout.$1("#itemList").outerHTML


  148. winform.show();
  149. win.loopMessage();
复制代码

评分

参与人数 1 +50 收起 理由
万事发↑新一天 + 50 赞一个!

查看全部评分

回复

举报

万事发↑新一天

8

主题

88

回帖

635

积分

三级会员

积分
635
发表于 2013-5-9 22:20:20 | 显示全部楼层
多谢分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2024-10-13 09:21 , Processed in 0.065141 second(s), 28 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

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