将 SQL 转换为 Kendo UI 列表视图

Question

我面临的问题是，我有一个事件列表，这些事件会经常更改，并且每次打开时都需要在我的 Kendo UI Mobile Listview 中更新它们。 SQL 表以这种格式存在。

Item        Type                Description

eventID     Integer (Unique)    A unique ID for the event
name        String (30chars)    The name of the event
time        Time Date           A DTG of the event
category    String(enum values) Category for initial disambiguation
subcategory String(enum values) Further disambiguation category
description String (100chars)   The description that appears for the event.
locationID  Integer(Referenced) A unique ID for the location of the event.
pictureID   Integer(Referenced) A ID for the picture file of the event.

我需要把这个 SQL 数据库变成 Listview，所以我做了一个 PHP 查询，因为我认为这是最好的方法。从那里我在我的脚本文件中创建了一个函数，使用这个 php 文件作为数据源。然后我尝试将它绑定到列表视图并失败了。

我的问题是我从这里去哪里？ / 谁能告诉我怎么了？ / 我错过了什么？ 顺便说一句，我对编码很陌生，这是迄今为止我尝试过的最复杂的事情，所以如果存在大量的错误，请原谅。 所有三件事的代码都可以在下面找到：

PHP 脚本

<?php
    $con = mysql_connect("mysql://serverlURL","USERNAME","PASSWORD");
    if (!$con){ die('Could not connect: '.mysqlerror()); }

    mysql_select_db("DBNAME", $con);
    $q = mysql_query("Select * from events;");
    $res = json_encode(mysql_fetch_assoc($q));
    echo $res;

    mysql_close($con);
?>

然后我就有了这是我的 main.js：

JavaScript 文件

function dataInit(){
    var eventdata = new kendo.data.Datasource({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/SQLRequests/getevents.php",
        endlessScroll: true,
        dataType: "json",
        success: function (data) {
            $("#flat-listview").kendoMobileListView({
                dataSource: data.d,
                template: $("#ListViewTemplate").html()
                });
            }
        })
    }

然后我的页面会在页眉中启动脚本，并具有 listview 元素。

HTML 页面

<div data-role="view" data-title="Events" data-style="inset" data-init="datainit">
    <header data-role="header" data-id="default-header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>            
            <span data-role="view-title"></span>
        </div>
    </header>    
    <ul id="eventfeed"></ul>            
</div>

Answer 1

问题是您混合使用了 jQuery ajax 方法和 DataSource。这是一个关于如何使用数据源做你想做的事情的小提琴示例：http://jsfiddle.net/whizkid747/rDESU/

在这个示例中，我使用 jsFiddle 的 echo 服务来返回发布到 url 的数据。对您来说，您只需要提供您的网址并执行“获取”。

类似这样的：

var dataSource = new kendo.data.DataSource({

    transport: {
        read: {

            url: "/SQLRequests/getevents.php",
            dataType: "json",
            type: "GET",            
        }
    }
});