Question

这里的复选框是绘制到每个节点的左上角。如何更改其样式，使复选框的大小略小，并与标签的中间对齐。基本上什么是改变treeview及其元素的样式的最佳方法。如果我想更改标签的字体呢？

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

Answer 1

将.k-checkbox-label:before类定义的属性覆盖为：

.k-checkbox-label:before {
    top: 6px;
    left: 4px;
    width: 12px;
    height: 12px;
    line-height: 12px;
}

Demo

更改kendo treeview复选框的样式

1 个答案: