代码之家 › 专栏 › 技术社区 › TigerTiger

javascript内嵌编辑,如何取消编辑有原始数据?

inline-editing jquery javascript

TigerTiger · 技术社区 · 15 年前

我有数据

<tr id="row_1">
  <td id="td_1_1">Text 1</td>
  <td id="td_2_1">Text 2</td>
  <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr>

然后在javascript中

function editRow(row_id) {
   //some ajax to retrieve html in the format
   //<td><input type="text" name="td_1" value="Text 1"></td>
   //<td><input type="text" name="td_2" value="Text 2"></td>
   //<td><input type="submit" name="submit" value="submit"></td>
}

在editrow函数中,我执行一些Ajax并检索TDS并替换[ $(row_id).html(html) ]世界其他地区的交通数据系统。这一切都很好。但是我需要有一个取消按钮,点击这个按钮可以恢复原来的TDS(也就是……无输入框)。有什么想法,如何实现这个功能?是否需要将“编辑前”行的HTML复制到变量,然后在以后取消替换输入框的HTML?谢谢你的帮助。

编辑

此外,如果用户单击页面上的其他位置,则应将其视为取消,并将原始数据带回。如何绑定此操作?

2 回复 | 直到 15 年前

Paolo Bergantino 15 年前

首先,看看JavaScript框架。您所讨论的功能已经足够高级了,如果您真的希望代码在所有浏览器中都能正常工作,那么就不应该单独执行此操作。它还可以让你的HTML不存在丑陋的内联javascript等等,这被认为是不好的做法。也就是说,这里有一个想法:

您是否考虑过每个项目有两行,一行在“编辑模式”下,另一行在“正常模式”下?您可以设置默认隐藏的“编辑模式”行的样式,当有人单击“编辑”链接时,您可以隐藏该行并将其显示在视图中。这比调用Ajax来获取编辑表单要容易得多。

编辑

Here's some code to get you started :

function editRow(row_id, callback) {
   // you would get this dynamically through ajax, thus why we need the callback
   var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>';
   callback(html);
}

$('a.edit', '#data').click(function() {
    var $tr = $(this).closest('tr');
    var id = $tr.attr('id').split('_').pop();
    var edit_row = '#edit_' + id;
    if($(edit_row).length == 1) { // edit row already exists
        $tr.hide();
        $(edit_row).show();
    } else { // doesn't exist, fetch it
        editRow(id, function(html) {
            $tr.hide();
            $tr.after(html);
        });
    }
    return false;
});

$(window).click(function(e) {
    $('tr.edit:visible').each(function() {
        var $tr = $(e.target).closest('tr');
        var id = $(this).attr('id').split('_').pop();
        console.log(e.target, $tr, this);
        if($tr.attr('id') != this.id) {
            $(this).hide();
            $('#row_' + id).show();
        }
    });
});

我可能需要注意的是,有很多jquery插件为您做了很多这方面的工作,根据您的应用程序的需要,您最好每次都提取行,而不是提取它们,等等。这只是一个大致的想法,您可能需要做些什么来实现您想要的,其余的由您决定。:)

Vincent Ramdhanie 15 年前

我认为要使用jquery获得初始功能,您可以查看 jEditable 插件。这是一个非常实用的插件,允许你点击一些文本,创建一个可编辑的区域,取消等。我假设一旦用户点击OK或Save,你不需要恢复到原来的,它的唯一中间编辑这是一个问题。Jeditable负责这个。