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

我正在使用 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

请您参考如下方法:

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

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

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

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