我正在尝试使用 WCF 服务返回的 JSON 字符串加载 Flexigrid。
我的服务有一个public string GetContacts(string CustomerID) 方法，它返回一个 Json 字符串。
该 JSON 字符串是通过使用 List 对象创建的
System.Web.Script.Serialization.JavaScriptSerializer 班级。所以，我的目标是将 JSON 字符串作为对象绑定到我的 Flexigrid。我使用
var customer = eval("("+result+")");
结果是从服务返回的 JSON 字符串。有什么方法可以将客户对象绑定到 Flexigrid？
【问题讨论】：
标签： javascript json
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语法
【讨论】：
almog.ori 的回答几乎是完美的。事实上，这就是我在尝试谷歌解决方案之前构建东西的方式。不过有一个例外。
JSON 对象应该是：
total: (no of rec),
page : (page no),
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] },
{cell: [ (col1 value) , (col2 value) ,.. ] }]
如果你忽略了 rows 元素的数组格式，你最终会阻塞 Flexigrid 并抛出各种错误。但我已经验证，只要您记住脚本的哪些部分采用 JSON 对象以及哪些部分采用 JSON 对象数组，这完美无缺。
【讨论】：
这是一篇较旧的帖子，但我想我会添加另一种方法来使用 almog.ori 提供的出色脚本。
OP 说他的数据是从 WCF 服务返回的。如果您将操作合同主体样式标记为裸露，您可以使用 preProcess 属性添加您的 formatCustomerResults（或其他函数）函数来初始加载网格。
像这样：
$("#gridContainer").flexigrid({
url: '/YourService.svc/..',
method: 'GET',
dataType: 'json',
preProcess: formatCustomerResults,
...
});
function formatCustomerResults(data){
...
希望这对某人有所帮助。
【讨论】：
还要确保您使用的是正确的 HTTP 方法，默认为 POST
使用 GET：
$("#gridContainer").flexigrid({
url: '/json/files.json',
method: 'GET',
dataType: 'json',
...
【讨论】：
nameEqualsPNamePrubeGoldberg 的 preProcess 解决方案非常完美。
这就是我的 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
};
【讨论】：
我建议您按照此示例解析您的 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;
});
希望对你有帮助！
【讨论】：
确保将 dataType 选项设置为 json。
$('#gridContainer').flexigrid({
singleSelect: true,
showToggleBtn: false,
dataType: 'json'
});
【讨论】：
我相信最新的弹性代码破坏了使用 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 类型之前。否则作为答案列出的功能将无法正常工作。
【讨论】：
它很旧，我知道...但这里有一个有效的 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" }）
【讨论】：
尝试将你的第一个元素放在你的 JSON 字符串中，像这样。
`{"total" : 2,"page":1,"rows":[ {"cell" : ["226 CLAVEN LN", "312"]},{"cell" : ["1377 FAIRFAX PIKE","280"]}]}`
【讨论】：