2012-01-19 9 views
0

jQueryグリッドを使用してこのサンプルMVCプロジェクトを作成しました。私が遭遇している問題は1つだけです。これはjQueryグリッドのソート機能です。MVC 3でjQueryグリッドの列をソートする方法は?

モデル:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.ComponentModel.DataAnnotations; 

namespace MyAjaxSample.Models 
{ 
    public class Candy 
    { 
     [Key]   
     public long ID { get; set; } 
     public string Name { get; set; } 
     public double Price { get; set; } 
     public string Color { get; set; } 
     public bool Expired { get; set; } 
    } 
} 

コントローラー:ここでの唯一の問題はソート機能である

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" /> 

<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> 

<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery("#list").jqGrid({ 
      url: '/Home/DynamicGridData/', 
      datatype: 'json', 
      mtype: 'POST', 
      colNames: ['ID', 'Name', 'Price', 'Color', 'Expired'], 
      colModel: [ 
     { name: 'ID', index: 'ID', width: 40, align: 'left' }, 
     { name: 'Name', index: 'Name', width: 40, align: 'left' }, 
     { name: 'Price', index: 'Price', width: 400, align: 'left' }, 
     { name: 'Color', index: 'Color', width: 400, align: 'left' }, 
     { name: 'Expired', index: 'Expired', width: 400, align: 'left' } 
     ], 
      pager: jQuery('#pager'), 
      rowNum: 80, 
      rowList: [20, 10, 20, 50], 
      sortname: 'ID', 
      sortorder: "desc", 
      viewrecords: true, 
      imgpath: '', 
      caption: 'My first grid' 
     }); 
    }); 
</script> 

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

:エラーが

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using MyAjaxSample.Models; 

namespace MyAjaxSample.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public JsonResult DynamicGridData(string sidx, string sord, int page, int rows) 
     { 
      List<Candy> candyList = new List<Candy>(); 
      for (int i = 0; i <= 50; i++) 
      { 
       Candy candy = new Candy(); 
       candy.ID = i; 
       candy.Name = "Candy " + i.ToString(); 
       candy.Price = i * 0.19; 
       candy.Color = "Black"; 
       candy.Expired = false; 

       candyList.Add(candy); 
      } 

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

      // This is not working 
      //var candies = context.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize); ; 
      var candies = context; 

      var jsonData = new 
      { 
       total = totalPages, 
       page, 
       records = totalRecords, 
       rows = (
        from item in candies 
        select new 
        { 
         i = candies, 
         cell = new string[] { item.ID.ToString(), item.Name, item.Price.ToString(), item.Color, item.Expired.ToString() } 
        }).ToArray() 
      }; 
      return Json(jsonData); 
     } 
    } 
} 

ビューを発生するコメントコードを、ご参照ください。実際にはこれをEntity Frameworkに使用します。理由は、私がListを使用したのは、(私にとっては)同じsortOrderパラメータを持つからです。とにかく助けてくれることを願っています。

答えて

1

Demoリンクを使用してサンプルの例を参照してください。 jQueryのグリッドの

enter image description here

+0

、heeaderの目でTDを交換してください。 tbodyとヘッダー行でdatarowsをtheadタグで限定するようになりました。 – Pankaj

+0

ありがとうございますが、私は本当に理解していません。私はjQueryの新機能です。 : – fiberOptics

+0

あなたのCSSのヘッダーでそれを行う必要があります。 – Pankaj

関連する問題