javascript - Django + JQuery - 交互式甘特图

Question

我正在使用 django 和 jquery 制作交互式甘特图。

我建立这样的表:

<div class="gantt">
<div class="gantt-labels">
    {% for item in items2 %}
    <tr>
    <div class="gantt-labels" id="labels"> </div> 
    </tr> 
    {% endfor %}
</div>
<div class="gantt_timeline">        
<div class="table gantt_table" id="myTable">
<thead>
<div class="gantt-tr time-bar"> 
    {% for item in items2 %}
    <div class="gantt-td chart-values">{{ item.y|date:"D" }}</div>
    {% endfor %}                                
    </div>
</thead>
<tbody>      
{% include "datamodel3.html" %}
    {% for item in items2 %}
    <div class="tr gantt-tr rows" id="row{{ forloop.counter }}" >
        {% for item in items2 %}
        <div class="td gantt-td"> </div>
        {% endfor %}
    </div>
    {% endfor %}
</tbody>
</div>
</div>
</div>

查询集“items2”保存表的数据(日期中的行数和单元格数)

例子:

第 1 行 2012 年 1 月 1 日

第 2 行 2012 年 2 月 1 日

...

第 31 行 2012 年 1 月 31 日

数据模型3.html

这里是酒吧:

{% for item in items3 %}
<div class='bar resizable bars' style="pointer-events:visible;" id="bar{{ forloop.counter }}" data-duration="{{ item.start|date:'D' }}-{{ item.end|date:'D' }}">
<div class='resizers'>
    <div class='resizer top-left'></div>
    <div class='resizer top-right'></div>
    <div class='resizer bottom-left'></div>
    <div class='resizer bottom-right'></div>
</div>
</div>
{% endfor %}

查询集“items3”保存柱的数据(名称、开始日期和结束日期)

例子:

bar1 2012 年 1 月 1 日 2012 年 10 月 1 日

bar2 2012 年 8 月 1 日 2012 年 1 月 14 日

我用它来使条形可拖动:

(function() {
    $(".bar").draggable({
    containment: "parent"
    });
})();

我用它来使条形可调整大小:

https://codepen.io/ZeroX-DG/pen/vjdoYe

我用它来安排他们:

https://codepen.io/tutsplus/pen/ZEzerNB

我用它为每一行分配一个标签:

var iLabel = 0;
document.querySelectorAll('#labels').forEach(function (element, index) {
element.innerHTML = iLabel < labels.length ?
labels[iLabel] :
'';
iLabel++;
})

到目前为止，这些条具有正确的长度(开始和结束日期)，可以拖动和调整大小。

现在唯一的事情是将每个条附加到其行(第一个条到第一行，依此类推....)

我尝试了不同的方法，但最终为每一行和每一行分配了一个 ID，并将它们相互连接:

$(document).ready(function(){
newfunction();
});

function newfunction(){
    var thisrows = $("#row1");
    var thisbars = $("#bar1");
    /* var fragment = document.createDocumentFragment(); fragment.appendChild(thisbars); */
$(thisrows).html(thisbars);
}

当我尝试使用片段时，我得到: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node.

现在，我尝试做这样的事情，而不是对每个 id 进行硬编码:

function newfunction(){
var n = 0;
var e = 0;
$(".rows").each(function(){
var thisrows = $(this).attr("id") + n;
n++;
});
$(".bars").each(function(){
var thisbars = $(this).attr("id") + e;
var fragment = document.createDocumentFragment();
fragment.appendChild(thisbars);
e++;
});
$(thisrows).appendChild(fragment);
};

即使不使用片段，这也不起作用。有什么建议么？

另外，我想在移动/调整大小时保存条的新位置和长度。

这样做的最佳方法是什么？

先感谢您

这是我的第一篇关于这个的帖子，上面有一张 table 的图片:

Django + JQuery - Append bars to table rows

Answer 1

我不完全确定我得到了整个上下文，但我认为代码中有一些错误，这是我解决脚本的尝试:

现在唯一要做的就是将每个条添加到其行(第一个条到第一行，依此类推....)

function newfunction(){
  const bars = $(".bars");
  $(".rows").each(function(index){
    $(this).html(bars[index]);
  });
};

为了在我移动/调整它的大小时保存条的新位置和长度，归结为拥有一个具有唯一 ID 的对象 { [bar id]: { position: ... , size: .... }, ...}或直线排列的条形 [{ id: ..., size: ... } , ...]您可以轻松切换位置。您更新观察者/监听器中的对象。