如何在jquery的kendo treeview / ui中只允许选择一项复选框？

问题描述 投票：0回答：2

我想在 jquery 的 kendo treeview / ui 中将复选框模式设置为单一。

但是jquery没有官方选项。我找到了扫描所有树视图并一一取消选中其他树视图的解决方案。但这给我带来了麻烦，因为我的树视图中有 3-4 个深度和超过 500 个项目。当我选择第二次时，大约需要 1-2 秒，并且所有树视图都会冻结一段时间。 这是我使用的虚拟解决方案的演示。但对于我实际的树视图来说并不顺利。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

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

</head>
<body>
    <div id="example">
    <div class="demo-section wide k-content">
        <div id="demo-section-title" class="treeview-flex">
            <div>
                <h3>
                    Select nodes, folders and drag them between the TreeViews
                </h3>
            </div>
        </div>
        <div class="treeview-flex">
            <div id="treeview-kendo"></div>
        </div>
        <div class="treeview-flex">
            <div>
                <h4>Drag and Drop</h4>
            </div>
        </div>
        <div class="treeview-flex">
            <div id="treeview-telerik"></div>
        </div>
    </div>
    <script id="treeview" type="text/kendo-ui-template">

        # if (!item.items && item.spriteCssClass) { #
        #: item.text #
        <span class='k-icon k-i-close kendo-icon'></span>
        # } else if(!item.items && !item.spriteCssClass) { #
        <span class="k-sprite pdf"></span>
        #: item.text #
        <span class='k-icon k-i-close telerik-icon'></span>
        # } else if (item.items && item.spriteCssClass){ #
        #: item.text #
        # } else { #
        <span class="k-sprite folder"></span>
        #: item.text #
        # } #
    </script>

    <script>
        function traverse(nodes, callback) {
        for (var i = 0; i < nodes.length; i++) {
          var node = nodes[i];
          var children = node.hasChildren && node.children.data();
          
          callback(node);
          
          if (children) {
            traverse(children, callback);
          }
        }
      }
      
      function onCheck(e) {
        var dataItem = this.dataItem(e.node);

        var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();

        traverse(rootNodes, function(node) {
          if (node != dataItem) {
            node.set("checked", false);
          }
        });
      }

$("#treeview-kendo").kendoTreeView({
            template: kendo.template($("#treeview").html()),
            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: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 8, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 9, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }],
            //dragAndDrop: true,
            checkboxes: {
                checkChildren: true
                                
            },
                        check: onCheck,
            loadOnDemand: true
        });

        
       
    </script>
    <style>
        @media screen and (max-width: 680px) {
            .treeview-flex {
                flex: auto !important;
                width: 100%;
            }
        }

        #demo-section-title h3 {
            margin-bottom: 2em;
            text-align: center;
        }

        .treeview-flex h4 {
            color: #656565;
            margin-bottom: 1em;
            text-align: center;
        }

        #demo-section-title {
            width: 100%;
            flex: auto;
        }

        .treeview-flex {
            flex: 1;
            -ms-flex: 1 0 auto;
        }

        .k-treeview {
            max-width: 240px;
            margin: 0 auto;
        }

        #treeview-kendo .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        #treeview-telerik .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .demo-section {
            margin-bottom: 5px;
            overflow: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .rootfolder {
            background-position: 0 0;
        }

        .folder {
            background-position: 0 -16px;
        }

        .pdf {
            background-position: 0 -32px;
        }

        .html {
            background-position: 0 -48px;
        }

        .image {
            background-position: 0 -64px;
        }

    </style>
</div>


    

</body>
</html>

Angular 有一个选项模式：“single”。 Angular 的 kendo ui 中树视图的单模式复选框

但我正在为 Jquery 寻找相同的 kendo ui。

kendo-ui
2个回答
1
投票

不需要手动遍历节点。您可以利用 JQuery 获取适当的选择器，并让它在 

check
事件（文档）中为您完成此操作。

基本上你要做的是：

  1. 处理
    check
    事件
  2. 通过选择树视图的 
    k-checkbox-wrapper
    类' 
    input
    3. 来获取输入
  3. 将 
    checked
    属性设置为 false
  4. 将被检查的节点设置回true

示例：

check: function(e) {
  $("#treeview .k-checkbox-wrapper input").prop("checked", false);
  $(e.node).find("input").prop("checked", true);
}

小提琴：https://dojo.telerik.com/ALEJetoD

0
投票
check: function(e) {
$("#treeview .k-checkbox-wrapper input").prop("checked", false)**.trigger("change");**
        $(e.node).find("input").prop("checked", true);
}

触发器更改将更新/管理剑道树视图的状态。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.