1

我是 YUI 的新手，但我是 JQuery UI 的老手。所以这个让我难住了。我无法让我的 Datatable 使用 Rest 服务进行渲染。我有两个版本的代码。我使用从服务中捕获的 JSON 对象作为数据对象和本地数据源。那个很好用。当我尝试切换到 GET 插件并从服务中获取它时。它只是从不渲染。

我的本地示例：

@main("Play 2.1") {

<script type="text/javascript">

    YUI().use("datatable", "datasource-local", "datasource-jsonschema", "datatable-datasource", function (Y) {

        var data = [
            {"script":{"id":34534,
                "scriptText":"234523452345234",
                "modifiedDate":1367525647000,
                "status":"Reviewed",
                "qcDate":1367526006000,
                "location":{"id":1},
                "orderInfo":{"id":1,
                    "orderName":"Order Name",
                    "dealerName":"Dealer Name"}
            }},
            {"script":{"id":656435,
                "scriptText":"36536543636365",
                "modifiedDate":1367525646000,
                "status":"Reviewed",
                "qcDate":1367526017000,
                "location":{"id":1},
                "orderInfo":{"id":43534534,
                    "orderName":"Order Name",
                    "dealerName":"Dealer Name"}
            }}
        ];

        var localDataSource = new Y.DataSource.Local({source:data});

        localDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema:{
                resultListLocator:"",
                resultFields:[
                    {
                        key:"id",
                        locator:"script.id"
                    },
                    {
                        key:"scriptText",
                        locator:"script.scriptText"
                    },
                    {
                        key:"modifiedDate",
                        locator:"script.modifiedDate"
                    }

                ]
            }
        });


        var simple = new Y.DataTable({
            columns:["id", "scriptText", "modifiedDate"],
            summary:"Example Summary",
            caption:"Example Caption"
        });

        simple.plug(Y.Plugin.DataTableDataSource, {
            datasource:localDataSource
        });

        simple.render("#dataGrid");
        simple.datasource.load();

    });

</script>

<span id="listView">
            <div id="dataGrid" style="height: 95%;width: 100%;"></div>
        </span>


<div id="dataCheckArea">
    <h3>RAW DATA AREA</h3>
    <ul>
        @records.map {record =>
        <li>@record.toString</li>
        }
    </ul>

</div>

}

我的 REST 服务示例：

@main("Welcome to Play 2.1") {

<script type="text/javascript">

    YUI().use("datatable", "datasource-get", "datasource-jsonschema", "datatable-datasource", function (Y) {

        var dataSource = new Y.DataSource.Get({
            source:"http://localhost:9000/reviewRecords?q=query"
        });

        dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema:{
                resultListLocator:"",
                resultFields:[
                    {
                        key:"id",
                        locator:"script.id"
                    },
                    {
                        key:"scriptText",
                        locator:"script.scriptText"
                    },
                    {
                        key:"modifiedDate",
                        locator:"script.modifiedDate"
                    }

                ]
            }
        });


        var dataGrid = new Y.DataTable({
            columns:["id", "scriptText", "modifiedDate"],
            summary:"Example Summary",
            caption:"Example Caption"
        });

        dataGrid.plug(Y.Plugin.DataTableDataSource, { datasource:dataSource });

        dataGrid.render("#dataGrid");
        dataGrid.datasource.load();

    });

</script>

        <span id="listView">
            <div id="dataGrid" style="height: 95%;width: 100%;"></div>
        </span>

** 已编辑，因为原始提交丢失了我的第二个代码块。

4

1 回答 1

1

问题不在于我的 JavaScript 代码。问题在于我如何发送回复。YUI 框架期望响应将被包装在一个回调函数中。当我更改我的响应以提供带有回调的 JSONP 响应时，一切都开始工作了。

YUI.Env.DataSource.callbacks.yui_3_11_0_1_1379097239018_187([
        {"script":{"id":34534,
            "scriptText":"234523452345234",
            "modifiedDate":1367525647000,
            "status":"Reviewed",
            "qcDate":1367526006000,
            "location":{"id":1},
            "orderInfo":{"id":1,
                "orderName":"Order Name",
                "dealerName":"Dealer Name"}
        }},
        {"script":{"id":656435,
            "scriptText":"36536543636365",
            "modifiedDate":1367525646000,
            "status":"Reviewed",
            "qcDate":1367526017000,
            "location":{"id":1},
            "orderInfo":{"id":43534534,
                "orderName":"Order Name",
                "dealerName":"Dealer Name"}
        }}
    ])

我通过在 Scala/Play 2.1 的方法响应中使用 JSONP 调用来做到这一点

def reviewRecords(q: String, callback: String) = Action {

val reviewRecords = reviewRecordsService.currentReviewRecords

Ok(new Jsonp(callback, Json.toJson(DataTablesReturnObject(reviewRecords.size, reviewRecords.toArray)))).as("application/json")

}

我将编辑原始问题的标题以包含 Play 2.1 和 Scala 的关键字，因为这最终与 Java 响应有点不同。

于 2013-09-16T15:42:32.333 回答