JqGrid addJSONData + ASP.NET 2.0 WS

Я немного потерян. Я попытался реализовать решение на основе JqGrid и попытался использовать функцию как тип данных. Я установил все по книге, я думаю, я вызываю WS и возвращаю JSON, я добился успеха на стороне клиента в вызове ajax, и я «привязываю» jqGrid, используя addJSONData, но сетка остается пустой. Сейчас я понятия не имею... другие "локальные" образцы на тех же страницах работают без проблем (jsonstring...)

Мой метод WS выглядит так:

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string GetGridData()  
         {  
             // Load a list 
             InitSessionVariables();
             SA.DB.DenarnaEnota.DenarnaEnotaDB db = new SAOP.SA.DB.DenarnaEnota.DenarnaEnotaDB();
             DataSet ds = db.GetLookupForDenarnaEnota(SAOP.FW.DB.RecordStatus.All);

             // Turn into HTML friendly format  
             GetGridData summaryList = new GetGridData();

             summaryList.page = "1";
             summaryList.total = "10";
             summaryList.records = "160";
             int i = 0;
             foreach (DataRow dr in ds.Tables[0].Rows)  
             {
                 GridRows row = new GridRows();
                 row.id = dr["DenarnaEnotaID"].ToString();
                 row.cell = "[" + "\"" + dr["DenarnaEnotaID"].ToString() + "\""
                                       + "," + "\"" + dr["Kratica"].ToString() + "\""
                                       + "," + "\"" + dr["Naziv"].ToString() + "\""
                                       + "," + "\"" + dr["Sifra"].ToString() + "\""

                          + "]";
                 summaryList.rows.Add(row);
             }  
             return JsonConvert.SerializeObject(summaryList);

         }

Мой код ASCX таков:

jQuery(document).ready(function() {
  jQuery("#list").jqGrid({
    datatype: function(postdata) {
      jQuery.ajax({
        url: '../../AjaxWS/TemeljnicaEdit.asmx/GetGridData',
        data: '{}',
        dataType: 'json',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        complete: function(jsondata, stat) {
          if (stat == "success") {
            var clearJson = jsondata.responseText;

            var thegrid = jQuery("#list")[0];
            var myjsongrid = eval('(' + clearJson + ')');
            alfs
            thegrid.addJSONData(myjsongrid.replace(/\\/g, ''));
          }
        }
      });
    },
    colNames: ['DenarnaEnotaID', 'Kratica', 'Sifra', 'Naziv'],
    colModel: [{
        name: 'DenarnaEnotaID',
        index: 'DenarnaEnotaID',
        width: 100
      },
      {
        name: 'Kratica',
        index: 'Kratica',
        width: 100
      },
      {
        name: 'Sifra',
        index: 'Sifra',
        width: 100
      },
      {
        name: 'Naziv',
        index: 'Naziv',
        width: 100
      }
    ],

    rowNum: 15,
    rowList: [15, 30, 100],
    pager: jQuery('#pager'),
    sortname: 'id',
    //  loadtext:"Nalagam zapise...",
    // viewrecords: true, 
    sortorder: "desc",
    // caption:"Vrstice", 
    // width:"800",
    imgpath: "../Scripts/JGrid/themes/basic/images"
  });

});

из WS я получаю JSON следующим образом:

{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“},{”id”:”19″,”cell”:”["19","RSD","Srbski dinar","941"]“},{”id”:”20″,”cell”:”["20","AFN","Afgani","971"]“},{”id”:”21″,”cell”:”["21","ALL","Lek","008"]“},{”id”:”22″,”cell”:”["22","DZD","Alžirski dinar","012"]“},{”id”:”23″,”cell”:”["23","AOA","Kvanza","973"]“},{”id”:”24″,”cell”:”["24","XCD","Vzhodnokaribski dolar","951"]“},{”id”:”25″,”cell”:”

………………

["13","PLN","Poljski zlot","985"]“},{”id”:”14″,”cell”:”["14","SEK","Švedska krona","752"]“},{”id”:”15″,”cell”:”["15","SKK","Slovaška krona","703"]“},{”id”:”16″,”cell”:”["16","USD","Ameriški dolar","840"]“},{”id”:”17″,”cell”:”["17","XXX","Nobena valuta","000"]“},{”id”:”1″,”cell”:”["1","SIT","Slovenski tolar","705"]“}]}

Я зарегистрировал этот JavaScript:

clientSideScripts.RegisterClientScriptFile("prototype.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/prototype-1.6.0.2.js"));

clientSideScripts.RegisterClientScriptFile("jquery.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.js"));
clientSideScripts.RegisterClientScriptFile("jquery.jqGrid.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.jqGrid.js"));
clientSideScripts.RegisterClientScriptFile("jqModal.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqModal.js"));
clientSideScripts.RegisterClientScriptFile("jqDnR.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqDnR.js"));

В принципе, я думаю, что это должно быть что-то глупое... но я не могу понять это сейчас...


person MilosC    schedule 13.02.2009    source источник


Ответы (8)


Я пытался решить ту же проблему в течение последних нескольких часов. Теперь я отказался от работы с AddJSONData - мой метод веб-службы возвращает массив, поэтому похоже, что использование addRowData будет работать.

function ReceivedClientData(data) {
        var thegrid = $("#list4");
        for (var i = 0; i < data.length; i++) {
            thegrid.addRowData(i+1, data[i]);
        }
    }
person Community    schedule 14.02.2009
comment
спасибо, это решение :) пожалуйста, кто-нибудь поставьте ответ Тома как ответ :) ура - person Marko; 24.08.2009
comment
Если вы не выполняете пейджинг, вы можете встроить строки в тег объекта... { 'page':1, 'total':1, 'records':rows.length, 'records':rows } и использовать это с добавитьJSONДанные. - person Tracker1; 11.03.2010
comment
это решение с небольшими изменениями в зависимости от того, что вы получаете от веб-сервиса... для меня это: успех: функция (jsondata, stat) { var thegrid = $(#list); оцениваемая переменная = JSON.parse(jsondata.d); for (var i = 0; i ‹ оцененная.длина; i++) { thegrid.addRowData(i + 1, оценено[i]); } } - person Marko; 22.09.2010

Настройка jqGrid выглядит нормально.

Вы уверены, что то, что вы получите обратно в jsondata.responseText, соответствует описанию?

Веб-сервис, который я пишу на .NET, возвращает JSON в следующем формате:

{"d": "{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“}"

В моей функции я должен был сделать это:

complete: function(data) {
    var stuff = JSON.parse(data.responseText);
    jQuery("#grid")[0].addJSONData(JSON.parse(stuff.d));
}

Мне пришлось преобразовать строку в JSON два раза, прежде чем я действительно получил нужные мне данные.

Если у вас большие проблемы. Я предлагаю отладить это по частям. Выполните простую инструкцию, например:

jQuery("#list")[0].addJSONData(JSON.parse("{total: 1, page: 1, records: 1, rows : [ {id: '1', cell:['1', '2007-10-01', 'test', 'note', 'new', '200.00', '10.00', '210.00']} ] }"));

Это должно работать как минимум. После этого просто проанализируйте вывод, который вы получаете от веб-службы, и убедитесь, что вы можете просто выполнить этот оператор для «завершения».

person Robert Luong    schedule 15.02.2009
comment
Я получаю json, подобный опубликованному, потому что я использую сериализатор не .net JSON. - person MilosC; 16.02.2009
comment
Правильно, просто перепроверить. Вы пытались просто выполнить функцию самостоятельно, во время document.ready или во время функции onclick? Просто чтобы посмотреть, добавит ли он его сам по себе? - person Robert Luong; 16.02.2009

На самом деле ключом являются параметры addJSONData, которых нет в документах:

function ReceivedClientData(data) {
        var thegrid = $("#rowed2");
        thegrid[0].addJSONData(data,thegrid.bDiv,9)            
    }

Веб-метод, который идет с этим:

    [WebMethod(EnableSession = true)]
    public object GetTestClients(int pagenum, int rows)
    {
        var lst = Session["lst"] as List<Entities.Client>;
        if (lst == null)
        {
            lst = new List<Entities.Client>();
            for (int i = 1; i <= 5; i++)
            {
                lst.Add(new TF.WebApps.Entities.Client()
                {
                    ClientID = "Client" + i,
                    Firstname = "first" + i,
                    Lastname = "last" + i
                });
            }
            Session["lst"] = lst;
        }
        var v = from c in lst
                select new
                {
                    id = c.ClientID,
                    cell = new object[] 
                    {
                        c.ClientID,
                        c.Firstname,
                        c.Lastname
                    }
                };

        var result = new
        {
            total = v.Count() / rows,
            page = pagenum,
            records = rows,
            rows = v.Skip((pagenum-1)*rows).Take(rows).ToArray()
        };


        return result;
    }
person Community    schedule 14.02.2009

Я также использую веб-сервис для передачи данных в jqGrid. Я столкнулся с той же проблемой, и вот код полной части функции .ajax.

complete: function(jsondata, stat) {
             if (stat == "success") {
                var thegrid = jQuery("#list2")[0];
                var jsonObject = eval('(' + jsondata.responseText + ')');
                thegrid.addJSONData(jsonObject.d);
             }
           }

Ключом является .d после преобразования responseText в объект JSON.

person frenchmd    schedule 30.09.2009

Я знаю, что это старо, но это, вероятно, ваша проблема...

Сделайте row.cell списком, тогда вы можете сделать...

row.cell = new List {
    dr["DenarnaEnotaID"]
    ,dr["Kratica"]
    ,dr["Naziv"]
    ,dr["Sifra"]
};

На стороне сценария...

var myjsongrid = eval('('+clearJson+')');
...
thegrid.addJSONData(myjsongrid.replace(/\\/g,''));

На данный момент myjsongrid является объектом, обычно для объектов нет метода .replace. Кроме того, вам, вероятно, следует использовать парсер JSON вместо eval. Я сам использую модифицированную версию json2.js Crockford, но YMMV.

Это должно сделать каждую строку такой, какой вы хотите, позволяя сериализатору обрабатывать преобразование... Я фактически сериализую свои таблицы данных в { columns:['colname',...], rows:[['row1val',...] ,['row2val',...],...] } и на стороне клиента, поскольку я использую одни и те же вызовы для заполнения различных сеток... У меня есть selectForJqGrid(table, keycol, [ col list]), который настроит его для использования непосредственно в jqGrid.

person Tracker1    schedule 10.03.2010

Это работает для меня:

mygrid[0].addJSONData(result, mygrid.bDiv, 0);

Или попробуйте это:

mygrid[0].addJSONData($.toJSON(result), mygrid.bDiv, 0);

Мой тип данных сетки — jsonstring.

person Community    schedule 21.04.2009

Я очень удивлен тем, насколько вводящими в заблуждение были некоторые предложения jqGrid.

Есть два способа передать jqGrid данные JSON из вашего сервиса.

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

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

Ключом к этому является параметр loadonce jqGrid:

loadonce: true,

Например, у меня есть веб-сервис 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"
});

Обратите внимание на эти три строки выше:

    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },

Это предотвращает возникновение неприятных исключений «addJSONdata» и сообщает jqGrid, что на самом деле наш массив данных JSON хранится в части GetOrdersForCustomerResult моих результатов JSON.

{
  GetOrdersForCustomerResult: [
  {
    OrderDate: "8/12/1996",
    OrderID: 10278,
    ShipAddress: "Berguvsvägen 8",
    ShipCity: "Luleå",
    ShipName: "Berglunds snabbköp",
    ShipPostcode: "S-958 22",
    ShippedDate: "8/16/1996"
  },
  {
    OrderDate: "8/14/1996",
    OrderID: 10280,
    ...etc...

И это все. Нет необходимости вызывать AddJSONdata вообще.

Полное пошаговое руководство по этому примеру можно найти в моем блоге:

http://mikesknowledgebase.com/pages/Services/WebServices-Page10.htm

(Жаль, что я не прочитал эту статью три часа назад, когда я начал изучать эти проблемы!!)

person Mike Gledhill    schedule 02.04.2014

Ваша проблема в том, что вы должны использовать addJSONData с responseText. eval, а затем разобрать строку JSON в JSON в JavaScript. Это должно работать нормально.

К ответу Френчи я бы еще добавил несколько советов:

complete: function(jsondata, stat) {
         if (stat == "success") {              
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
             $('#list2')[0].addJSONData(JSON.parse(jsonObject.d));
         }
       }

Итак, это ваш JSON. И JqGrid должен быть правильно настроен с помощью JsonReader, чтобы он не выдавал ошибку при загрузке данных, например: предоставьте любой индекс, который у вас есть. Это должно решить вашу проблему.

jsonReader: {
            root: "rows", //arry containing actual data
            page: "page", //current page
            total: "total", //total pages for the query
            records: "records", //total number of records
            repeatitems: false,
            id: "DenarnaEnotaID" //index of the column with the PK in it
        },
person Joy    schedule 24.02.2011