JSON 到剑道网格答案

【问题标题】：JSON to Kendo GridJSON 到剑道网格
【发布时间】：2014-06-19 22:44:47
【问题描述】：

我想向我的 Kendo Grid 提供一些 json 数据。我正在采取html路线。这是我所拥有的：

鉴于以下情况：

<div id="#grid"></div>

JSON：

"{\"Columns\":{\"Column\":[{\"@Name\":\"key1\",\"@DataType\":\"Boolean\",\"#text \":\"True\"},{\"@Name\":\"key2\",\"@DataType\":\"String\",\"#text\":\"你好 World\"},{\"@Name\":\"key3\",\"@DataType\":\"Integer\",\"#text\":\"999\"}]}}"

xml 版本的 JSON：

<Columns>
          <Column Name=""key1"" DataType=""Boolean"">True</Column>
          <Column Name=""key2"" DataType=""String"">Hello World</Column>
          <Column Name=""key3"" DataType=""Integer"">999</Column>
    </Columns>

我的 JavaScript 尝试失败：

$("#grid").kendoGrid({
    sortable: true,
    groupable: true,
    scrollable: true,
    height: "300px",
    pageable: {
        pageSizes: 9
    },
    columns:
    [
        { field: "Name" },
    ],
    dataSource:
    {
        transport:
        {
            read:
            {
                url: "/controller/action?param=" + myParam,
                dataType: "jsonp"
            }
        }
    },
    schema:
    {
        data: "Column"
    }

});

【问题讨论】：

它是怎么失败的？你有什么例外？您将 jsonp 指定为数据类型，请改用 json。

标签： kendo-ui kendo-grid

【解决方案1】：

正如您所期望的 json 数据，所以您必须使用 dataType:"json" 而不是 dataType:"jsonp"

现在要以适当的格式读取数据，您可以使用如下读取函数

transport: {
      read: function(options) {
        $.ajax( {
          url: "/controller/action?param=" + myParam,
          dataType: "json",
          success: function(result) {
            options.success(result.Columns.Column);
          }
        });

      },

希望对你有帮助

【讨论】：

哦，我明白了.... 这很有帮助！唯一缺少的部分是将“结果”解析为 json。所以首先我需要将结果转换为 json 参数，其余的都很完美： var jResult = $.parseJSON(result);谢谢一百万:)

【解决方案2】：

阿巴斯的回答是完美的；除了，“结果”应该被解析为 json： var jResult = $.parseJSON(result);

这是我的测试数据：

public string ValidationResult()
{
    var doc = new XmlDocument();
    var xml = @"
    <dataset>
        <table>
            <fname>a1</fname>        
            <age>aa1</age>
        </table>
        <table>
            <fname>a2</fname>        
            <age>aa2</age>
        </table>
        <table>
            <fname>a3</fname>        
            <age>aa3</age>
        </table>
    </dataset>";
    ;
    doc.LoadXml(xml);
    return JsonConvert.SerializeXmlNode(doc);
}

根据阿巴斯的回答，这里是将网格绑定到上述 xml->json 结果集的完整版本：

$("#grid").kendoGrid({
    sortable: true,
    groupable: true,
    scrollable: true,
    height: "600px",
    pageable: {
        pageSizes: 9
    },
    columns:
    [
        { field: 'fname' },
        { field: 'age' }
    ],
    dataSource:
    {
        transport:
        {
            read: function (options)
            {
                $.ajax(
                {
                    url: "/Controller/Action?param=" + paramVal,
                    dataType: "json",
                    success: function (result)
                    {
                        var jResult = $.parseJSON(result);
                        options.success(jResult.dataset.table);
                    }
                });
            }
        }
    },
});

【讨论】：