Jquery 如何从剑道树视图级联剑道下拉列表_Jquery_Kendo Ui_Telerik_Kendo Treeview_Kendo Dropdown

Jquery 如何从剑道树视图级联剑道下拉列表

jquery kendo-ui telerik

Jquery 如何从剑道树视图级联剑道下拉列表,jquery,kendo-ui,telerik,kendo-treeview,kendo-dropdown,Jquery,Kendo Ui,Telerik,Kendo Treeview,Kendo Dropdown,我是剑道树视图的新手，目前我正在尝试根据剑道树视图选中的复选框值加载剑道下拉列表的值。我希望获得剑道树视图选中节点的选定值，但无法使用这些树值级联下拉列表。任何人都可以就我的问题提出一些建议。请尝试使用下面的代码片段 <!DOCTYPE html> <html> <head> <title>Jayesh Goyani</title> <link rel="stylesheet" href="http://kend

我是剑道树视图的新手，目前我正在尝试根据剑道树视图选中的复选框值加载剑道下拉列表的值。我希望获得剑道树视图选中节点的选定值，但无法使用这些树值级联下拉列表。

任何人都可以就我的问题提出一些建议。

请尝试使用下面的代码片段

<!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>


贾耶什·戈亚尼
$（文档）.ready（函数（）{
$（“#treeview”）.kendoTreeView({
复选框：{
孩子们：是的
},
检查：onCheck，
数据源：[{
id:1，文本：“我的文档”，扩展：true，精灵类：“根文件夹”，项目：[
{
id:2，文本：“剑道UI项目”，扩展：true，精灵类：“文件夹”，项目：[
{id:3，文本：“about.html”，spritecsclass：“html”}，
{id:4，文本：“index.html”，spritecsclass:“html”}，
{id:5，文本：“logo.png”，spritecsclass:“image”}
]
},
{
id:6，文本：“新网站”，扩展：true，精灵类：“文件夹”，项目：[
{id:7，文本：“mockup.jpg”，spritecsclass：“image”}，
{id:8，文本：“Research.pdf”，spritecsclass：“pdf”}，
]
},
{
id:9，文本：“报告”，扩展：true，精灵类：“文件夹”，项目：[
{id:10，文本：“二月.pdf”，精灵类：“pdf”}，
{id:11，文本：“March.pdf”，spritecsclass：“pdf”}，
{id:12，文本：“April.pdf”，spritecsclass:“pdf”}
]
}
]
}]
});
$（“#颜色”）.kendoDropDownList({
dataTextField:“文本”，
dataValueField:“值”
});
});
函数onCheck（arg）{
var checkedNodes=[]，
treeView=$（“#treeView”）.data（“kendoTreeView”），
消息
CheckedNodeId（treeView.dataSource.view（），checkedNodes）；
//将数组转换为CSV
var selectedIDs=checkedNodes.join（“，”）；
var ddl=$（“#颜色”）.data（“kendoDropDownList”）；
//出于测试目的，我创建了虚拟集合。
风险值数据=[
{文本：“红色”，值：“1”}，
{text:selectedds，值：“2”}，
{文本：“灰色”，值：“3”}
];
ddl.setDataSource（数据）；
}
函数checkedNodeId（节点，checkedNodes）{
对于（var i=0；i


如果有任何问题，请告诉我。
谢谢您的快速回复，它工作得非常好。我已经实现了我想要的功能，它与您提供的代码几乎相同。