Question

我在使用我的kendo TreeView正确绑定到HierarchicalDataSource时遇到了一些麻烦。目前，我的页面设置在用户可以进行一些选择的位置，然后单击按钮以根据他们的选择绑定TreeView。

按钮点击处理程序如下所示：

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/myURL/",
                    data: { "id": JSON.stringify(multiselect.value()) }, //this is the value from the first selection.
                    datatype: "jsonp",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "HBClassID",
                    children: {
                        schema: {
                            data: "ActiveStudents",
                            model: {
                                id: "ComboID"
                            }
                        }
                    }
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

ajax调用返回如下所示的数据：

            [{
                "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group",
                "ActiveStudents":
                    [
                        { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" }
                    ]
            }]

当我点击此函数时，进行ajax调用，返回数据，顶层绑定正常。除了在扩展父节点时从不存在任何子节点外，一切似乎都有效。对我来说，奇怪的是，如果我删除HierarchicalDataSource的传输部分并将其替换为类似于此的本地数据：

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            data: [{
                "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group",
                "ActiveStudents":
                    [
         { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" }
                    ]
            }],
            schema: {
                model: {
                    id: "HBClassID",
                    children: {
                        schema: {
                            data: "ActiveStudents",
                            model: {
                                id: "ComboID"
                            }
                        }
                    }
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

然后TreeView完全按照我想要的方式绑定。我能够扩展HBClass并查看其中的所有ActiveStudents。

绑定到远程数据与本地数据有什么不同吗？

Answer 1

我更新了我的点击事件看起来像这样，它适用于我的情况，但我不知道这是否是正确的方法。

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/RightPath/Assignment/BindTreeView/",
                    data: { "id": JSON.stringify(multiselect.value()) },
                    datatype: "json",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "ComboID",
                    children: "ActiveStudents"
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            dataValueField: ["HBClassID", "ComboID"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

将Kendo Treeview绑定到分层数据源（远程数据）

1 个答案: