Ordinamento di jqGrid nella vista client ASP.NET MVC con jQuery e LINQ-to-Entities

Question

Sono un noob jQuery, quindi sono sicuro che mi manca qualcosa di semplice qui.

Ho il jqGrid che funziona con un'azione che crea dati JSON da un'operazione LINQ-to-Entities. Ma quando faccio clic sulle intestazioni delle colonne nel browser, le righe non ordinano. L'indicatore ascendente/discendente appare, ma non accade nient'altro.

La necessari Javascript e collegamenti CSS sono nell'intestazione della pagina master:

 
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> 
<!-- CSS and JavaScript files for jqGrid to display on Details pages --> 
<link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" /> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"></script> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"></script> 
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"></script> 

Ecco il mio codice di inizializzazione:

 
// jqGrid setup. 
$("#gridlist").jqGrid({ 
    url: '/Contact/GridData', 
    datatype: 'json', 
    mtype: 'GET', 
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'], 
    colModel: [ 
     { name: 'id', index: 'id', width: 40, align: 'left', resizable: true }, 
     { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" }, 
     { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" }, 
     { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}], 
    pager: jQuery('#pager'), 
    rowNum: 5, 
    rowList: [5, 10, 20, 50], 
    repeatitems: false, 
    viewrecords: true, 
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images', 
    caption: 'Contacts' 
});     

Ed ecco il codice HTML:

 
    <h3>My Grid Data</h3> 
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0"> 
    </table> 
    <div id="pager" class="scroll" style="text-align:center;"> 
    </div> 

E, solo per completezza, il metodo di azione:

 
public ActionResult GridData() 
{ 
    var page = new { page = 1 }; 

    IEnumerable contacts = _db.ContactSet; 
    int i = 0; 
    var rows = new object[contacts.Count()]; 

    foreach (Contact contact in contacts) 
    { 
     rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } }; 
     i++; 
    } 

    var result = new JsonResult(); 
    result.Data = new { page = 1, records = 2, rows, total = 1 }; 

    return result; 
} 

Qualche idea quale impostazione ovvia mi manca qui?

Answer 1

Esistono due metodi di base per gestirlo. La griglia può ordinare i dati stessi. Non ricordo come accenderlo, perché non uso mai questa opzione. In genere, lavoro con dataset troppo grandi per tornare alla pagina, quindi utilizzo le funzioni di paging della griglia. Ciò richiede di eseguire questo ordinamento sul server, poiché la griglia non vedrà l'intero set di dati.

Per eseguire il paging sul server, aggiungere un argomento sidx e un sord (entrambe le stringhe) all'azione. sidx sarà il nome della colonna su cui ordinare. sord sarà la direzione, asc o desc.

Ho a demo project che mostra come eseguire questa operazione (utilizzando LINQ agli oggetti). Ma usare LINQ per le Entità è quasi identico; Uso LINQ alle entità nel mio codice di produzione/non demo. Scarica la soluzione demo e cerca te stesso.

Answer 2

I think below example should do it. 2 important points make sure your sort column has "it" keyword as prefix. (thats for linq to know). second you load only the number of objects array element as the rows the query can read. 

    var context = new HaackOverflowDataContext(); 

    int pageIndex = Convert.ToInt32(page) - 1; 
    int pageSize = rows; 
    int totalRecords = context.Question.Count(); 
    int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 

    var questions = context.Question.OrderBy("it."+ sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize); 

    int i = 0; 
    var rowsObj = new object[pageSize>totalRecords ? totalRecords : pageSize]; 

    foreach (Question q in questions) 
    { 
     rowsObj[i] = new { id = q.Id, cell = new object[] { q.Id, q.Votes, q.Title } }; 
     i++; 
    } 

    var result = new JsonResult(); 
    result.Data = new 
    { 
     total = totalPages, 
     page = page, 
     records = totalRecords, 
     rows = rowsObj 
    }; 

    return result; 

Grazie Anuj Pandey www.anuj.co.in

he he ... questo significa che so di programmazione :)

Answer 3

OK, avrei dovuto postato questo quando ho pensato fuori, ma ho finito per essere coinvolto in altri compiti. Ecco cosa ho fatto che ha funzionato con LINQ alle entità, implementato per un'entità di report. In primo luogo, il codice per caricare il jqGrid con una ricerca di default era semplice (una volta ho capito quello che avevo perso):

$(document).ready(function() { 

    // Set up jqGrid for the report search results table. 
    // This is displayed in a tab in the bottom section of the master page. 
    $("#searchResultList").jqGrid({ 
     url: '/Report/GetResultsL2E/', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['', 'ID', 'Title', 'Post_Date', 'Start_Date', 'End_Date', 'Summary'], 
     colModel: [ 
      { name: 'act', index: 'act', width: 75, sortable: false }, 
      { name: 'ID', index: 'ID', width: 40, align: 'left', hidden: true }, 
      { name: 'Title', index: 'Title', width: 150, align: 'left' }, 
      { name: 'Post_Date', index: 'Post_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'Start_Date', index: 'Start_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'End_Date', index: 'End_Date', width: 80, align: 'left', formatter: 'date' }, 
      { name: 'Summary', index: 'Summary', width: 240, align: 'left' } 
     ], 
     pager: jQuery('#searchResultPager'), 
     rowNum: 10, 
     rowList: [5, 10, 20, 50], 
     sortname: 'Title', 
     sortorder: "asc", 
     viewrecords: true, 
     imgpath: '/Scripts/jqGrid/themes/green/images', 
     caption: 'Report Search Results', 
     editurl: "/Report/Edit", 
     scroll: true, 
     height: 'auto', 
     recordtext: ' Reports', 
     pgtext: ' of ', 
     multiselect: true, 
     multiboxonly: true, //adds check box column 
     altRows: true, 
     loadComplete: function() { 
      var ids = jQuery("#searchResultList").getDataIDs(); 
      for (var i = 0; i "; 
       se = ""; 
       ce = ""; 
       jQuery("#searchResultList").setRowData(ids[i], { act: be + se + ce }) 
      } 
     } 
    }).navGrid('#searchResultPager', 
    { edit: false, add: false, del: false, search: false }, //options 
    {height: 280, reloadAfterSubmit: false }, // edit options 
    {height: 280, reloadAfterSubmit: false }, // add options 
    {reloadAfterSubmit: false }, // del options 
    {} // search options 
    ); 
}); 

Il metodo per caricare il set di ricerca predefinito restituisce la prima pagina del set totale di rapporti disponibili:

 
/// 
/// Query the ReportSet to return a paged, sorted set of Report entity properties in response to a call from a view. 
/// 
/// The name of the column to use for sorting. 
/// The order of the sort (ascending or descending). 
/// The number of the page to return to the calling process. 
/// The number of rows to return for the page. 
/// This ActionResult returns a JSON result to be used by a jqGrid using the jQuery library. 
/// jQuery requires a script tag linking the jQuery.js script. 
/// jqGrid requires stylesheet links to the following scripts and stylesheets: 
/// 
/// jQuery/themes/base/ui.all.css 
/// jqGrid/themes/green/grid.css (or other theme CSS file) 
/// jqGrid/jquery.jqGrid.js 
/// jqGrid/grid.base.js 
/// jqGrid/js/jqModal.js 
/// jqGrid/js/jqDnR.js 
/// 
public ActionResult GetResultsL2E(string sidx, string sord, int page, int rows) 
{ 
    int pageIndex = Convert.ToInt32(page) - 1; 
    int pageSize = rows; 
    int totalRecords = _db.ReportSet.Count(); 
    int totalPages = (int)Math.Ceiling((float)totalRecords/(float)pageSize); 
    int startRecord = pageIndex * pageSize; 

    List rowStrings = new List(); 
    // Get all of the reports in the model in a fixed order (for comparison). 
    //var reports = from item in _db.ReportSet 
    //    orderby item.Start_Date, item.Title 
    //    select new { item.ID, item.Title, item.Post_Date, 
    //    item.Start_Date, item.End_Date, item.Summary }; 
    // Get all of the reports in the model in a dynamic order passed from jqGrid. 
    string orderBytext = ""; 
    orderBytext = string.Format("it.{0} {1}", sidx, sord); 
    var reports = _db.ReportSet 
        .OrderBy(orderBytext); 

    List stringList = new List(); 

    int counter = reports.Count(); 
    foreach (var report in reports) 
    { 
     var rowString = new 
     { 
      id = report.ID, 
      cell = new[] { 
        "", 
        report.ID.ToString(), 
        report.Title, 
        report.Post_Date.ToShortDateString(), 
        report.Start_Date.ToShortDateString(), 
        report.End_Date.ToString(), 
        report.Summary.ToString()} 
     }; 
     stringList.Add(rowString); 
    } 

    var rowsOut = new object[counter]; 
    for (int i = 0; i

ho poi aggiunto un altro metodo per rispondere all'utente la selezione colonne per ordinare, utilizzando il PredicateBuilder discusso dal Albaharis' libro C# nella sezione di un guscio di noce su Dynamically Composing Expression Predicates. Ho discusso la mia soluzione a questo in una domanda che ho iniziato su MSDN a PredicateBuilder fails on nested predicates with LINQ to Entities

Answer 4

Ho avuto lo stesso problema in cui il frame jqGrid era visibile, ma le righe non lo erano. La mia soluzione era aggiungere il seguente codice.

**jsonData.JsonRequestBehavior = JsonRequestBehavior.AllowGet;** 
     return jsonData;