Question

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

我知道如何添加一个新的父节点，其中javascript 追加

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

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

但是，我想更改节点文字

我在谷歌搜索并查看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论坛上找到了这段代码它确实会改变文本，但在我尝试编写树视图数据之后

 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）从数据源获取数据）
记录uid（如果没有，可以使用uid属性看看它们尝试检查元素）

以下示例说明：

展开所有节点
选择任何节点
类型名称替换为
点击“更改名称”按钮
查看数据源的更新点击Check Data Source按钮并打开控制台，然后你可以在那里搜索

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

使用Javascript更改Kendo TreeView节点名称 - 我不知道如何执行此操作

1 个答案: