Kendo TreeList - 添加和更新行

Question

我正在使用 Kendo TreeList 来显示分层数据。应用程序允许用户向显示的数据添加新行，或编辑现有数据。我没有使用内联编辑。现在我通过这段代码添加新行：

treeList.dataSource.data().push(vm);

如果用户编辑了某行，它会在数据源中更新：

for (i = 0; i < dsData.length; i++) {
    if (dsData[i].get("TaskUid") === vm.get("TaskUid")) {
        dsData[i] = vm;
        var curId = vm.get("VisualId");
        vm.set("VisualId", curId);
        grid.dataSource.read();
        onDataBound();
    }
}

有一个副作用 - 在调用 dataSource.read() 时，新添加的项目从 TreeList 控件中消失。问题是 - 我应该如何在没有这种副作用的情况下在 treeList 中添加数据和刷新数据？

Answer 1

也许你应该考虑使用

dataSource.pushCreate 将新元素添加到数据源并且
dataSource.pushUpdate 编辑现有元素数据源

我复制了一些基本下拉列表的例子，并添加了 3 个按钮

第一个按钮将添加一个新的父节点
第二个按钮将编辑第一个父节点，即 jane smith
第三个按钮在 jane smith 上添加新的子节点

这样做：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Kendo UI Snippet</title>

  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>

<body>

  <!-- Define the HTML div that will hold the TreeList -->
  <div id="treelist"></div>
  <button id="new">Add new</button>
  <button id="editParent">Edit Jane Smith</button>
  <button id="addChild">Add child node to Jane Smith</button>
  <!-- Initialize the TreeList -->
  <script>
    $(document).ready(function() {
      $("#treelist").kendoTreeList({
        columns: [{
          field: "Name"
        }, {
          field: "Position"
        }],
        dataSource: {
          data: [{
            id: 1,
            parentId: null,
            Name: "Jane Smith",
            Position: "CEO"
          }, {
            id: 2,
            parentId: 1,
            Name: "Alex Sells",
            Position: "EVP Sales"
          }, {
            id: 3,
            parentId: 1,
            Name: "Bob Price",
            Position: "EVP Marketing"
          }]
        }
      });
    });

    $("#new").on("click", function() {
      var newElement = {
        id: 4,
        parentId: null,
        Name: "John Doe",
        Position: "HRD"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
    });

    $("#editParent").on("click", function() {
      var updatedElement = {
        id: 1,
        parentId: null,
        Name: "Scooby Doo",
        Position: "CEO Pet"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushUpdate(updatedElement);
    });

    $("#addChild").on("click", function() {
      var newElement = {
        id: 5,
        parentId: 1,
        Name: "Ricky Martin",
        Position: "EVP Legal"
      };
      $("#treelist").data("kendoTreeList").dataSource.pushCreate(newElement);
    });
  </script>
</body>

</html>

Kendo TreeList - 添加和更新行

Kendo TreeList - adding and updating rows

treelist

kendo-ui