kendo-ui的treeView节点(node)点击时 可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件。
可是需求上需要实现:每次点击相同的节点,都要触发该select事件。
这个需求,是和kendo的select事件相悖的。
最开始想通过 外部手动触发select事件,但是发现并不能做到.
后来做了如下配置:
$("#treeview").kendoTreeView({ dataSource: [ treeData ], spriteCssClass: "rootfolder", //select: onSelect, //注释select事件 template: "<span onClick='onTreeViewNodeClick(this);'>#= item.text # </span>", //--- //其他配置 //--- })
实现该需求主要配置是 template. 使用template为每个节点用span包裹起来,并给一个onClick()
这样一来 每次点击节点都会触发一个事件。
但是为什么不直接在onClick中调用之前已经写好的onSelect方法呢?
原因是 在触发select事件调用onSelect方法时,kendo会给我们自定义方法一个e这个参数,e有很多功能,他知道当前点击节点所有的配置,比如我们想获取当前点击节点的id,
那么就是e.node.id.
然而在我们没有用event时间,而选择使用js的onClick来调用自定义的onSelect方法时,kendo 就不会给我们e这个参数,kendo并不知道我们干了什么。
所以我需要另一个点击时的自定义方法,并且我给这个方法的参数是this. this在这里指的是什么呢?
就是当前我们所点击的节点的span元素;使用kendo的dataItem方法就能获取当前的Node了。
我们把当前的Node传给自定义的onSelect方法 也就自然而然的可以代替e参数了,因为当前Node就什么都知道嘛
function onTreeViewNodeClick(e){ var tree= $("#treeview").data("kendoTreeView"); // var node=tree.dataItem(e); //get current node and give onSelect as param onSelect(node,tree); }
最后要说的一个在使用kendo ui的grid需要注意的问题是:
当我们使用编辑的功能时 (我用的inline,其他的应该也一样,有待验证)
我们的kendo的核心功能dataSource 一定要指定唯一标识字段
schema: { model: { id: "ProductID", //这里是重点 fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } }
代码中已经标识出重点位置,这个唯一字段名称的配置,一定必须是id! 无论在我们json中叫什么名字,这里必须是id.
要不然编辑的时候,会出现很多问题,可以试试。
来自:https://blog.csdn.net/weixin_33995481/article/details/85773176
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统