jQuery对话框 - 使用jQuery/ajax编辑表格数据内联

Question

我在这里有一种疑问，目前我使用jQuery模式对话框来显示数据库实例的详细信息。该对话框以表格形式加载显示数据细节的局部视图。我想让用户点击编辑按钮，并直接编辑表格中的数据（具体来说，我想在每个@ Html.DisplayFor中触发一个更改为可编辑字段）。我不知道如何做到这一点，我需要用户点击编辑后有另一个对话框？任何其他可能的方式来做到这一点？

非常感谢所有帮助...

---

我打电话给我在查看对话框如下：

 //Call Details action to display the food details 
     var url = 'Details?cid=' + id; 

     $detaildialog.dialog({ open: function() { $(this).load(url) } }); 
     $detaildialog.dialog('open'); 

的详细操作将返回我的部分观点，这是我用表显示所有我的食物实例详情（下面是它的一部分）：

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.FoodName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.FoodAmount) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.StorageDate) 
    </td> 

任何线索？请帮助..

Answer 1

你可以动态地隐藏显示编辑自己的标签/输入，但使用已经具有此功能的jQuery的表格可能更容易：

• 这里是一个文章使用DataTables与一些插件来实现内联编辑。我广泛使用了DataTables，他们完成了很好的工作。 http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx

• jqGrid似乎支持在线编辑以及 http://trirand.com/blog/jqgrid/jqgrid.html#

Answer 2

问题是含糊不清的我，但你可以将一个类所有可编辑的字段，然后附加一个change事件处理

class = "editablefield"

和jQuery的

$(".editablefield").live("change", function(){ 

//your code to handle change here 

}); 

我已经使用live，以防万一处理动态添加元素到DOM

jquery .live

jquery .change