jquery + jeditable表格行編輯多個字段

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

看演示實例和編輯的例子。

他們也有一個plugin for .NET