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年1月2日

2012年1月31日

---

datamodel3.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 08/01/2012 14/01/2012

---

我用它来使棒材可拖动：

(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:node.appendChild的参数1('node'(必须是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);
};

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

---

此外，当我移动/调整条形图时，我想保存条形图的新位置和长度。

做到这一点的最佳方法是什么？

提前感谢

这是我的第一篇关于这一点的帖子，其中有一张桌子的图片：

Django+JQuery-将条形图附加到表行

Answer 1

我不完全确定我是否得到了整个上下文，但我认为代码中存在一些错误，以下是我尝试解决脚本：

目前唯一的方法是将每个条附加到其行(第一条到第一行，依此类推……(

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

当我移动/调整条的大小时，要保存条的新位置和长度，可以归结为为为条{ [bar id]: { position: ... , size: .... }, ...}或条[{ id: ..., size: ... } , ...]的直向上阵列提供一个具有唯一id的对象，您可以在其中轻松切换位置。您可以在observer/listener中更新对象。