Question

有没有办法只为Kendo TreeView中的叶节点启用复选框？我能想到的一种方法是禁用所有节点的复选框，并在加载TreeView时启用没有子节点的节点。但是我无法为TreeView找到onload事件，这将是一项昂贵的操作。有什么办法吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      let data = {
         "Level1":[
            {
               "id":"idlevel1",
               "name":"Level1",
               "Level2":[
                  {
                     "id":"idlevel2",
                     "name":"Level2",
                     "Level3":[
                        {
                           "id":"id1level3",
                           "name":"Level3_1",
                           "Level4":[
                              {
                                 "id":"id1level4",
                                 "name":"1_level4"
                              },
                              {
                                 "id":"id2level4",
                                 "name":"2_level4"
                              }
                           ]
                        },
                        {
                           "id":"id2level3",
                           "name":"Level3_2",
                           "Level4":[
                              {
                                 "id":"id1level4",
                                 "name":"1_level4"
                              },
                              {
                                 "id":"id2level4",
                                 "name":"2_level4"
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      };

      $("#treeview").kendoTreeView({
        dataTextField: "name",
        dataSource: new kendo.data.HierarchicalDataSource({
          data: data,

          schema:{
                  data: "Level1",
                  model:{
                        children:{
                              schema:{
                                    data:"Level2",
                                    model:{
                                          children:{
                                                schema:{
                                                      data:"Level3",
                                                      model:{
                                                            children:{
                                                                  schema:{
                                                                        data:"Level4"
                                                                  }
                                                            }
                                                      }
                                                }
                                          }
                                    }
                              }
                        }
                  }
            } 
        }),
                  checkboxes:{
            checkedChildren: true
          },
      });
    });
  </script>
</head>
<body>
  <div id="treeview"></div>
</body>
</html>

根据@Shai，我们可以使用带有以下代码的复选框模板

 template: (e) => {
          return e.item.hasChildren ? '' : '<input type="checkbox" name="check' + e.item.id + '" value = "true" />';
        }

Answer 1

您可以使用复选框模板配置：

修改
使用OP的评论改进了解决方案。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script> <script> $(function() { let data = { "Level1":[ { "id":"idlevel1", "name":"Level1", "Level2":[ { "id":"idlevel2", "name":"Level2", "Level3":[ { "id":"id1level3", "name":"Level3_1", "Level4":[ { "id":"id1level4", "name":"1_level4" }, { "id":"id2level4", "name":"2_level4" } ] }, { "id":"id2level3", "name":"Level3_2", "Level4":[ { "id":"id1level4", "name":"1_level4" }, { "id":"id2level4", "name":"2_level4" } ] } ] } ] } ] }; $("#treeview").kendoTreeView({ dataTextField: "name", dataSource: new kendo.data.HierarchicalDataSource({ data: data, schema:{ data: "Level1", model:{ children:{ schema:{ data:"Level2", model:{ children:{ schema:{ data:"Level3", model:{ children:{ schema:{ data:"Level4" } } } } } } } } } } }), checkboxes:{ checkedChildren: true, template: (e) => { return e.item.hasChildren ? "" : "<input type='checkbox' name='check" + e.item.id + "' value='true' />"; } }, }); }); </script> </head> <body> <div id="treeview"></div> </body> </html>

仅为叶节点启用复选框

1 个答案: