将 json 文件加载到 ListView 的数据源中答案

【问题标题】：Load json file into dataSource for ListView将 json 文件加载到 ListView 的数据源中
【发布时间】：2015-03-05 06:33:27
【问题描述】：

我想从 json 文件加载数据以在视图列表中使用它。

在我的 index.html 中只有一个 div 容器

<div id="listA"></div>

在索引中，我使用以下代码加载了一个 javascript（“Scripts/typescript/dragndropList.js”）：

dataSourceListA = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "../../dataSource/person.json",
                        dataType: "json"
                    },
                    schema: {
                        data: "person",
                        model: {
                            id: "ID",
                            fields: {
                                name: { type: "string" }
                            }
                        }
                    }
                }
            });

            listA = $("#listA").kendoListView({

                dataSource: dataSourceListA,
                template: kendo.template("<div class='item'>#: name#</div>")
            }).data("kendoListView");

json 文件如下所示：

{
"person": [
    {
        "name": "spade",
        "ID": 1
    },
    ...
]

}

我真的很挣扎，我尝试使用网格和其他小部件，但我#M 无法将 jason 文件的内容加载到小部件中，我不知道错误在哪里。是数据源吗？模板？

感谢您的帮助！

【问题讨论】：

标签： listview kendo-ui datasource

【解决方案1】：

哎呀，我明白了...这是 IIS 的问题-扩展 json 未知...更改 webconfig 修复了它。

【讨论】：

【解决方案2】：

我认为您可以尝试使用此示例。

<script type="text/x-kendo-tmpl" id="mobile-listview-filtering-template">
    <h3>#:ProductName#</h3>
</script>

<script>
  function mobileListViewLocalFiltering() {
    var dataSource = new kendo.data.DataSource({
      data: products,
      schema: {
        model: {
          fields: {
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "boolean" }
          }
        }
      }
    });

    $("#local-filterable-listview").kendoMobileListView({
      dataSource: dataSource,
      template: $("#mobile-listview-filtering-template").text(),
      filterable: {
        field: "ProductName",
        operator: "startswith"
      },
      virtualViewSize: 100, // this configuration is needed to determine the items displayed, since the datasource does not (and should not) have paging set.
      endlessScroll: true
    });
  }
</script>
<script>
  var app = new kendo.mobile.Application(document.body);
</script>

【讨论】：

我从 Telerik 页面知道这个例子。我已经看到了许多具有“相似”主题的示例和其他线程，但这里没有任何帮助我解决这个问题。