将 Kendo TreeView 节点名称更改为 Javascript - 我不知道该怎么做

Question

我想编辑我 select

的父节点的名称

我知道如何添加一个新的父节点 javascript append

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

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

但是，我想 CHANGE Node Text

我正在谷歌搜索并查看 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 selected 节点文本？

更新：

我在 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 上我看到了更改。为什么？

Answer 1

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

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

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

以下示例的说明：

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

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

将 Kendo TreeView 节点名称更改为 Javascript - 我不知道该怎么做

Change a Kendo TreeView Node Name with Javascript - I don't see how to do this

javascript

jquery

kendo-ui

treeview

kendo-treeview