如何将我的 JSON 数据解析为 KENDO GRID 中的字符串？

Question

如何将此对象格式化为其实际值？ 我希望此 json 对象在特定的 kendo 网格列中显示其实际值。 有人可以帮助我并教我怎么做吗？

这是 kendo 网格的图像，结果

虽然这是我在我看来使用的代码。 可以请人帮忙.

            contact : new kendo.data.DataSource({
            transport:{
                read:{
                    type: "GET",
                    url:"reservation/list",
                    dataType:"json",
                    contentType: "application/json; chartset=utf-8"
                },
                update: {
                    url: "contacts/update",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: "contacts/destroy",
                    dataType: "json",
                    type:"POST"
                },
                create: {
                    url: "contacts/store",
                    dataType: "json",
                    type:"POST"
                }
            },
            schema:{
                model:{
                    id:"id",
                    fields:{
                        Purpose:
                        {
                            type:"string",
                            validation:{required:true}
                        },
                        RoomID:
                        {
                            from: "RoomID.room_name",
                            type: "string"
                        },
                        Equipments:
                        {  
                            from: "Equipments",
                            type: "string"
                        },
                        start:
                        {
                            type:"date",
                            validation:{required:true}
                        },
                        end:
                        {
                            type:"date",
                            validation:{required:true}
                        },
                    }
                }
            },
            pageSize:10
        }),
        init : function(e){
            $("#grid").kendoGrid({
                dataSource: this.contact,
                selectable: true,
                height:600,
                editable: "popup",
                filterable: true,
                sortable: {
                            mode: "multiple",
                            allowUnsort: true,
                            showIndexes: true
                        },
                toolbar: ["search"],
                columns: [
                    { 
                        field: "Purpose",
                        title:"Purpose" 
                    },
                    { 
                        field: "RoomID",
                        title:"Room", 
                    },
                    { 
                        field: "Equipments",
                        title:"Equipments", 
                    },
                    { 
                        field: "start",
                        title:"Start",
                        //template: '#= kendo.toString(kendo.parseDate(start), "MM/dd/yyyy HH:mm:ss")#' 
                        format: "{0:MMM dd,yyyy hh:mm tt}",
                        parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"]
                    },
                    { 
                        field: "end",
                        title:"End",
                        //template: '#= kendo.toString(kendo.parseDate(end), "MM/dd/yyyy HH:mm:ss")#'
                        format: "{0:MMM dd,yyyy hh:mm tt}",
                        parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"] 
                    },
                            { 
                                command: ["edit", "destroy"],
                                title: " ", 
                                width: "250px" 
                            }
                        ],
                pageable:{
                    pageSize:10,
                    refresh:true,
                    buttonCount:5,
                    messages:{
                        display:"{0}-{1}of{2}"
                    }
                }
            });
        },
        });
       kendo.bind($("#whole"),model);
       model.init();

Answer 1

您可以在列模板中使用 kendo.stringify。 示例：

kendo.stringify(YourProperty)

Answer 2

希望这能帮助您设计出结果模板。

https://dojo.telerik.com/ICOceLUj

在上面的示例中，我创建了一个自定义列，它接受传入的行对象，然后将项目的名称和类别对象解析为一个模板。

为此，我添加了模板 属性 并使用带有外部模板脚本的函数来处理操作。我个人认为这比尝试内联复杂的客户端模板更容易管理（尤其是当您涉及逻辑时）

这就是我们最初的设置方式：

{ title: "custom template", template:"#=customTemplate(data)#"  }

显然您会将其更改为您需要在模型中查看的 属性。

那么函数就是几行代码：

 function customTemplate(data){
                var template = kendo.template($('#customTemplate').html()); 
                var result = template(data); 
                return result;
              }

所以这采用我为此创建的 customTemplate 模板并将其呈现为 html，然后它将在适当的地方应用数据。模板如下所示：

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

          <div>
          <h5> #:data.ProductName#</h5>

          <h4>#: JSON.stringify(data.Category, null, 4) #</h4>

          </div>


          </script>

然后您可以根据需要自定义此模板，以满足您的特定需求。然后，您可以为项目创建一个源模板，然后将值映射回单个字符串，或者在模板中包含此逻辑。在您的情况下，哪个最明智。

有关模板的更多信息，请查看此 link：

https://docs.telerik.com/kendo-ui/framework/templates/overview