Question

我正在使用django后端和只有jquery客户端的员工调度应用程序。我有一个表，其中每一行都是一名员工，每列都是一个日期。每个<td>内部可以是<div>，它是班次的图形表示。 div可以拖放到其他单元格中。

我的问题是：如何将班次数据存储到客户端并在将班次拖到另一名员工或日期时更新？

目前我使用JQuery UI来处理拖放，创建表的django模板，以及用于保存数据的实际DOM（<span>来保存开始时间，由innerHTML访问等等... ）。我想要一些javascript对象，当其相应的图形对象被拖动到另一个单元格时会更新。

对此应用程序使用的技术没有要求，因此欢迎任何其他技术的建议，但我更愿意在后端坚持使用Django和Python。

相关代码：转移HTML对象

<div class="shift draggable-shift">
<span style="display:none">{{id}}</span>
<div class="shift-top">
    <p class="shift-text">
        <span>{{start_time}}</span> - <span>{{end_time}}</span>
    </p>
</div>
<div class="shift-bottom">
    <p class="shift-text">
        {{role}}
    </p>
</div>
</div>

日期和员工是通过包含班次的<td>上的ID（例如1-2009-12-14 - ＆gt; employeeID-date）和start_time，end_time，shift-id和角色找到的从模板生成的标记中找到。

提取数据的javascript：

var draggable = ui.draggable;
draggable.parent().html('');
$(this).html(draggable);
draggable.css("left","");
draggable.css("top","");
draggable.css("position","");
draggable.draggable();
console.log($(this).attr('id'));
id = draggable.children()[0].innerHTML;
start = draggable.children()[1].children[0].children[0].innerHTML;
end = draggable.children()[1].children[0].children[1].innerHTML;
role = draggable.children()[2].children[0].innerHTML;
console.log(id + start + end);
var shift = {};
//shift["id"] = id; 
shift["start"] = start;
shift["end"] = end;
shift["role"] = role;
shift["employee"] = $(this).attr("id").substring(0,1);
shift["date"] = $(this).attr("id").substring(2);
modified["changed"][id] = shift;
j = JSON.stringify(modified);
console.log(modified);
console.log(j);

Answer 1

我自己实际上遇到了更好的答案。

使用jQuery .data()函数，您可以将数据添加到无法从用户访问的DOM对象中。

拖放时更新javascript数据

1 个答案: