javascript - Kendo TreeView HierarchicalDataSource 中的歧义列

Question

我正在使用 TreeView 和两个嵌套数据源来显示关系数据。两个表都有一个标有“名称”的列，但是当我想指示要显示的 TreeView 的字段时，它不理解嵌套，只是从第一级重复“名称”。我如何让它显示每个级别各自的“名称”值？

当我通过 "dataTextField: ["Name", "Name", "Id"]"指示要显示的列时，我只从最外面的数据源获取值。

相应的代码

在 cshtm 文件中:

<div>
  <h2>Well Designs</h2>  
    <div><ul id="WDtreeview"></ul></div>
</div>

@section scripts
{
    <script src="~/Scripts/App/Views/Maintenance/WellDesigns.js"></script>
}

在 WellDesigns.js 文件中:

    var WellDesigns = {
        type: "odata",
        transport: {
            read: {
                url: function (options) {
                    return kendo.format("http://localhost:57943/odata/WellDesigns", options.Id);
                },
                //type: "GET",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                var paramMap = kendo.data.transports.odata.parameterMap(options);
                delete paramMap.$inlinecount; // <-- remove inlinecount parameter
                delete paramMap.$format; // <-- remove format parameter

                return paramMap;
            }
        },
        schema: {
            data: "value",
            total: function (e) {
                return Number(e["odata.count"]);
            },
            model: {
                id: "Id",
                hasChildren: true,
                children: Sections
            }
        }
    }

    var Sections = {
        type: "odata",
        transport: {
            read: {
                url: function (options) {
                    return kendo.format("http://localhost:57943/odata/WellDesigns({0})/Sections", options.Id);
                },
                //type: "GET",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                var paramMap = kendo.data.transports.odata.parameterMap(options);
                delete paramMap.$inlinecount; // <-- remove inlinecount parameter
                delete paramMap.$format; // <-- remove format parameter

                return paramMap;
            }
        },
        schema: {
            model: {
                id: "Id",
                hasChildren: false
            }
        }
    }

    $("#WDtreeview").kendoTreeView({
        dataSource: WellDesigns,
        dataTextField: ["Name", "Name", "Id"],
        name: "WDTV"
    });

/odata/WellDesigns 的输出:

{
  "odata.metadata":"http://localhost:57943/odata/$metadata#WellDesigns","value":[
    {
      "Id":1,"Name":"Eastern Basin: M3S","StringType":null,"Area":"McClintic, ET O'Danial, O'Brien, Turner","Formations":"Wolfcamp A2 and above","Considerations":"comment"
    },{
      "Id":2,"Name":"Western Basin M4S","StringType":"Tall","Area":"McClintic","Formations":"Wolfcamp","Considerations":"Water flow"
    }
  ]
}

/WellDesigns(1)/Sections 的输出:

{
  "odata.metadata":"http://localhost:57943/odata/$metadata#Sections","value":[
    {
      "Id":2,"Name":"Intermediate 2","HoleTypeId":3,"WellDesignId":1
    },{
      "Id":3,"Name":"Production Alt","HoleTypeId":5,"WellDesignId":1
    },{
      "Id":4,"Name":"Surface Alt 2","HoleTypeId":1,"WellDesignId":1
    },{
      "Id":5,"Name":"Intermediate Tall","HoleTypeId":6,"WellDesignId":1
    },{
      "Id":6,"Name":"Production Long","HoleTypeId":7,"WellDesignId":1
    },{
      "Id":7,"Name":"Surface Hole","HoleTypeId":1,"WellDesignId":1
    },{
      "Id":8,"Name":"Intermediate 1 msc","HoleTypeId":2,"WellDesignId":1
    },{
      "Id":9,"Name":"Production msc","HoleTypeId":4,"WellDesignId":1
    }
  ]
}

Answer 1

这是我找到的解决方案。

在内部数据源模式中，我定义了 fields 属性，然后为列使用了不同的名称，因此它成为别名。

var Sections = {
    type: "odata",
    transport: {
        read: {
            url: function (options) {
                return kendo.format("http://localhost:57943/odata/WellDesigns({0})/Sections", options.Id);
            },
            //type: "GET",
            dataType: "json"
        },
        parameterMap: function (options, operation) {
            var paramMap = kendo.data.transports.odata.parameterMap(options);
            delete paramMap.$inlinecount; // <-- remove inlinecount parameter
            delete paramMap.$format; // <-- remove format parameter

            return paramMap;
        }
    },
    schema: {
        data: "value",
        model: {
            id: "Id",
            //This example shows how to alias a property to a different property in the data returned from the service
            // SectionName2 is the property as seen by the TreeView but it is populated by the property 'SectionName' from the returned data
            fields: { 
                SectionName2: "SectionName"
            },
            //SectionName: "SectionName",
            //SectionName2: function (){ return SectionName;},
            hasChildren: true,
            children: SectionsCasings
        }
    }
}

var tree = $("#WDtreeview").kendoTreeView({
    dataSource: WellDesigns,
    dataTextField: ["Name", "SectionName2", "Casing.Size"],
    name: "WellDesignTV",
    select: onSelect
});

笔记:

对于那些具有敏锐眼光或好奇的人，您会注意到第二列已更改为“SectionName”。这是因为我发现重命名子表中的一列更简单，而不是等待 Telerik 支持响应支持票或继续搜索互联网、演示和文档。

笔记2:

我确实收到了 Telerik 的回复。他们说列名将与来自数据源的适当级别的数据相关联，因此有多个列名很好。他们甚至提供了一个示例解决方案来做到这一点，所以我倾向于相信问题出在我的代码中，而不是 TreeView 的工作原理。