jQuery +可编辑表行编辑多个字段

Question

我试图找出用jquery和jeditable通过按钮编辑表格的方式。 我的目标是要有一个“编辑”按钮，它将所需的行单元格更改为编辑模式。

按照现在，我有：

$(document).ready(function() {
    $("#addrowbutton").click(function() {
        $("#addrow").show();
    });
    $("#canceladd").click(function() {
        $("#addrow").hide();
    });
    $("#saveadd").click(function() {
        $("#message").text("Added").fadeOut(4000, function() {
            $(this).css('display','block').text("");
        });
        $("#addrow").hide();
    });
    $("#add_trade_form").submit(function() {
        process_details();
        return false;
    });
    function process_details() { 
        $("#add_trade_form").ajaxSubmit();
        return false;
    }
    $(".editlink").click(function() {
        var datapos = $(this).parent().parent().prevAll().length;
        var editpos = datapos + 1;

        $("#trades_table tbody tr:eq(" + datapos + ")").hide();
        $("#trades_table tbody tr:eq(" + editpos + ")").show();
    });

    $(".cancellink").click(function() {
        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $("#trades_table tbody tr:eq(" + datapos + ")").show();
        $("#trades_table tbody tr:eq(" + editpos + ")").hide();
    });
    $(".savelink").click(function() { 
        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $("#message").text("Saved...").fadeOut(4000, function() {
            $(this).css('display','block').text("");
        });
        $("#trades_table tbody tr:eq(" + datapos + ")").show();
        $("#trades_table tbody tr:eq(" + editpos + ")").hide();
    });

});

所以：

• 添加行出现并通过按钮隐藏

• 编辑行显示并使用我想要的值取消它

我现在迷路的地方：

• 如何从输入中获取新值并将它们传递给控制器​​（多个ID，值）...我使用MVC。 <= .savelink

• 如何在不刷新页面的情况下保存新行，但使用新值<= #saveadd刷新表

在此先感谢所有帮助。

干杯，

/杰西克

Answer 1

我强烈建议使用jqGrid

查看演示示例和编辑示例。

他们也有一个.NET插件