使用 Javascript 更改 Kendo TreeView 节点名称 - 我不知道该怎么做答案

【问题标题】：Change a Kendo TreeView Node Name with Javascript - I don't see how to do this使用 Javascript 更改 Kendo TreeView 节点名称 - 我不知道该怎么做
【发布时间】：2016-03-28 03:31:35
【问题描述】：

我想编辑我选择的父节点的名称

我知道如何使用 javascript 添加新父节点 append

var selectedNode = treeview.select();
treeview.append({ ReportGroupName: $("#addNodeText").val()

我知道如何在文本框中显示选定的节点
```
 $("#groupNameSelected").val(nodeName);
```
--用select: onSelect,调用

但是，我想CHANGE 节点文本

我在谷歌上搜索并查看 API，我想要一个干净的 javascript 或 jquery 方式来简单地更新树视图

我一直这样设置代码

var treeview = $("#treeview").data("kendoTreeView");
var selected = treeview.select(), item = treeview.dataItem(selected);

if (item) {
   console.log('Selected item: ' + item.ReportGroupName + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
}

但我该如何更改 Treeview 选定的节点文本？

更新：

我在 Telerik 论坛上找到了此代码。
它确实改变了文本，但是在我尝试写出 treeview 数据

 console.log(mydatasource.data());  // i expect this to change as adding nodes does update this ...



function refreshTreeNode(data)
{
    var currentText = $("#treeview").data("kendoTreeView").select().find('span.k-in').first().text();
    var node = $("#treeview").data("kendoTreeView").select().find('span.k-in').first();
    var nodeSpan = $("#treeview").data("kendoTreeView").select().find('span.k-in > span.k-sprite').first();
    node.text('');
    node.append(nodeSpan);
    node.append(data);
}

树视图数据没有发生数据更改，仅在 UI 上我看到了更改。为什么？

【问题讨论】：

标签： javascript jquery kendo-ui treeview kendo-treeview

【解决方案1】：

之所以只改变UI，是因为存储在数据源上的数据没有改变

相反，有更好的解决方案取决于您对数据的了解，即：

数据源（您需要能够访问数据源才能使用 datasource.get() 和 set()）
记录ID（如果知道ID，可以使用datasource.get(id)从数据源获取数据）
记录 uid（如果没有，可以使用 uid 属性查看它们尝试检查元素）

以下示例说明：

展开所有节点
选择任意节点
要替换的类型名称
点击“更改名称”按钮
要查看数据源上的更新点击检查数据源按钮并打开控制台，然后您可以在那里搜索它

<!DOCTYPE html>
<html>

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

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css" />

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

<body>

  <div id="treeview"></div>
  <input type="text" id="changeNameTo"></input>
  <button id="changeNameNow">Change Name</button>
  <button id="checkDataSource">Check Datasource Data on console</button>
  <script>
    var dataSource = new kendo.data.HierarchicalDataSource({
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Employees",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeId",
          hasChildren: "HasEmployees"
        }
      }
    });

    $("#treeview").kendoTreeView({
      dataSource: dataSource,
      dataTextField: "FullName"
    });


    $("#changeNameNow").on("click", function() {
      //get the data from datasource using id (if you know the id)
      //dataSource.get(2).set("FullName",$("#changeNameTo").val());

      //if you don't, try utilize data-uid
      dataSource.getByUid($(".k-state-selected").parent().parent().attr("data-uid")).set("FullName", $("#changeNameTo").val());
    });

    $("#checkDataSource").on("click", function() {
      console.log(dataSource.data());
    });
  </script>
</body>

</html>

【讨论】：

嘿，演示效果很好。但是在我的代码中我得到一个错误 getByUid ... Uncaught TypeError: treeview.getByUid is not a function
您没有使用数据源名称：从您的代码 console.log 我会尝试 mydatasource..getByUid($(".k-state-selected").parent().parent() .attr("data-uid")).set("FullName", $("#changeNameTo").val());不要使用你的“树视图”
谢谢大家，感谢您的帮助！