Kendo Grid - 将数据打印到表格答案

【问题标题】：Kendo Grid - Print data to tableKendo Grid - 将数据打印到表格
【发布时间】：2016-12-22 11:57:45
【问题描述】：

我正在尝试使用 kendo template 功能在表格中打印以下数据。这是我通过 ajax 调用返回的数据：

{"Data":[{"CustomerID":1,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":2,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":3,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":4,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":5,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"},{"CustomerID":6,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":7,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":8,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":9,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":10,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"},{"CustomerID":11,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":12,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":13,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":14,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":15,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"}],"Total":15,"AggregateResults":null,"Errors":null}

这是我尝试打印的方式：

<script id="javascriptTemplate" type="text/x-kendo-template">

    <table>
        <thead>
            <tr>
                <th>Customer ID</th>
                <th>ID</th>
                <th>Customer name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            # for (var i=0; i < data.length; i++){ console.log(Object.keys(data[i]));#
            <tr>
                # var keys = Object.keys(data[i]) #
               # for (var j=1; j < keys.length; j++){ console.log(keys[j]); #
                <td>
                    #= data[i][keys[j]] #
                </td>
                # } #
            </tr>
            # } #
        </tbody>
    </table>

</script>

她的我的 ajax 调用：

<script>

    $.ajax(
        {
            type: 'POST',
            url: '/default1/KendoDataAjaxHandle/',
            dataType: 'json',
            success: function (result) {


                //Get the external template definition using a jQuery selector
                var template = kendo.template($("#javascriptTemplate").html());

                //console.log(result);
                var results = template(results); //Execute the template
                //console.log(results);
                $("#example").html(results); //Append the result

            }
        })

</script>

谁能告诉我如何打印数据，因为我没有在表格中获得任何数据。

【问题讨论】：

您在控制台窗口中看到任何错误？
没有。在 console.log(result) 我得到Object {Data: Array[15], Total: 15, AggregateResults: null, Errors: null}
我不确定这样使用的模板语法。您为什么不按照演示站点中的方法进行操作？ demos.telerik.com/kendo-ui/grid/index .. 现在我什至没有看到你像 $("#grid").kendoGrid( 那样应用 kendo grid 插件
按要求。我必须从头开始创建一个表，而不是让 kendo 为我生成它。没有$("#grid").kendoGrid( 也是可能的。看看这个链接：dojo.telerik.com/UCovU。但我无法弄清楚为什么表格没有显示任何数据。
所以你的意思是你想要一个网格..但你不想要一个剑道网格？还是像创建自己的剑道网格方式一样？

标签： ajax kendo-ui kendo-grid kendo-template

【解决方案1】：

考虑到您的这些数据

{"Data":[{"CustomerID":1,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"}],"Total":15,"AggregateResults":null,"Errors":null}

问题：您是否没有为模板分配正确的数据..

var results = template(results); //results are not the expected object

解决方案：您需要将results.Data 传递给您的模板。所以使用这条线。

var results = template(results.Data); //pass data to the template.

【讨论】：

@AakashThakur 很高兴为您提供帮助 :) 编码愉快！