1

我只是想确保我现在走在正确的轨道上：

做了一件小事，让管理员可以编辑人们的日程安排。现在他点击一行，所有的时间表都变成了可编辑的。如果他连续更改值，我会抓住它

$('.selector').change(function() { // this happens to be a <select> dropdown. I guess technically this is the <option> inside of the select.
    var updates = new Array(); // an array of all the updates
    var classList = $(this).attr('id').split(/\s+\); // the id of a <select> would be something like "12 monday start" meaning the user_id, day_of_week, start/end time. Just converting it to an array here.
    classList.push($(this).val()); // the time it has been changed to
    updates.push(classList); // add the singular time update to the overall array
    $('.save_schedule').click(function() {
        // here I would iterate through all of the arrays in updates and do some sort of ajax call, correct?
    });
});

只是想确保在我走得更远之前我走在正确的轨道上，并且可能会重写一些东西。

谢谢

我的 HTML 已被请求：https ://gist.github.com/2435293

4

2 回答 2

0

如果你的 HTML 看起来像这样

<select id="12 monday start" class="selector">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="12 monday end" class="selector">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input type="button" class="save_schedule" value="save" />

你的 javascript 可能看起来像这样

$('.save_schedule').click(function() {

    var arr = new Array();
    $('.selector').each(function() {

        arr.push($(this).attr('id').split(/\s+/));
        arr.push($(":selected", this).val())
    });

    alert(arr);
    // ajax call here
});

参见 jsfiddle 示例

于 2012-04-21T07:44:26.060 回答
0

我可以想到两种方法来实现这一点：

选项 1 - 草稿保存

每次用户编辑一行时，您都会进行 AJAX 调用以临时保存他的更改（将数据库列添加draft到与实际更改不同的草稿中）。

您应该将处理程序移到click处理程序之外change：

$('.selector').change(function() {
    ... 
});
$('.save_schedule').click(function() {
    ...
});

在change处理程序中，$(this)指向当前标记select。要获取选定的值，您可以使用$(this).val().

为避免拆分 select id 属性以获取所需的所有元素，您可以使用自定义属性：

<select data-user-id="12" data-day="monday" data-time="start">...</select>

然后，在您的change处理程序中，您可以使用该attr方法获取它们的值。

var user_id = $(this).attr('data-user-id');
var day = $(this).attr('data-day');
var time = $(this).attr('data-time');

现在，您可以进行 ajax 调用以将更改存储为draft.

当用户单击 时save_schedule，进行最终的 ajax 调用以更新草稿的状态并将其设置为永久。

选项 2 - 简单保存，表单序列化

只有当用户单击保存按钮时，所有更改才会保存。

我建议将所有数据保存在 HTML 标记中，而不是 Javascript 中。（原因如下：如果用户编辑两次计划会发生什么？更改是否再次推送到数组中？）。

您可以在输入/选择不可编辑时隐藏它们，并且您不再需要处理该change事件。

当用户单击 时save_schedule，您可以使用诸如$(form).serialize()从您的输入 (http://api.jquery.com/serialize/) 中收集所有数据并进行 AJAX 调用以保存您的更改之类的功能。

于 2012-04-21T07:44:53.540 回答