Question

我有一个剑道树列表。折叠事件绑定到onCollapse()方法，扩展事件绑定到onExpand()方法。

换句话说：第一列包含级别。默认级别为0，并且默认扩展为默认级别，并显示（全部为子级）级别1的所有行。扩展1级行时，将显示其子级（级别2）。同时，该列必须拉伸一点（以显示下一个级别编号）。当扩展另一级1行时，该列不需要拉伸，但是当扩展2级行时，第一列必须再次拉伸以显示3级，依此类推。

因此，我使用treeList.autoFitColumn(0)。每当我扩展相同级别的行时，这都会导致在第二次扩展之后自动适应（这不是我期望的，因为扩展相同级别意味着列在第一次扩展后确实增长了，但在第二次扩展后没有增长。

另一种方法是手动更改宽度，但是找不到treeList.columns[0].setWidth(x)之类的东西。

Answer 1

您正在看到的行为正在发生，因为collapse和expand事件在内容的宽度实际改变之前就已触发。

您可以采取的措施是“延迟”自动调整，直到当前代码运行完毕。您可以通过将setTimeout设置为0来执行此操作。这会将函数的执行放在执行队列末尾的setTimeout内。

查看代码段以获取演示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    resizable: true,
    columns: [
      { field: "Name" },
      { field: "Text" }
    ],
    dataSource: [
      { id: 1, Name: "Name 1", Text: "Sample text 1", parentId: null },
      { id: 2, Name: "Name 2", Text: "Sample text 2", parentId: null },
      { id: 3, Name: "Name 3", Text: "Sample text 3", parentId: 1 },
      { id: 4, Name: "Very long name 4", Text: "Sample text 4", parentId: 2 }
    ],
    expand: function(e) {
      setTimeout(() => treeList.autoFitColumn(0), 0);
    },
    collapse: function(e) {
      setTimeout(() => treeList.autoFitColumn(0), 0);
    }
  });
  var treeList = $("#treeList").data("kendoTreeList");
  treeList.autoFitColumn(0);
</script>
</body>
</html>

如何在Expand和onCollapse上自动调整Kendo TreeList列？

1 个答案: