如何动态更改 kendo TreeList 的列集合集？答案

【问题标题】：How to change the columns collection set of a kendo TreeList dynamically?如何动态更改 kendo TreeList 的列集合集？
【发布时间】：2019-10-21 20:10:48
【问题描述】：

尝试通过查询动态更改列列表...

当我构造 TreeList 时，我会调用列：

$("#treelist").kendoTreeList({
        columns: AnalyseCenterSKUService.getKPIColumnList($scope)

如果我返回一个包含字段的简单数组，它就可以工作..

如果我调用 $http.get（在我的 getKPIColumnList(..) 函数中）将一些列添加到现有的列数组中，则 TreeList 构造不正确。

任何建议将不胜感激！ :)

编辑 22-10-2019 09:00

树列表初始化

$("#treelist").kendoTreeList({
        columns: AnalyseCenterSKUService.getKPIColumnList($scope), 
        scrollable: true,
        columnMenu : {
            columns : true
        },
        height: "100%", 
        dataBound: function (e) {
            ExpandAll();
        },
        dataSource: {
            schema: {
                model: {
                    id: "id",
                    parentId: "parentId",
                    fields: {
                        id: { type: "number" },
                        parentId: { type: "number", nullable: true },
                        fields: {
                            id: { type: "number" },
                            parentId: { type: "number", nullable: false }
                        }
                    }
                }
            },
            transport: {
                read: {

                    url: "/api/AnalyseCenter/GetWorkOrderTree/0",
                    dataType: "json"
                }
            }
        }

getKPIColumnList 返回一个静态数组 + 一些带有动态列的推送（来自 DB）

angular.module('AnalyseCenterDirectives')
.service ('AnalyseCenterSKUService', function ($http) {

        var toReturn = [ {field: "Name", title: "Hiérachie SKU", width: "30%" }, ..., ..., .... ];

我尝试在这个函数中推送数据库结果

    return $http.get("/api/AnalyseCenter/GetWorkOrderHistorianAdditonalColumns?equipmentName=" + equipmentName)
             .then(function (result) {
                 var data = result.data;
                 if (data && data !== 'undefined') {
                     var fromDB = data;


                     angular.forEach(fromDB, function (tag) {
                         var tagName = tag.replace(".","_");
                         toReturn.push({                                 
                              field: tagName, title: tag, width: '10%',
                              attributes: { style: "text-align:right;"}                                                         })
                        })

存储过程GetWorkOrderHistorianAdditonalColumns返回一个字符串列表（未来列）

【问题讨论】：

标签： dynamic kendo-ui treelist

【解决方案1】：

那是因为 ajax 是异步的，这意味着您的树列表正在在请求完成之前被初始化。 JavaScript 新手的经典问题。我建议您花点时间阅读有关 ajax 的信息，例如 How does AJAX works。

回到你的问题。你需要在 success 回调中创建你的树列表（我不能给你一个更完整的解决方案，因为我不知道你在你的函数中做什么或者你正在使用哪个框架使用结果数据打开该 ajax 请求），这可能是您的列。然后它就像你用数组初始化它一样工作。

【讨论】：

感谢您的回复。我知道它是异步的。但是，我很难找到正确构造 TreeList 的方法......首先添加列，然后添加数据。我将调查我正在使用 Kendo + Angular Js + C#.net .. Tx 的成功回调
@Dieter 是的，您将有 2 个请求。它开始变得更加复杂。我建议您将所有内容混合在一个请求、列和数据中。或者在没有 ajax 的情况下之前加载视图中的列。有很多方法。