1

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

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

因此，我使用treeList.autoFitColumn(0). 每当我展开相同级别的行时，这会在每秒展开一次后自动调整（这不是我所期望的，因为展开相同级别意味着该列在第一次展开后确实增长了，但在第二次展开后没有增长。

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

4

1 回答 1

4

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

为了避免这种情况，您可以做的是“延迟”自动调整，直到当前代码完成运行之后。您可以通过使用setTimeout0 超时来执行此操作。这会将函数的执行放在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>

于 2018-10-11T11:52:03.907 回答