Question

我正在制作一个基于jquery的甘特图，我遇到了一个问题。甘特图可用于显示相当大的项目（100到500个任务）。甘特图的条形图保存在DIV中。给500 DIV保证金的速度非常慢。我做了一些思考/测试，似乎包装所有DIV然后给予包含DIV边距的工作更快。

目前的结构（简化）：

<tr class="task-row">
  <td>Task Name</td>
  <td><div class="gantt-bar"></div></td>
</tr>

我可以移动所有甘特条的唯一方法是选择它们然后再添加边距。

$(".gantt-bar").css("margin-left", "+=24px");

建议的结构（简化）：

<div>
   <div class="left-panel">
        <div>Project Name</div>
   </div>
   <div class="right-panel">
        <div class="container">
            <div class="gantt-bar"></div>
        </div>
   </div>
</div>

在这种情况下，移动容器DIV会更快。

$(".container").css("margin-left", "+=24px");

示例：http://jsfiddle.net/cvJqP/2/

那小提琴告诉我它应该有效。我问这个问题而不是实现的原因是，目前整个事情都是用表格来完成的，而改变它与DIV一起工作是一项相当大的任务。只是在我去做之前确保这实际上有效。

这是解决问题的最佳方法吗？有没有办法保持表的实现？

感谢。

使用的解决方案：

<tr class="task-row">
      <td>Task Name</td>
      <td><div class="base"><div class="gantt-bar"></div></div></td>
</tr>

var newmargin = parseInt($(".base:first-child").css("margin-left").replace("px", "")) + 24 + "px";
$(bars).css('margin-left', newmargin);

这更快，因为不必为每个DIV重新计算保证金。

Answer 1

我不确定你的表实现是什么样的，但你不能只在表中添加margin-left吗？如果不是，你总是可以用一个容器包装表，并按照你的例子做同样的事情。

将所有DIV包装在容器中并将margin-left应用于该容器是完全有意义的。

Answer 2

如果我是你，我会研究一个经过试验和测试的jquery插件，如jQuery.Gantt。

通常，这些插件解决了您在此过程中遇到的许多问题。

Answer 3

1000个边距的分配不是很慢，而是检测和计算每个元素的边际值。

尝试仅检测第一个孩子的值，然后像这样使用某些东西：

$(".r-many").click(function() {
    var oldval=$(".bar:first-child").css('margin-left').replace('px', '');
    newval=parseInt(oldval)+24+'px';
$(".bar").css('margin-left', newval);  
});

这是闪电般的小提琴： http://jsfiddle.net/sQHCY/

我希望这就是你想要的。

给许多DIV边缘留下的速度很慢

3 个答案: