首页 > javascript > kendo ui treeList最大调用堆栈大小错误

kendo ui treeList最大调用堆栈大小错误 (kendo ui treeList Maximum call stack size error)

问题

您好我是使用kendo ui的用户。我试图使用Kendo UI TreeList显示以下数据,但是我得到了最大调用堆栈大小错误。当我详细点击错误时,错误发生在defaultParentId(kendo.all.js:114128)。你能告诉我为什么吗?下面是我使用的数据源选项。

schema:{  
   model:{  
      id:"codeNo",
      parentId:"upCodeNo",
      fields:{  
         codeNo:{  
            type:'number'
         },
         upCodeNo:{  
            type:'number'
         }
      },
      expanded:true
   }

下面是我实际导入的数据。

{"CODE":"N", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":1}, {"CODE":"Y", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":2}, {"CODE":"N", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":3}, {"CODE":"Y", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":4}, {"CODE":"N", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":5}, {"CODE":"Y", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":6}, {"CODE":"N", "LANG_CLASS":"JPN", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":7}, {"CODE":"Y", "LANG_CLASS":"JPN", "CODE_NAME":"사용(일본어)", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":8}, {"CODE":"N", "LANG_CLASS":"KOR", "CODE_NAME":"미사용", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":9}, {"CODE":"Y", "LANG_CLASS":"KOR", "CODE_NAME":"사용", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":10}

解决方法

您没有为Kendo UI数据源定义正确的字段。

基于https://demos.telerik.com/kendo-ui/treelist/local-data-binding上的文档

定义父ID的正确方法是在数据本身中,即

{ "UP_CODE_NO":2, "CODE_NO":10 }  //wrong
{ "parentId":2, "CODE_NO":10 }    //correct

因此,而不是使用你现在拥有的数据,你需要使用函数一样来转换数据map,例如

dataArray.map(function (data) {
    data["parentId"] = data["UP_CODE_NO"] > 0 ? data["UP_CODE_NO"] : null;
    return data;
})

以下是使用您在问题中提供的数据的工作代码段。

$(document).ready(function () {
    var dataSource = new kendo.data.TreeListDataSource({
        data: [
            {"CODE":"N", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":1}, {"CODE":"Y", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":2}, {"CODE":"N", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":3}, {"CODE":"Y", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":4}, {"CODE":"N", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":5}, {"CODE":"Y", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":6}, {"CODE":"N", "LANG_CLASS":"JPN", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":7}, {"CODE":"Y", "LANG_CLASS":"JPN", "CODE_NAME":"사용(일본어)", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":8}, {"CODE":"N", "LANG_CLASS":"KOR", "CODE_NAME":"미사용", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":9}, {"CODE":"Y", "LANG_CLASS":"KOR", "CODE_NAME":"사용", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":10}
        ].map(function (data) { data["parentId"] = data["UP_CODE_NO"] > 0 ? data["UP_CODE_NO"] : null; return data; }),
        schema: {
            model: {
                id: "CODE_NO",
                expanded: true
            }
        }
    });

    $("#treelist").kendoTreeList({
        dataSource: dataSource,
        height: 540,
        columns: [
            { field: "LANG_CLASS" },
            { field: "CODE_NAME" },
            { field: "REMARKS" }
        ]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.min.css">
<div id="treelist"></div>


问题

Hello I am a user using kendo ui. I tried to display the following data using Kendo UI TreeList, but I get the Maximum call stack size error. When I click on the error in detail, the error occurs in defaultParentId (kendo.all.js: 114128). Can you tell me why? Below is the data source option that I used.

schema:{  
   model:{  
      id:"codeNo",
      parentId:"upCodeNo",
      fields:{  
         codeNo:{  
            type:'number'
         },
         upCodeNo:{  
            type:'number'
         }
      },
      expanded:true
   }

And below this is the data I actually imported.

{"CODE":"N", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":1}, {"CODE":"Y", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":2}, {"CODE":"N", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":3}, {"CODE":"Y", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":4}, {"CODE":"N", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":5}, {"CODE":"Y", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":6}, {"CODE":"N", "LANG_CLASS":"JPN", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":7}, {"CODE":"Y", "LANG_CLASS":"JPN", "CODE_NAME":"사용(일본어)", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":8}, {"CODE":"N", "LANG_CLASS":"KOR", "CODE_NAME":"미사용", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":9}, {"CODE":"Y", "LANG_CLASS":"KOR", "CODE_NAME":"사용", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":10}

解决方法

You are not defining the correct field for Kendo UI datasource.

Based on the documentation found on https://demos.telerik.com/kendo-ui/treelist/local-data-binding

The correct way of defining parent ID is in the data itself, i.e.

{ "UP_CODE_NO":2, "CODE_NO":10 }  //wrong
{ "parentId":2, "CODE_NO":10 }    //correct

So instead of using the data that you have now, you need to transform the data using a function like map, for example

dataArray.map(function (data) {
    data["parentId"] = data["UP_CODE_NO"] > 0 ? data["UP_CODE_NO"] : null;
    return data;
})

Below is a working snippet using the data that you have provided in your question.

$(document).ready(function () {
    var dataSource = new kendo.data.TreeListDataSource({
        data: [
            {"CODE":"N", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":1}, {"CODE":"Y", "LANG_CLASS":"", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":0, "CODE_NO":2}, {"CODE":"N", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":3}, {"CODE":"Y", "LANG_CLASS":"CNA", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":4}, {"CODE":"N", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":5}, {"CODE":"Y", "LANG_CLASS":"ENG", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":6}, {"CODE":"N", "LANG_CLASS":"JPN", "CODE_NAME":"", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":7}, {"CODE":"Y", "LANG_CLASS":"JPN", "CODE_NAME":"사용(일본어)", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":8}, {"CODE":"N", "LANG_CLASS":"KOR", "CODE_NAME":"미사용", "REMARKS":"", "UP_CODE_NO":1, "CODE_NO":9}, {"CODE":"Y", "LANG_CLASS":"KOR", "CODE_NAME":"사용", "REMARKS":"", "UP_CODE_NO":2, "CODE_NO":10}
        ].map(function (data) { data["parentId"] = data["UP_CODE_NO"] > 0 ? data["UP_CODE_NO"] : null; return data; }),
        schema: {
            model: {
                id: "CODE_NO",
                expanded: true
            }
        }
    });

    $("#treelist").kendoTreeList({
        dataSource: dataSource,
        height: 540,
        columns: [
            { field: "LANG_CLASS" },
            { field: "CODE_NAME" },
            { field: "REMARKS" }
        ]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.min.css">
<div id="treelist"></div>

相似信息