用Javascript更改Kendo TreeView节点名称-我不'I don’我不知道怎么做

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

本文关键字：don 我不知道 我不 Kendo 更改 Javascript TreeView 节点      更新时间：2023-09-26

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

  1. 我知道如何使用javascript添加新的父节点

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

  2. 我知道如何在文本框中显示所选节点

     $("#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 + ')');
}

但是如何更改树视图选定的节点文本？

更新：

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

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

相反，有更好的解决方案取决于你对数据的了解，那就是：

  1. 数据源（您需要能够访问数据源以利用Datasource.get（）和set（））
  2. 记录Id（如果知道Id，可以使用datasource.get（Id）从数据源获取数据）
  3. 记录uid（如果没有，可以使用uid属性查看它们try-inspect元素）

以下示例的说明：

  1. 展开所有节点
  2. 选择任意节点
  3. 类型名称替换为
  4. 点击"更改名称"按钮
  5. 要查看数据源的更新，请点击"检查数据源"按钮并打开控制台，然后在那里进行搜索

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

相关文章：