1

我正在制作基于 jquery 的甘特图，但遇到了问题。甘特图可用于显示相当庞大的项目（100 到 500 个任务）。甘特图的条形图保存在 DIV 中。给500DIV 保证金是相当缓慢的。我已经做了一些思考/测试，似乎包装所有的 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 重新计算保证金。

4

3 回答 3

1

我不确定您的表格实现是什么样的，但您不能只在表格中添加 margin-left 吗？如果不是，您总是可以用容器包裹桌子并按照您的示例进行操作。

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

于 2013-10-22T13:20:46.653 回答
1

如果我是你，我会研究一个久经考验的 jquery 插件，比如jQuery.Gantt。

通常，这些插件已经解决了您在此过程中会遇到的大部分问题。

于 2013-10-22T13:34:03.320 回答
1

不是分配 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/

我希望这是你想要的。

于 2013-10-22T13:53:23.227 回答