2013-09-24 3 views
3

У меня возникла проблема с использованием rowNum в моем jqGrid. Я пытаюсь сделать сетку только загружать количество строк, которые я указываю в rowNum. В настоящее время сетка загружает все данные в массиве.jqGrid загружает все строки, игнорируя rowNum

Вот моя сетка:

$(function() { 
    var width = $(window).width() - 50; 
    $("#category_grid").jqGrid({ 
     datatype: "local", 
     width: width, 
     height: "auto", 
     search: true, 
     autowidth: false, 
     shrinkToFit: true, 
     colNames: ['ID', 'Name', 'Abbr.', 'Last Update', 'Last Update User', 'Active?', 'Edit'], 
     colModel: [ 
      { name: 'ID', width: 5, align: 'center', sorttype: 'int' }, 
      { name: 'Name', width: 15, align: 'left' }, 
      { name: 'Abbreviation', width: 10, align: 'left' }, 
      { name: 'LastUpdateDateTime', width: 8, align: 'left', formatter: dateFix, sorttype: 'date' }, 
      { name: 'LastUpdateUser', width: 15, align: 'left', sorttype: 'string' }, 
      { name: 'Active', width: 5, align: 'center', formatter: activeFix }, 
      { name: 'Edit', width: 5, align: 'center' }, 
     ], 
     rowNum: 20, 
     rowList: [20, 50, 100, 1000, 100000], 
     viewrecords: true, 
     pager: "#gridpager", 
     sortname: "ID", 
     sortable: true, 
     ignoreCase: true, 
     headertitles: true, 
     sortorder: "desc", 
     onSelectRow: function (rowId) 
     { 
      var id = $("#category_grid").getCell(rowId, 'ID'); 
      document.location.href = '/Administration/EditCategoryRecord/'+ id; 
     }, 
    }).navGrid("#gridpager", { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: false, showQuery: false, recreateFilter: true }); 
    $("#category_grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' }) 
    setTimeout(function() { getCategories(); }, 200); 
}); 

function getCategories() { 
    var data; 
    var request = $.ajax({ 
     url: "@Url.Action("GetCategories", "Administration")", 
      type: "GET", 
      cache: false, 
      async: true, 
      data: data, 
      dataType: "json", 
     }); 
    request.done(function (orders) { 
      var thegrid = $("#category_grid"); 
      thegrid.clearGridData(); 
      setTimeout(function() { 
       for (var i = 0; i < orders.length; i++) { 
        thegrid.addRowData(i + 1, orders[i]); 
       } 
      }, 500); 
      //alert(thegrid.jqGrid('getGridParam', 'rowNum')); 
      thegrid.trigger("reloadGrid"); 
      //alert(thegrid.jqGrid('getGridParam', 'rowNum')); 

     }); 
     request.fail(function (orders) { 
      alert("The request in the getCategories function failed. The grid will not be filled."); 
     }); 
} 

А вот действие контроллера, который посылает сетке данные:

public JsonResult GetCategories() 
    { 
     // Holds all of the Categories as an array to fill the jqGrid 
     object data; 

     // Holds all of the Categories in the db 
     List<Category> Categories; 

     // Holds all of the Categories in the db with Usernames as a string instead of an int ID 
     List<Category> CategoriesWithUserNames = new List<Category>(); 

     // Get all of the current Categories 
     using (TicketDeskContext context = new TicketDeskContext()) 
      Categories = context.Categories.ToList(); 

     // For every Category, add to the List of Categories with Usernames as a string 
     foreach (Category Category in Categories) 
     { 
      string LastUpdateUser = Functions.GetUserNameByID(Category.LastUpdateUserID); 
      CategoriesWithUserNames.Add(new Category(Category.ID, Category.Active, Category.Name, Category.Abbreviation, Category.LastUpdateDateTime, LastUpdateUser)); 
     } 

     // Convert the filtered Category List to the data array 
     data = CategoriesWithUserNames.ToArray(); 

     // Return the filtered Category List 
     return Json(data, JsonRequestBehavior.AllowGet); 
    } 

Есть ли что-то, что я делаю неправильно здесь? Когда сетка загружается, она не останавливается на 20 (поскольку я устанавливаю rowNum на 20), он просто загружает все данные (в настоящее время 27 категорий).

ответ

3

Я решил эту проблему, инициировав перезагрузку сетки внутри setTimeout.

function getCategories() 
{ 
    var data; 

    var request = $.ajax({ 
     url: "@Url.Action("GetCategories", "Administration")", 
      type: "GET", 
      cache: false, 
      async: true, 
      data: data, 
      dataType: "json", 
     }); 

    request.done(function (orders) { 
      var thegrid = $("#category_grid"); 
      thegrid.clearGridData(); 
      setTimeout(function() { 
       for (var i = 0; i < orders.length; i++) 
       { 
        thegrid.addRowData(i + 1, orders[i]); 
       } 
       // Triggering a grid reload here loads the grid with the number specified in rowNum 
       thegrid.trigger("reloadGrid"); 
      }, 500); 
     }); 
     request.fail(function (orders) 
     { 

     }); 
} 
1

Добавить loadonce: true после rowNum: 20 ,. Это должно устранить проблему подкачки.

+1

Благодарим за ответ. Я попытался добавить loadonce: true, но сетка по-прежнему загружает более 20 строк. Любые другие идеи? –

+0

Вместо отдельного вызова Ajax вы можете попробовать использовать url: "" и следовать подходу, указанному в этой ссылке "http://trirand.com/blog/jqgrid/jqgrid.html". Я использовал этот подход, и это помогло мне – vejay2k

Смежные вопросы