Question

我正在尝试在下拉菜单中构建复选框树。我的意思是说，如果单击下拉按钮，应显示带有子分支的复选框树，用户可以根据需要单击任意数量的选项。我试图使用引导代码，包括类，即div class =＆＃34; dropdown＆＃34;，但它没有到位。以下是代码树的代码。请任何人帮助在下拉菜单栏中插入整个复选框树。

Here is the code:

 <!-- Bootstrap check-box tree -->
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/checkboxes">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

</head>
<body>  <!-- Checkbox selection -->
<div id="example">

    <div class="demo-section k-content">
        <div>
            <h4>Check nodes</h4>
            <div id="treeview"></div>
        </div>
        <div style="padding-top: 2em;">
            <h4>Status</h4>
            <p id="result">No nodes checked.</p>
        </div>
    </div>

    <script>
        $("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true
            },

            check: onCheck,

            dataSource: [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Page 1", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "Page a", spriteCssClass: "html" },
                            { id: 4, text: "Page b", spriteCssClass: "html" },
                            { id: 5, text: "Page c", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "Page 2", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "Page d", spriteCssClass: "image" },
                            { id: 8, text: "Page e", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Page 3", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "Page f", spriteCssClass: "pdf" },
                            { id: 11, text: "Page g", spriteCssClass: "pdf" },
                            { id: 12, text: "Page h", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
        });

        // function that gathers IDs of checked nodes
        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);
                }
            }
        }

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


</div>


</body>
</html>

下拉列表中的复选框树

0 个答案: