Javascript 使用JSON字符串为jQuery加载FlexGrid

我试图使用WCF服务返回的JSON字符串加载Flexigrid

我的服务有一个

公共字符串GetContacts（stringcustomerid）

方法，它返回一个Json字符串

该JSON字符串是通过使用从列表对象创建的

System.Web.Script.Serialization.JavaScriptSerializer

类。因此，我的目标是将JSON字符串作为对象绑定到my Flexigrid。我使用

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

---

结果是服务返回的JSON字符串。有没有办法将客户对象绑定到Flexigrid？

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
  };
}

---

ps最后一位是jquery语法

请确保将数据类型选项设置为json

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

---

奥里的答案几乎是完美的。事实上，这正是我在尝试谷歌解决方案之前构建东西的方式。但有一个例外

JSON对象应该是：

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

---

如果忽略

行

元素的数组格式，最终将阻塞FlexGrid并抛出各种错误。但我已经验证了，只要您记住脚本的哪些部分使用JSON对象，哪些部分使用JSON对象数组，这种方法就可以完美地工作。

还要确保您使用的是正确的HTTP方法，默认值是POST

要使用GET，请执行以下操作：

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

---

这是一篇较老的文章，但我想我会添加另一种方法来使用almog.ori提供的优秀脚本

OP说他的数据是从WCF服务返回的。如果将operation contract正文样式标记为bare，则可以使用preProcess属性添加formatCustomerResults（或其他函数）函数以初始加载网格

像这样：

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

---

希望这对某人有所帮助。

nameEqualsPNamePrubeGoldberg的预处理解决方案非常完美

这就是我的预处理自定义函数的样子

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
};

---

尝试将total设置为JSON字符串中的第一个元素，如下所示

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

---

我相信最新的flex代码打破了使用预处理的解决方案

       addData: function (data) { //parse data

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

---

您需要翻转它，以便预处理if位于类型JSON if之前。否则，作为答案列出的函数将无法正常工作。

我建议您按照此示例解析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;
}

第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;
});

---

我希望这会有帮助

我知道它很老了。。。但下面是一个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”，“a date”}）

请帮助我更改url。

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;
});

{
    "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"]}
    ]
}