gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:19:49 24 4
gpt4 key购买 nike

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

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

    var selectedNode = treeview.select();
    treeview.append({ ReportGroupName: $("#addNodeText").val()
  2. 我知道如何在文本框中显示选定的节点

     $("#groupNameSelected").val(nodeName);

    -- 使用 select: onSelect,

  3. 调用

但是,我想更改节点文本

我在谷歌上搜索并查看 API,我想要一种干净的 javascript 或 jquery 方式来简单地更新 Treeview

我一直这样设置代码

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);
}

Treeview 数据不会发生数据更改,仅在 UI 上我看到更改。为什么?

最佳答案

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

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

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

以下示例的说明:

  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>

关于javascript - 使用 Javascript 更改 Kendo TreeView 节点名称 - 我不知道如何执行此操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36255542/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com