问题序列化/反序列化剑道网格设置

问题描述

希望有人有解决方案。我们有几个网格在网格列上具有自定义多选。 The issue is that JSON seems to be refusing to properly serialize/deserialize them when there's more than one option selected. 这有效：

a = $("#grid").data("kendoGrid").getoptions();

$("#grid").data("kendoGrid").setoptions(a);

但是这会中断：

a = JSON.parse(JSON.stringify($("#grid").data("kendoGrid").getoptions()));

$("#grid").data("kendoGrid").setoptions(a);

而令人讨厌的部分是它绝对是等式的序列化部分搞砸了，因此证明很难确切地发现它应该如何与修改后的实际外观。字符串比较是相等的。有什么建议吗？

示例中断：a 列有一个复选框下拉网格过滤器，其中包含三个选项：1、2、3。选择多个选项会在保存然后加载时破坏网格。只选择一个或零个作品。

编辑：这里是网格初始化：请注意，DCGrid 是对剑道网格的覆盖，它设置了所有网格共有的属性，例如页面大小。

@(Html.DCGrid<Order>("grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .sort(s => { if (Request.QueryString.Keys.Count == 0) { s.Add(x => x.OrderNum).Ascending(); } })
                .Model(model => model.Id(o => o.ID))
                .PageSize(Settings.DefaultPageSize)
                .Read(read => read.Action("Read","OrderSearch").Data("getParameters"))
            )
            .Events(e => e.ColumnReorder("onColumnReorder"))
            .Reorderable(r => r.Columns(true))
            .ColumnMenu()
            .Columns(columns =>
            {
                if (User.IsInRole("viewOrders"))
                {
                    columns.Template(@<text></text>)
                            .ClientTemplate("#= rowCommandsUndelete(data,true,false) #")
                            .HtmlAttributes(new { reorderable = "false" })
                            .Title("&nbsp;")
                            .Width(86);
                }
                columns.Bound(o => o.OrderNum)
                    .Width(120);
                columns.Bound(o => o.Status.Name)
                    .ClientTemplate("#= clientTemplateOrderStatus(data) #")
                    .Width(120);
                columns.Bound(o => o.Priority.ID).Title("Priority").Width(100)
                    .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetData/Priority","Support",new { nameField = "PriorityNum" }))).ItemTemplate("kendoGridFilterData.IDTemplate"));
                columns.Bound(o => o.OrderDate)
                    .Width(120);
                columns.Bound(o => o.DueDate)
                    .ClientTemplate("#= clientTemplateDueDate(data) #")
                    .Width(140);
                columns.Bound(o => o.Product.ID)
                    .ClientTemplate("#=ellipseDiv(data.Product.ShortName)#")
                    .Title("Product")
                    .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetData/Product",new { idField = "ID",nameField = "ShortName" }))).ItemTemplate("kendoGridFilterData.IDTemplate"))
                    .Width(200);
                columns.Bound(o => o.dispatchConfirmNum)
                    .Width(140);
                    .ClientTemplate(CustomGridHelperExtensions.EditTemplate("Origin","Name") + " #if(drillTovalue(data,'Origin.H2S')) {# <span class='label label-danger margin-left-right-5px'>H2S</span> #}#")
                    .Width(250);
                columns.Bound(o => o.OriginTank.TankNum)
                    .ClientTemplate("<a href='/OriginTanks?OriginId=#=data.OriginID#'>#=ellipseDiv(data.OriginTank.TankNum)#</a>")
                    .Width(100);
                columns.Bound(o => o.OriginBOLNum)
                    .Width(130);
                columns.Bound(o => o.Destination.Name)
                    .ClientTemplate("<a href='/Destinations?id= #=data.DestinationID# '>#=ellipseDiv(data.Destination.Name)#</a>")
                    .Title("Destination")
                    .Width(250);
                columns.Bound(o => o.Carrier.Name)
                    .Title("Carrier")
                    .ClientTemplate("<a href='/carriers?id= #=data.CarrierID# '>#=ellipseDiv(data.Carrier.Name)#</a>")
                    .Width(170);
                columns.Bound(o => o.Driver.FullName)
                    .ClientTemplate("<a href='/Drivers?IDNumber=#=data.Driver.IDNumber# '>#=ellipseDiv(data.Driver.FullName)#</a>")
                    .Width(170);
            })
        )

这是 idtemplate (javascript)：

  IDTemplate: function (e) {
        return "<li><label class='k-label'><input type='checkBox' value='#:data.ID#'/>#:data.Name || data.all#</label></li>";
    }

我们关心的唯一选项是排序、过滤器、列可见性、列宽和列位置（用于重新排列）。

解决方法

您不能对函数进行字符串化。例如：

let test = {
   label: 'this is label',calculate: function(){
     return 2 + 2;
  }
};

let toString = JSON.stringify(test);
console.log(toString); //returns {"label":"this is label"}

undefined、Functions 和 Symbols 不是有效的 JSON 值。如果有
在转换过程中遇到这些值，它们要么被省略（在对象中找到时）或更改为 null（在
中找到时）大批）。 JSON.stringify() 传入 "pure" 时可以返回 undefined
像 JSON.stringify(function(){}) 或
这样的值 JSON.stringify(undefined)。

资源：JSON.stringify()

您可以遍历加载选项中的列并再次设置属性，如下所示：

let optionsObject = JSON.parse(options);
for (let i = 0; i < optionsObject.columns.length; i++) {
    let column = optionsObject.columns[i];
    if (column.field) {
        switch (column.field) {
            case 'field1':
                column.template = kendo.template($('#field-1-template').html());
                break;
            case 'field2':
                column.template = kendo.template($('#field-2-template').html());
                break;

            default:
                break;
        }
    }
}

为列设置属性后，然后设置网格选项：

$("#grid").data("kendoGrid").setOptions(optionsObject);

javascript json kendo-grid kendo-ui telerik-grid