在带有分页问题的webgrid中添加表格行？

我想添加一行到一个MVC3 WebGrid的分页启用使用JQuery。在带有分页问题的webgrid中添加表格行？

当我添加新行时，它作为最后一行正确插入，但是当我的WebGrid中有多个页面时出现问题。

将插入到第一个WebGrid页面上的插入到最后一个WebGrid页面最后一行的新行插入。

Javascript代码：

$("#add-category-dialog").dialog({ 
     resizable: false, 
     height: 300, 
     modal: true, 
     autoOpen: false, 
     open: function (event, ui) { 
      var objectid = 0; 
      $('#add-category-dialog').load("/Categories/CreateEditPartial", { id: objectid }); 
     }, 
     buttons: { 
      "Save": function() { 
       var ai = { 
        categoryID: $(this).data('id'), 
        Name: $("#Name").val() 
       }; 
       var json = $.toJSON(ai); 

       $.ajax({ 
        url: $(this).data('url'), 
        type: 'POST', 
        dataType: 'json', 
        data: json, 
        contentType: 'application/json; charset=utf-8', 
        success: function (data) { 
         $('.pretty-table tr:last').after('<tr><td>....</td></tr>'); 
        }, 
        error: function (data) { 
         var data = data; 
         alert("Error"); 
        } 
       }); 
       $(this).dialog("close"); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

$("#add-category-btn").live("click", function() { 
    var url = $(this).attr('controller'); 

    $("#add-category-dialog") 
     .data('url', url) 
     .dialog('open'); 

    event.stopPropagation(); 
    return true; 

});

控制器：

[HttpPost] 
public ActionResult Create(Category Category) 
{ 
    if (ModelState.IsValid) 
    { 
     context.Categories.Add(Category); 
     context.SaveChanges(); 
    } 

    return Json(new { Success = Category.CategoryID > 0, Category }); 
}

查看：

var grid = new WebGrid(Model, ajaxUpdateContainerId: "category-grid", canPage: true, rowsPerPage: 30); 

@grid.GetHtml(
     tableStyle: "pretty-table", 
     headerStyle: "ui-widget-header", 
     columns: grid.Columns(
     grid.Column("CategoryID", "Id", canSort: true, format: @<b>@item.CategoryID</b>), 
     grid.Column("Name", "Name", canSort: true, format: @<b>@item.Name</b>) 
     ) 
    )

来源

2011-08-24 kokomo

有了下面的行要添加新行作为当前页的最后一行。

$('.pretty-table tr:last').after('<tr><td>....</td></tr>');

带分页的WebGrid，只显示特定页面的行。所以，生成的结束html（table> tr）将仅用于该特定页面。所以，上面的jQuery行查找生成的html中的最后一行，并在它后面插入行。在你的情况可能是第一页。尝试导航到最后一页（或第一个和最后一个之间的任何页面），然后添加新行，看看它是如何发生的。

控制器代码看起来没问题，所以你不应该对ajax调用成功做任何事情。评论上面的行并测试你的代码。添加新行并导航到最后一页。你的新行应该显示在那里。

来源

2011-08-29 11:14:48 kaps

在带有分页问题的webgrid中添加表格行？

回答

相关问题