在帶有分頁問題的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中添加表格行？

回答

相關問題