Невозможно заполнить данные в элемент управления jqGrid, но нет ошибок - PullRequest
Новая
       38

Невозможно заполнить данные в элемент управления jqGrid, но нет ошибок

0 голосов
/ 04 октября 2018

Я не уверен, что я делаю неправильно, я не могу заполнить данные в элемент управления jqGrid.

Пробовал разные статьи и проверял некоторые видеоуроки, но не повезло.

Может кто-нибудь, пожалуйста, помогите мне решить проблему!

Ниже приведен код в HomeController. 

        [HttpGet]
        public ActionResult JQGridOrders()
        {
            return View();
        }

        [HttpGet]
        public ActionResult GetOrders()
        {
            using (NorthwindEntities db = new NorthwindEntities())
            {
                var ordersList = db.Orders.Select(x => new OrderInfo {
                    OderID = x.OrderID,
                    CustomerID = x.CustomerID,
                    OrderDate = x.OrderDate,
                    Freight = x.Freight,
                    ShipName = x.ShipName,
                    ShipAddress = x.ShipAddress
                }).ToList();
                return Json(new { rows = ordersList }, JsonRequestBehavior.AllowGet);
            }
        }

Мой OrderInfo класс ниже 

public class OrderInfo
{
    public int OderID { get; set; }
    public string CustomerID { get; set; }
    public DateTime? OrderDate { get; set; }
    public decimal? Freight { get; set; }
    public string ShipName { get; set; }
    public string ShipAddress { get; set; }
}

Ниже приведен вид 

@{ ViewBag.Title = "Showing Orders in JQGrid Control"; }
<h2>@ViewBag.Title</h2>

<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.3.1.min.js"></script>
<script>
 jQuery.browser = {};
   (function () {
       jQuery.browser.msie = false;
       jQuery.browser.version = 0;
       if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
           jQuery.browser.msie = true;
           jQuery.browser.version = RegExp.$1;
       }
   })();
</script>
<script src="~/scripts/jqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/scripts/jqGrid/grid.locale-en.js"></script>
<script>
    $(function () {
        $grid = $("#jqGrid").jqGrid({
            url: '@Url.Action("GetOrders", "Home")',
            mtype: 'GET',
            dataType: 'json',
            colModel: [
                { label: 'Order ID', name: 'OrderID' },
                { label: 'Customer ID', name: 'CustomerID' },
                { label: 'Order Date', name: 'OrderDate' },
                { label: 'Freight', name: 'Freight' },
                { label: 'Ship Name', name: 'ShipName' },
                { label: 'Ship Address', name: 'ShipAddress' }
            ],
            loadonce: true
        });
    })
</script>

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Вы должны отобразить элементы между json response и colModel с jsonmap и jsonReader

  • jsonReader , чтобы определить элементы
  • jsonmap Определяет отображение json для столбца во входящей строке json.

Здесь приведена демонстрация, в которой использовались некоторые поддельные данные для отображения сопоставлений. 

$(function () {

 $("#jqGrid").jqGrid({
                loadError: function (xhr, status, error) {
                    alert('load error: ' + error);
                },
                mtype: 'GET',
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                url: 'https://reqres.in/api/users?page=2',
                datatype: "json",
                colNames: ["Id", "First Name"],
                colModel: [
                         { name: "Id", index: "id",key:true, width: 50, jsonmap: "id" },
                         { name: "First Name", index: "first_name", width: 200, jsonmap: "first_name"}
                ],

                gridview: true,
                jsonReader: { repeatitems:true, root:"data" },
                rowNum: 10,
                rowList: [10, 20, 30],
                viewrecords: true,
                width:500,
                height: 200,
                caption: "JSON Example",
            });
            
            
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>

<table id="jqGrid"></table>
0 голосов
/ 04 октября 2018

Попробуйте изменить тип возвращаемого действия с ActionResult на JsonResult 

       [HttpGet]
        public JsonResult GetOrders()
        {
            using (NorthwindEntities db = new NorthwindEntities())
            {
                var ordersList = db.Orders.Select(x => new OrderInfo {
                    OderID = x.OrderID,
                    CustomerID = x.CustomerID,
                    OrderDate = x.OrderDate,
                    Freight = x.Freight,
                    ShipName = x.ShipName,
                    ShipAddress = x.ShipAddress
                }).ToList();
                return Json(new { rows = ordersList }, JsonRequestBehavior.AllowGet);
            }
        }
...