Question

使用jeditable jQuery插件和timepicker插件。（自定义输入＆＃34;时间选择器2＆＃34;来自此页面：http://www.appelsiini.net/projects/jeditable/custom.html）

时间选择器插件接口覆盖＆＃39; onblur取消＆＃39;功能和单击新的可编辑区域将添加另一个选择器到页面而不清除第一个。

JSfiddle中有一个工作示例：

HTML：

<table width="100%" cellspacing="0" cellpadding="0" class="individual_times">
    <tbody>
        <tr>
            <th>Start</th>
            <th>End</th>
            <th>Elapsed</th>
            <th></th>
        </tr>
        <tr>
            <td style="width: 290px" id="start_124" class="time" title="Click to edit...">11:38</td>
            <td style="width: 290px" id="end_124" class="time" title="Click to edit...">11:29</td>
            <td>838:59:59</td>
            <td><span id="delete124"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span>
            </td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_125" class="time" title="Click to edit...">12:03</td>
            <td style="width: 290px" id="end_125" class="time" title="Click to edit...">12:03</td>
            <td>00:00:01</td>
            <td><span id="delete125"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span>
            </td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_126" class="time" title="Click to edit...">12:24</td>
            <td style="width: 290px" id="end_126" class="time" title="Click to edit...">12:34</td>
            <td>00:09:15</td>
            <td><span id="delete126"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span>
            </td>
        </tr>
        <tr>
            <td style="width: 290px" id="start_127" class="time" title="Click to edit...">12:35</td>
            <td colspan="2">Currently working....</td>
            <td><span id="delete127"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span>
            </td>
        </tr>
    </tbody>
</table>

JS：

var jamroom_url = 'http://www.earner.iixxii.cc';
/**
 * this is for the editable times using jeditable.
 */
$(".time").each(function () {
    $(this).editable(submitEdit, {
        indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
        type: 'time',
        submit: 'OK',
        tooltip: 'Click to edit...',
        cancel: 'cancel',
        id: $(this).attr('id')
    });
});

/**
 * and this is extending jeditable to return multiple values to update the elapsed time too.
 * from http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess
 * @param value
 * @param settings
 */
function submitEdit(value, settings) {
    var edits = new Object();
    var origvalue = this.revert;
    var textbox = this;
    var result = value;
    edits['value'] = value;
    edits['id'] = settings.id;
    var returned = $.ajax({
        url: jamroom_url + "/apTimetracker.php?mode=tracker&t=edit",
        type: "POST",
        data: edits,
        dataType: "json",
        complete: function (xhr, textStatus) {
            var response = $.secureEvalJSON(xhr.responseText);
            if (response.success_msg == 'success') {
                alert('was successful');
            }
        }
    });
    return (result);
}

点击START或END列中的任何时间都会将时间更改为可编辑。

我希望它工作的方式是在旧时间点击新时间时返回到未编辑状态。在jquery.editable.js函数中有一个取消操作。

我想知道的是如何在点击新时间时直接调用它。

Answer 1

您可以为每个元素附加一个点击处理程序，以重置所有其他可编辑内容：

$(".time").editable(submitEdit, {
    indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
    type: 'time',
    submit: 'OK',
    tooltip: 'Click to edit...',
    cancel: 'cancel',
    id: $(this).attr('id'),
}).click(function() {
    var allEditables = $(this).closest('table').find('.time');
    $.each(allEditables.not($(this)).get(), function(i, elm) {
        elm.reset();
    });
});

请参阅更新的jsfiddler：http://jsfiddle.net/william/kb2n5/1/

jQuery的。 jeditable。当新的时间选择器打开时，取消上一次选择器

1 个答案: