jqGrid не отображает данные JSON

Question

Я надеюсь использовать jqGrid для текущего веб-проекта, над которым я работаю.Проблема в том, что я не могу получить данные JSON для отображения в сетке.Вот код инициализации сетки:

$.fn.loadjqgrid = function(httpposturl){
        $(this).jqGrid({
            url: httpposturl,
            datatype: "json",
            mtype: "GET",
            colNames: ["Video Title", "Description", "Date Taken", "Date Uploaded"],
            colModel: [
               {name:"videoTitle", index:"videoTitle", width:150},
               {name:"videoDescription", index:"videoDescription", width:200},
               {name:"dateTaken", index:"dateTaken", width:150, sortable:true},
               {name:"dateUploaded", index:"dateUploaded", width:150, sortable:true}
            ],
            pager: "#gridpager",
            rowNum: 10,
            viewrecords: true,
            caption: "Video Grid"
        });
    };

JSON, который возвращается сервлетом Java:

[{"dateTaken":"Wed Feb 16 00:00:00 UTC 2011","videoDescription":"This is a test","videoTitle":"Test Video","dateUploaded":""}]

Что-то не так с форматированием JSON или с сеткойбыл инициализирован?Спасибо за помощь!

Answer 1

Чтобы иметь преимущества фильтрации данных на стороне сервера, разбиения по страницам и сортировки, jqGrid лучше работает с данными, которые содержат дополнительную информацию о текущей странице (см. здесь ).Если вы не можете изменить сторону сервера, которая выдает данные JSON, вы можете добавить параметр loadonce:true, и тогда фильтрация, разбиение на страницы и сортировка данных будут выполняться локально.Но прежде всего jqGrid должен уметь читать ваши данные.

Вы можете использовать jsonReader, который я предложил здесь (способ также задокументирован здесь ):

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

Способ использования функций внутри jsonReader очень гибок, и вы можете читать практически любые данные JSON с помощью jqGrid.

После модификации ваша сетка будет отображать данные: см. здесь .

Одна небольшая проблема - остаться.jqGrid должен иметь уникальный идентификатор для каждой строки сетки.Идентификатор будет назначен каждому элементу <tr>.В настоящее время целочисленные идентификаторы "1", "2", ... будут использоваться в качестве идентификаторов, поскольку идентификаторы не найдены в ваших данных JSON.Если один столбец сетки можно интерпретировать как идентификатор, вы можете включить в jsonReader соответствующее свойство, например id:"videoTitle".Если ваши данные действительно не имеют идентификатора, и вы планируете использовать более одной сетки страницы, вы можете получить конфликты идентификаторов.В случае использования id в качестве функции с различной реализацией для обеих сеток может решить проблему.

Answer 2

Вы можете проверить, верен ли возвращаемый json: jsonlint

Answer 3

Суть в том, что возвращаемая вами структура данных JSON неверна.

Одним из преимуществ jqGrid является использование серверной библиотеки, которая автоматически взаимодействует с клиентской jqGrid.Если по какой-то причине вы обнаружите, что использование этих предварительно собранных серверных библиотек невозможно, то вам нужно сгенерировать JSON в структуре, которую ожидает jqGrid.

Из примера данных JSON jqGrid (http://www.trirand.com/blog/jqgrid/jqgrid.html) ваш JSON должен выглядетькак это:

{"page":"1",
 "total":2,
 "records":"13",
 "rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]},
         {"id":"12","cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]},
         {"id":"11","cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]},
         {"id":"10","cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]},
         {"id":"9","cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]},
         {"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},
         {"id":"7","cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]},
         {"id":"6","cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]},
         {"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]},
         {"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]}],
 "userdata":{"amount":3220,"tax":342,"total":3564,"name":"Totals:"}}

Так для вашего набора данных:

{"page":"1",
 "total:2,
 "records":"1",
 "rows":[{"id":"43", "cell":["Test Video","This is a test","Wed Feb 16 00:00:00 UTC 2011",""]}]}

Answer 4

Если вы отправляете данные в формате JSON, тогда нет необходимости использовать jsonReader

Например: Моя модель (jqGridModel.cs) выглядит примерно так -

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace jqGrid.Models
{

public class jqGridModel

{

    public string CompanyName { get; set; }
    public string RooftopName { get; set; }
    public string UpdatedBy { get; set; }
    public string UpdatedDate { get; set; }
}

}

Теперь все, что вам нужно сделать, это отправить данные в формате Json через контроллер

----------- jqGridController.cs ----------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using jqGrid.Models;

namespace jqGrid.Controllers
{
public class jqGridController : Controller
{
    //
    // GET: /jqGrid/

    public ActionResult jqGridView ()
    {
        return View();
    }

    public JsonResult jqGridViewjson()
    {

        List<jqGridModel> company = new List<jqGridModel>();
        company.Add(new jqGridModel(){
             CompanyName="Ms", 
             RooftopName ="MS",
             UpdatedBy ="Vivek",
             UpdatedDate=DateTime.Today.ToString("dd/MM/yyyy")
        });
        Console.Write(company);
       company.Add(new jqGridModel()
        {
            CompanyName = "Ms1",
            RooftopName = "Ms1",
            UpdatedBy = "Pankaj",
            UpdatedDate = DateTime.Today.ToString("dd/MM/yyyy")
        });

        var result = Json(company, JsonRequestBehavior.AllowGet);
        return result;

    }

  }
 }

Наконец файл скрипта

---------------- jqGridScript.js ---------------

 $(document).ready(function () {

 jQuery("#grid").jqGrid({

    url: '/jqGrid/jqGridViewjson',
    contentType: "application/json",
    datatype: "json",   
    colNames: ['Company Name', 'Rooftop Name', 'Updated By', 'UpdatedDate'],
    colModel: [
        { name: 'CompanyName', index: 'CompanyName', width: 150 },
        { name: 'RooftopName', index: 'RooftopName', width: 150 },
        { name: 'UpdatedBy', index: 'UpdatedBy', width: 150 },
        { name: 'UpdatedDate', index: 'UpdatedDate', width: 150}            
    ],
    rowNum: 10,
    mtype: "GET",        
    rowList: [10, 20, 30],
    pager: '#pager',
    loadonce: true,
    viewrecords: true,
    sortorder: "desc",
    autoencode: true,
    caption: "Company approval"       
});
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});

--------------- jqGridView.cshtml ----------------

<!DOCTYPE html>
<html>
<head>
<title>jqGrid</title>
<link href="~/StyleSheet/bootstrap.css" rel="stylesheet" />
<link href="~/StyleSheet/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/StyleSheet/jquery-ui.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid-bootstarp.css" rel="stylesheet" />
<link href="~/StyleSheet/ui.jqgrid.css" rel="stylesheet" />

</head>
<body>

 <div>
   <table id="grid"></table>
   <div id="pager"></div>
</div>

 <script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.src.js"></script>
<script src="~/Scripts/jqGridScript.js"></script>  

</body>
</html>

Answer 5

На самом деле, довольно просто получить данные JSON в jqGrid и оставить jqGrid для обработки разбивки на страницы и сортировки без необходимости повторного вызова службы JSON.

Ключ к этому - эта строка:

loadonce: true,

Теперь нет необходимости, чтобы ваша служба JSON беспокоилась о строках , странице , всего или записи значений, передаваемых по всему , Вы просто загружаете данные JSON один раз и оставляете jqGrid для остального.

Так, например, вот один из моих веб-сервисов JSON:

http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS

И вот jqGrid, который я хочу создать из него:

Вот весь мой скрипт jqGrid:

$("#tblOrders").jqGrid({
    url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
    contentType: "application/json",
    datatype: "json",
    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },
    mtype: "GET",
    colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
    colModel: [
        { name: "OrderID", width: 80, align: "center" },
        { name: "OrderDate", width: 90, align: "center" },
        { name: "ShipName", width: 250 },
        { name: "ShipAddress", width: 250 },
        { name: "ShipCity", width: 95 },
        { name: "ShippedDate", width: 95 },
    ],
    pager: "#pager",
    height: 'auto',
    rowNum: 8,
    rowList: [8, 16, 24],
    loadonce: true,
    sortname: "OrderID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    autoencode: true,
    caption: "Northwind orders"
});

И это все.

Более подробная информация в моем блоге:

www.MikesKnowledgeBase.com

Answer 6

Может быть, это просто цитата или двойная кавычка. Это довольно чувствительно. В этом примере:

jQuery("#list5").jqGrid({ url:'server.php?q=2', 
datatype: "json", 
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, ......