JQgrid排序MVC3

时间:2013-02-21 11:12:45

标签: asp.net-mvc-3 razor jqgrid

在我的CS页面中,我有以下代码

   public JsonResult DynamicGridData(string sidx, string sord, int page, int rows)
    {

        Employee _emp = new Employee();

        List<Employee> _lstemp = _emp.GetallEmp();
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows;
        int totalRecords = _lstemp.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);


        var jsonData = new
        {
            total = totalPages,
            page,
            records = totalRecords,
            rows = (
                from emp in _lstemp
                select new
                {
                    i = emp.ID,
                    cell = new string[] { emp.ID.ToString(), emp.FirstName.ToString(), emp.LastName.ToString(),emp.Age.ToString(),emp.State.ToString(),emp.Country.ToString() }
                }).ToArray()
        };
        return Json(jsonData);
    }

我的模特是

     public class Employee
{
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string State { get; set; }
    public string Country { get; set; }

    public List<Employee> GetallEmp()
    {
        List<Employee> list = new List<Employee>()
        {
            new Employee{ID=1,FirstName="Asish",LastName="Nehra",Age=25,State="A",Country="India"},
            new Employee{ID=2,FirstName="Nsish",LastName="Oehra",Age=35,State="B",Country="Sri Lanka"},
            new Employee{ID=3,FirstName="Psish",LastName="Lehra",Age=26,State="C",Country="Bangladesh"},
            new Employee{ID=4,FirstName="Jsish",LastName="Hehra",Age=25,State="D",Country="Australia"},
            new Employee{ID=5,FirstName="Usish",LastName="Tehra",Age=85,State="E",Country="Kenya"},
            new Employee{ID=6,FirstName="Rsish",LastName="Lehra",Age=15,State="F",Country="India"},
            new Employee{ID=7,FirstName="Isish",LastName="Eehra",Age=5,State="G",Country="Pakistan"},
             new Employee{ID=8,FirstName="Asish",LastName="Nehra",Age=25,State="A",Country="India"},
            new Employee{ID=9,FirstName="Nsish",LastName="Oehra",Age=35,State="B",Country="Sri Lanka"},
            new Employee{ID=10,FirstName="Psish",LastName="Lehra",Age=26,State="C",Country="Bangladesh"},
            new Employee{ID=11,FirstName="Jsish",LastName="Hehra",Age=25,State="D",Country="Australia"},
            new Employee{ID=12,FirstName="Usish",LastName="Tehra",Age=85,State="E",Country="Kenya"},
            new Employee{ID=13,FirstName="Rsish",LastName="Lehra",Age=15,State="F",Country="India"},
            new Employee{ID=14,FirstName="Isish",LastName="Eehra",Age=5,State="G",Country="Pakistan"},
             new Employee{ID=15,FirstName="Asish",LastName="Nehra",Age=25,State="A",Country="India"},
            new Employee{ID=16,FirstName="Nsish",LastName="Oehra",Age=35,State="B",Country="Sri Lanka"},
            new Employee{ID=17,FirstName="Psish",LastName="Lehra",Age=26,State="C",Country="Bangladesh"},
            new Employee{ID=18,FirstName="Jsish",LastName="Hehra",Age=25,State="D",Country="Australia"},
            new Employee{ID=19,FirstName="Usish",LastName="Tehra",Age=85,State="E",Country="Kenya"},
            new Employee{ID=20,FirstName="Rsish",LastName="Lehra",Age=15,State="F",Country="India"},
            new Employee{ID=21,FirstName="Isish",LastName="Eehra",Age=5,State="G",Country="Pakistan"},

        };
        return list;
    }
}

在我的Cshtml页面

<script type="text/javascript">
jQuery(document).ready(function () {

    jQuery("#list").jqGrid({
        url: '/Home/DynamicGridData/',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['ID', 'FirstName', 'LastName', 'Age', 'State', 'Country'],
        colModel: [
  { name: 'ID', index: 'ID', width: 40, align: 'left' },
  { name: 'FirstName', index: 'FirstName', width: 80, align: 'left' },
  { name: 'LastName', index: 'LastName', width: 80, align: 'left' },
  { name: 'Age', index: 'Age', width: 80, align: 'left' },
  { name: 'State', index: 'State', width: 80, align: 'left' },
  { name: 'Country', index: 'Country', width: 80, align: 'left' }],
        pager: jQuery('#pager'), 
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'ID, FirstName, LastName, Age, State, Country',
        sortorder: "Asc",
        viewrecords: true,
        imgpath: '/content/images',
        autowidth: true,
        width: '100%',
        height: '100%',
        multiselect: false,
        caption: "Grid example",
        loadComplete: function() {
        //jQuery("#myGridID").trigger("reloadGrid"); // Call to fix client-side sorting
    }
    });

    //jQuery("#list").jqGrid('navGrid', '#pager', { add: true, edit: true, del: true });
    jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true });


}); 
</script>

我如何对所有列进行排序..我只想通过排序对所有字段进行排序:对于所有字段都为true

编辑 <script>格式不正确

1 个答案:

答案 0 :(得分:1)

在您的控制器中,您需要使用OrderBy,然后使用网格传递给控制器​​的sidx, sord值。我还在下面的示例中包含分页,因此您的网格只能显示数据集中的一行行。

List pagedQuery =  _lstemp.AsQueryable().OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);

colModel(jqGrid设置)中,您可以设置每个要排序的列,其属性值为

sortable: false,sortable: true

如果您希望所有内容都可以排序,可以使用

$.extend($.jgrid.defaults, {sortable: true});

您将能够检查您的POST以查看jqGrid告诉控制器要排序的列以及方向。

注意:对于此特定OrderBy语法,您将需要System.Linq.Dynamic dll。这个dll可用: