活字格可以实现父子嵌套的DIV布局吗？（单元格进度条）

1. <div id="myProgress">
   
2.   <div id="myBar">子层</div>
   
3. </div>

复制代码

如上所示，要怎么实现？

给大佬跪了~

Eric.Liang 发表于 2020-7-28 17:50
你找到父层的DIV给他append子层div就可以了吧，或者直接去设置父层div的innerHTML

研究很久，已解决实现。过段时间看看插件怎么型，能学会的话，到时整个插件来用，还是蛮实用的。

晚上花了些时间，认真研究了一个活字格单元格的HTML布局，找到规律，效果实现了如下图所示，活字格里的一个单元格，有三层div和一层label组成，只有最外层可以命名.样式，但这已经够了，因为下面几层都有固定的类名，通过后代选择器，如$("自定义的class名").children(".fgc-align")，就可以取到下面的第二层。能找到DOM节点，就能通过CSS和JS进行相应的控制和操作了。

PS：有个坑，首层div和最里层的label，还有一个ID名，如下图的r2c9p_div和r2c9p，通过这个ID，按道理应该可以找到节点。但我在测试过程中，发现这个时灵时不灵，不清楚这个ID名是怎么生成的，最后还是有类名。这样也好，用类名的话，这个单元格位置变化了，也不会有影响~~~

1. <div>//这是首层，只有这层可以命名样式
   
2. <div><div>
   
3. <label></label>
   
4. </div></div>
   
5. </div>

复制代码

Eric.Liang 发表于 2020-7-28 17:50
你找到父层的DIV给他append子层div就可以了吧，或者直接去设置父层div的innerHTML

append子层div，这个在设计器里怎么弄？

LukeLiu 发表于 2020-7-28 11:33
楼主，你可以用简单的线框图表示出来你需要的效果，我们理解后，帮你看看能否使用活字格的功能直接实现。

如下图所示，增加JS命令后，进度条会变化






这个案例里，用值变化来触发JS命令，源码里多弄一个百分比变量，这个变量从单元格getvalue，基本就可以实现。前提时，这个嵌套层要怎么弄出来？

这个案例有试过图表和表格的数据条条件格式，但效果都不理想

LukeLiu 发表于 2020-7-28 11:33
楼主，你可以用简单的线框图表示出来你需要的效果，我们理解后，帮你看看能否使用活字格的功能直接实现。

要实现一个百份比进度条的单元格，需要用CSS和JS来配合实现，其中CSS需要一个嵌套的DIV

1. <div id="myProgress"><div id="myBar">10%</div></div>
   
2. <br>
   
3. <button onclick="move()">点我</button>
   
4. 
   
5. <style>
   
6. #myProgress {
   
7.   width: 100%;
   
8.   background-color: #ddd;
   
9. }
   
10. 
    
11. #myBar {
    
12.   width: 10%;
    
13.   height: 30px;
    
14.   background-color: #4CAF50;
    
15.   text-align: center;
    
16.   line-height: 30px;
    
17.   color: white;
    
18. }
    
19. </style>
    
20. 
    
21. <script>
    
22. function move() {
    
23.   var elem = document.getElementById("myBar");   
    
24.   var width = 10;
    
25.   var id = setInterval(frame, 10);
    
26.   function frame() {
    
27.     if (width >= 100) {
    
28.       clearInterval(id);
    
29.     } else {
    
30.       width++;
    
31.       elem.style.width = width + '%';
    
32.       elem.innerHTML = width * 1  + '%';
    
33.     }
    
34.   }
    
35. }
    
36. </script>

复制代码

楼主，你可以用简单的线框图表示出来你需要的效果，我们理解后，帮你看看能否使用活字格的功能直接实现。

mucai 发表于 2020-7-28 14:02
如下图所示，增加JS命令后，进度条会变化

你找到父层的DIV给他append子层div就可以了吧，或者直接去设置父层div的innerHTML