Kendo ui Kendo Treeview已选中在检查子节点时获取父节点_Kendo Ui_Telerik_Kendo Treeview

Kendo ui Kendo Treeview已选中在检查子节点时获取父节点

kendo-ui telerik

Kendo ui Kendo Treeview已选中在检查子节点时获取父节点,kendo-ui,telerik,kendo-treeview,Kendo Ui,Telerik,Kendo Treeview,我正在尝试使用带有复选框的树视图来定义用户权限。（2个操作-启用/禁用右侧）如何从父节点获取值（id）请尝试以下代码片段 <!DOCTYPE html> <html> <head> <title>Jayesh Goyani</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.comm

我正在尝试使用带有复选框的树视图来定义用户权限。（2个操作-启用/禁用右侧）如何从父节点获取值（id）

请尝试以下代码片段

<!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="http://code.jquery.com/jquery-1.9.1.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>
    <p id="result">No nodes checked.</p>
    <script>
        $(document).ready(function () {
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                check: onCheck,

                dataSource: [{
                    id: 1, text: "1", expanded: true, items: [
                        {
                            id: 2, text: "2", expanded: true, items: [
                                { id: 3, text: "3" },
                                { id: 4, text: "4" },
                                { id: 5, text: "5" }
                            ]
                        },
                        {
                            id: 6, text: "6", expanded: true, items: [
                                { id: 7, text: "7" },
                                { id: 8, text: "8" },
                            ]
                        },
                        {
                            id: 9, text: "9", expanded: true, items: [
                                { id: 10, text: "10" },
                                { id: 11, text: "11" },
                                { id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
                            ]
                        }
                    ]
                }]
            });
        });
        // function that gathers IDs of checked nodes
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    getParentIds(nodes[i], checkedNodes);
                    checkedNodes.push(nodes[i].id);
                }

                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }

        function getParentIds(node, checkedNodes) {
            if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
                getParentIds(node.parent().parent(), checkedNodes);
                checkedNodes.push(node.parent().parent().id);
            }
        }

        // show checked node IDs on datasource change
        function onCheck() {
            var checkedNodes = [],
                treeView = $("#treeview").data("kendoTreeView"),
                message;

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            if (checkedNodes.length > 0) {
                message = "IDs of checked nodes: " + checkedNodes.join(",");
            } else {
                message = "No nodes checked.";
            }

            $("#result").html(message);
        }
    </script>
</body>
</html>


贾耶什·戈亚尼
未检查任何节点
$（文档）.ready（函数（）{
$（“#treeview”）.kendoTreeView({
复选框：{
孩子们：是的
},
检查：onCheck，
数据源：[{
id:1，文本：“1”，展开：true，项目：[
{
id:2，文本：“2”，扩展：true，项目：[
{id:3，文本：“3”}，
{id:4，文本：“4”}，
{id:5，文本：“5”}
]
},
{
id:6，文本：“6”，扩展：true，项目：[
{id:7，文本：“7”}，
{id:8，文本：“8”}，
]
},
{
id:9，文本：“9”，扩展：true，项目：[
{id:10，文本：“10”}，
{id:11，文本：“11”}，
{id:12，文本：“12”，扩展：true，条目：[{id:13，文本：“13”，扩展：true，条目：[{id:14，文本：“14”}，{id:15，文本：“15”}]}
]
}
]
}]
});
});
//函数，用于收集选中节点的ID
函数checkedNodeId（节点，checkedNodes）{
对于（var i=0；i0）{
message=“选中节点的ID:”+checkedNodes.join（“，”）；
}否则{
message=“未检查任何节点。”；
}
$（“#结果”）.html（消息）；
}

如果有任何问题，请告诉我。

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

<!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="http://code.jquery.com/jquery-1.9.1.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>
    <p id="result">No nodes checked.</p>
    <script>
        $(document).ready(function () {
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                check: onCheck,

                dataSource: [{
                    id: 1, text: "1", expanded: true, items: [
                        {
                            id: 2, text: "2", expanded: true, items: [
                                { id: 3, text: "3" },
                                { id: 4, text: "4" },
                                { id: 5, text: "5" }
                            ]
                        },
                        {
                            id: 6, text: "6", expanded: true, items: [
                                { id: 7, text: "7" },
                                { id: 8, text: "8" },
                            ]
                        },
                        {
                            id: 9, text: "9", expanded: true, items: [
                                { id: 10, text: "10" },
                                { id: 11, text: "11" },
                                { id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
                            ]
                        }
                    ]
                }]
            });
        });
        // function that gathers IDs of checked nodes
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    getParentIds(nodes[i], checkedNodes);
                    checkedNodes.push(nodes[i].id);
                }

                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }

        function getParentIds(node, checkedNodes) {
            if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
                getParentIds(node.parent().parent(), checkedNodes);
                checkedNodes.push(node.parent().parent().id);
            }
        }

        // show checked node IDs on datasource change
        function onCheck() {
            var checkedNodes = [],
                treeView = $("#treeview").data("kendoTreeView"),
                message;

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            if (checkedNodes.length > 0) {
                message = "IDs of checked nodes: " + checkedNodes.join(",");
            } else {
                message = "No nodes checked.";
            }

            $("#result").html(message);
        }
    </script>
</body>
</html>


贾耶什·戈亚尼
未检查任何节点
$（文档）.ready（函数（）{
$（“#treeview”）.kendoTreeView({
复选框：{
孩子们：是的
},
检查：onCheck，
数据源：[{
id:1，文本：“1”，展开：true，项目：[
{
id:2，文本：“2”，扩展：true，项目：[
{id:3，文本：“3”}，
{id:4，文本：“4”}，
{id:5，文本：“5”}
]
},
{
id:6，文本：“6”，扩展：true，项目：[
{id:7，文本：“7”}，
{id:8，文本：“8”}，
]
},
{
id:9，文本：“9”，扩展：true，项目：[
{id:10，文本：“10”}，
{id:11，文本：“11”}，
{id:12，文本：“12”，扩展：true，条目：[{id:13，文本：“13”，扩展：true，条目：[{id:14，文本：“14”}，{id:15，文本：“15”}]}
]
}
]
}]
});
});
//函数，用于收集选中节点的ID
函数checkedNodeId（节点，checkedNodes）{
对于（var i=0；i0）{
message=“选中节点的ID:”+checkedNodes.join（“，”）；
}否则{
message=“未检查任何节点
var parentNode = treeView.select().parentNode();
while (parentNode) {
    //Add your parent logic here
    //...

    parentNode = parent.parentNode();
}