jquery - 如何从 Kendo Treeview 级联 Kendo 下拉列表-6ren

jquery - 如何从 Kendo Treeview 级联 Kendo 下拉列表

转载作者：行者123 更新时间：2023-12-03 22:51:15

我是 Kendo Treeview 的新手，目前我正在尝试根据 Kendo Treeview 选中的复选框值加载 Kendo 下拉列表的值。我想获取 Kendo Treeview 选中节点的选定值，但无法使用这些树级联下拉列表值。
任何人都可以就我的问题提出一些建议。

最佳答案

请尝试使用以下代码片段。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="treeview"></div>
    <div id="color"></div>
    <script>
        $(document).ready(function () {
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                check: onCheck,

                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
            $("#color").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value"
            });

        });
        function onCheck(arg) {
            var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;
            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            //convert array to CSV
            var selectedIDs = checkedNodes.join(",");
            var ddl = $("#color").data("kendoDropDownList");

            // for testing purpose I have created dummy collection.
            var data = [
                       { text: "Red", value: "1" },
                       { text: selectedIDs, value: "2" },
                       { text: "Grey", value: "3" }
            ];
            ddl.setDataSource(data);

        }
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    checkedNodes.push(nodes[i].id);
                }
                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }


    </script>
</body>
</html>