All geek questions in one place

JqGrid does not display JSON data

I hope to use jqGrid for the current web project I'm working on. The problem is that I cannot get the JSON data to be displayed by the grid. Here is the grid initialization code:

$.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 returned by the Java servlet:

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

Is there something wrong with how JSON is formatted or how the grid is initialized? Thanks for the help!

+3
source share
6 answers

, 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 id. <tr>. "1", "2",... , JSON . , jsonReader , id:"videoTitle". , , id. id .

+8

, JSON, , .

jqGrid , jqGrid . - , , JSON , jqGrid.

JSGrid JSON Data (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",""]}]}
+3

, json: jsonlint

+3

, JSON- jqGrid jqGrid JSON.

:

loadonce: true,

, JSON , , . JSON jqGrid .

, , - JSON:

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

jqGrid, :

enter image description here

jqGrid script:

$("#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

+2

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;

    }

  }
 }

Finally, the script file

---------------- 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>
+2
source

Perhaps this is just a matter of quotation or double quotation marks. This is pretty sensitive. In the example:

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, ......
+1
source

Source: https://habr.com/ru/post/1792556/

More articles:


All Articles