Загрузка Flexigrid для jQuery с помощью строки JSON

Question

Я пытаюсь загрузить Flexigrid с помощью строки JSON, возвращаемой службой WCF.

Мой сервис имеет метод public string GetContacts(string CustomerID) и возвращает строку Json.

Эта строка JSON создается из объекта List с помощью System.Web.Script.Serialization.JavaScriptSerializer класс. Итак, моя цель - привязать строку JSON к моей Flexigrid в качестве объектов. Я конвертирую результат веб-сервиса в объекты, используя

var customer = eval("("+result+")"); 

Результатом является строка JSON, возвращаемая из службы. Есть ли способ привязать объекты клиента к Flexigrid?

Answer 1

Flexigrid требует следующий формат в json

РЕДАКТИРОВАТЬ Спасибо EAMann за обновление формата.

 total: (no of rec)
 page : (page no)
 rows : [{cell: [ (col1 value) , (col2 value) ,.. ] },
        {cell: [ (col1 value) , (col2 value) ,.. ] }]

для привязки данных к сетке я предпочитаю отправлять данные по проводам, а затем форматировать их на клиенте, но это только я, вот пример

 function formatCustomerResults(Customers){

     var rows = Array();

     for (i = 0; i < Customers.length; i++) {
         var item = Customers[i];

            //Do something here with the link
         var link = "alert('opening item " + item.DealGuid + "');"

         rows.push({ cell: [item.DealId,
                            item.Created,
                            item.CurrentStatus,
                            item.LastNote,
                            '<a href="javascript:void(0);" onclick="' + link + '" >view</a>']
     });
     }

     return {
         total: Customers.length,
         page: 1,
         rows: rows
     };


 }`

и тогда все, что вам нужно, это

$("#FlexTable").flexAddData(formatCustomerResults(eval(data)));

ps этот последний бит - синтаксис jquery

Answer 2

almog.ori ответ почти идеален. Фактически, это как раз то, как я строил вещи, прежде чем пытаться найти решение Google. Одно исключение.

Объект JSON должен быть:

total: (no of rec),
page : (page no),
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] },
        {cell: [ (col1 value) , (col2 value) ,.. ] }]

Если вы пренебрегаете форматом массива элемента rows, вы в конечном итоге закроете Flexigrid и выбросите всевозможные ошибки. Но я убедился, что это работает безупречно , если вы помните, какие части скрипта принимают объекты JSON, а какие - массивы объектов JSON.

Answer 3

Это старый пост, но я подумал, что добавлю еще один способ использовать отличный скрипт, предоставленный almog.ori.

ОП сказал, что его данные возвращаются из службы WCF. Если вы пометите стиль тела контракта операции как пустой, вы можете использовать свойство preProcess, чтобы добавить функцию formatCustomerResults (или другую функцию) для начальной загрузки сетки.

Как это:

$("#gridContainer").flexigrid({
url: '/YourService.svc/..',
method: 'GET',
dataType: 'json',
preProcess: formatCustomerResults,
...
});
function formatCustomerResults(data){
...

Надеюсь, это кому-нибудь поможет.

Answer 4

Я рекомендую вам следовать этому примеру, чтобы проанализировать ваш код JSON и отправить запросы на сервер:

Шаг 1. Разбор с использованием функции

function parsedForm(json)
{
var h = "";

if (json.post.val1)
    h += "<b>Value 1</b>: " + json.post.val1 + "<br />";

h += "<b>Value 2</b>: " + json.post.val2 + "<br />";
h += "<b>Value 3</b>: " + json.post.val3 + "<br />";

if (json.post.val4)
    h += "<b>Value 4</b>: " + json.post.val4 + "<br />";

$('#fdata').empty().html(h);
$('.formdata').slideDown();

return json;
}

Шаг 2: код представления flexigrid

$("#flex1").flexigrid({
    url: 'post2.php',
    dataType: 'json',
    colModel : [
        {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
        {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
        {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
        {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
        {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
        ],
    searchitems : [
        {display: 'ISO', name : 'iso'},
        {display: 'Name', name : 'name', isdefault: true}
        ],
    sortname: "iso",
    sortorder: "asc",
    usepager: true,
    title: 'Countries',
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    width: 700,
    onSubmit: addFormData,
    preProcess: parsedForm,
    height: 200
});

Шаг 3. Дополнительно вы можете проверить или сериализовать данные для запроса к серверу

function addFormData(){
    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
    var dt = $('#sform').serializeArray();
    $("#flex1").flexOptions({params: dt});
    return true;
}


$('#sform').submit(function (){
    $('#flex1').flexOptions({newp: 1}).flexReload();
    return false;
});

Надеюсь, это поможет!

Answer 5

решение preProcess от nameEqualsPNamePrubeGoldberg отлично работает.

Так выглядит моя пользовательская функция для preProcess.

var rows = Array();
$.each(data.rows,function(i,row){
    rows.push({id:row.val1, cell:[row.val2,row.val3]});
});

return {
      total:data.total,
      page:data.page,
      rows:rows
};

Answer 6

Убедитесь также, что вы используете правильный метод HTTP, по умолчанию POST

Для использования GET:

 $("#gridContainer").flexigrid({
    url: '/json/files.json',
    method: 'GET',
    dataType: 'json',

...

Answer 7

Убедитесь, что для параметра dataType установлено значение json.

$('#gridContainer').flexigrid({ singleSelect: true, showToggleBtn: false, dataType: 'json' });

Answer 8

Он старый, я знаю ... Но вот пример json, который работает:

{
    "total": 5,
    "page": "1",
    "rows": [
        {"cell": [1, "asd", "dsa", "2013-07-30"]},
        {"cell": [2, "asd", "dsa", "2013-07-30"]},
        {"cell": [3, "asd", "dsa", "2013-07-30"]},
        {"cell": [4, "asd", "dsa", "2013-07-30"]},
        {"cell": [5, "asd", "dsa", "2013-07-30"]}
    ]
}

(всего 5 результатов; первая страница (они НЕ начинаются с нуля); 5 строк данных, каждая из которых содержит {ID, "asd", "dsa", "дата"})

Answer 9

Я полагаю, что последний гибкий код сломал решение, используя preProcess.

       addData: function (data) { //parse data

            if (p.dataType == 'json') {
                data = $.extend({rows: [], page: 0, total: 0}, data);
            }
            if (p.preProcess) {
                data = p.preProcess(data);
            }

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

Answer 10

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

`{"total" : 2,"page":1,"rows":[ {"cell" : ["226 CLAVEN LN", "312"]},{"cell" : ["1377 FAIRFAX PIKE","280"]}]}`