1

这是我的控制器方法

    public ActionResult GridData(string sidx, string sord, int page, int rows)
    {
                var jsonData = new
                {
                    total = 1, //todo: calculate
                    page = page,
                    records = db.Employees.Count(),
                    rows = (
                      from E in db.Employees
                      select new
                      {
                          id = E.EmployeeID,
                          cell = new string[] { 
              E.EmployeeID.ToString(), E.LastName,E.FirstName,E.Title,E.TitleOfCourtesy,E.BirthDate.ToString(),E.HireDate.ToString(),E.Address,E.City,E.Region,E.PostalCode,E.Country, E.Extension,E.Notes,E.ReportsTo.ToString()

                      }
                  }).ToArray()
              };
              return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

这是我的视图代码。

@model IEnumerable<JQGrid1.Models.Employee>
@{
    ViewBag.Title = "Index";
}
<h2>
    Index
</h2>
<script type="text/javascript">
        // the url to 
        var jqDataUrl = "/Home/GridData";
        $(document).ready(function () {

            // Set up the jquery grid
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url: jqDataUrl,
                datatype: "json",
                mtype: "GET",

                // Specify the column names
                colNames: ["EmployeeID","LastName", "FirstName", "Title", "TitleOfCourtesy", "BirthDate", "HireDate", "Address", "City", "Region", "PostalCode", "Country", "HomePhone", "Extension", "Notes", "ReportsTo"],



                // Configure the columns
                colModel: [
            { name: "EmployeeID", index: "EmployeeID", width: 40, align: "left" },
            { name: "LastName", index: "LastName", width: 100, align: "left" },
            { name: "FirstName", index: "FirstName", width: 200, align: "left" },
            { name: "Title", index: "Title", width: 200, align: "left" },
            { name: "TitleOfCourtesy", index: "TitleOfCourtesy", width: 200, align: "left" },
            { name: "BirthDate", index: "BirthDate", width: 200, align: "left" },
            { name: "HireDate", index: "HireDate", width: 200, align: "left" },
            { name: "Address", index: "Title", width: 200, align: "left" },
            { name: "City", index: "City", width: 200, align: "left" },
            { name: "Region", index: "Region", width: 200, align: "left" },
            { name: "PostalCode", index: "PostalCode", width: 200, align: "left" },
            { name: "Country", index: "Country", width: 200, align: "left" },
            { name: "HomePhone", index: "HomePhone", width: 200, align: "left" },
            { name: "Extension", index: "Extension", width: 200, align: "left" },
            { name: "Notes", index: "Notes", width: 200, align: "left" },
            { name: "ReportsTo", index: "ReportsTo", width: 200, align: "left" }];

                // Grid total width and height
                width: 550,
                height: 200,

                // Paging
                toppager: true,
                pager: $("#jqTablePager"),
                rowNum: 5,
                rowList: [5, 10, 20],
                viewrecords: true, // Specify if "total number of records" is displayed

                // Default sorting
                sortname: "Id",
                sortorder: "asc",

                // Grid caption
                caption: "A Basic jqGrid - Read Only"
            }).navGrid("#jqTablePager",
            { refresh: true, add: false, edit: false, del: false },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                {sopt: ["cn"]} // Search options. Some options can be set on column level
         );
        });
</script>
<div>
    <table id="jqTable" class="scroll">
    </table>
    <div id="jqTablePager" />
</div>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
4

0 回答 0