0

0

Kendo UI Grid 中通过 UID 获取数据项的正确方法

碧海醫心

碧海醫心

发布时间:2025-12-26 20:06:00

|

850人浏览过

|

来源于php中文网

原创

Kendo UI Grid 中通过 UID 获取数据项的正确方法

在 kendo ui grid 中,直接使用 `dataitem()` 方法传入 dom 元素(如 `tr[data-uid]`)可能返回 `null`,根本原因在于该方法要求传入的必须是 grid 内部渲染的真实行元素(且需确保 dom 已就绪、数据已绑定),而异步操作中常因时机不当或选择器偏差导致失败;推荐改用 `datasource.getbyuid()` 方法,它不依赖 dom 状态,更可靠、更高效。

Kendo UI 的 grid.dataItem(rowElement) 方法设计初衷是接收由 Grid 渲染生成的 <tr> DOM 元素(即 dataGrid.tbody.find("tr").first()[0] 这类真实存在的、已被 Grid 管理的行节点),并据此反查其绑定的数据项。但实践中,以下情况极易导致返回 null:

  • ✅ 行元素虽存在于 DOM,但尚未被 Grid 完全初始化(例如在 dataBound 事件前调用);
  • ❌ 使用 find("tr[data-uid='...']")[0] 获取的 DOM 节点,可能因 Grid 虚拟滚动、分页重绘或模板异步加载未被 Grid 当前实例识别为有效数据行
  • ⚠️ AJAX 回调中执行该逻辑时,Grid 数据源可能尚未完成同步刷新(如 read() 请求刚返回但 success 事件未触发完毕),此时 DOM 与 DataSource 状态不同步。

因此,最佳实践是绕过 DOM 层级,直接操作数据源(DataSource)。Kendo DataSource 提供了专用于 UID 查找的稳定 API:getByUid(uid)。每个数据项在绑定时会被自动赋予唯一 uid 属性(如 "b318f970-79ec-472e-818f-f0d5adb6b5f3"),该 UID 同时写入 <tr data-uid> 属性,但查询时应优先信任数据源而非 DOM。

✅ 正确用法示例:

Chromox
Chromox

Chromox是一款领先的AI在线生成平台,专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

下载
// 假设 Grid 初始化时 ID 为 "myGrid"
var grid = $("#myGrid").data("kendoGrid");
if (!grid) {
    console.warn("Grid instance not found");
    return;
}

var uidValue = "b318f970-79ec-472e-818f-f0d5adb6b5f3";
var dataItem = grid.dataSource.getByUid(uidValue);

if (dataItem) {
    console.log("Found data item:", dataItem);
    // 可安全访问字段,如 dataItem.name, dataItem.id 等
} else {
    console.warn("No data item found for UID:", uidValue);
}

? 注意事项:

  • getByUid() 不区分大小写,但需确保传入的 UID 字符串与数据项实际 uid 属性值完全一致(包括连字符和长度);
  • 该方法仅在数据项已加载到当前 DataSource(即已触发 read() 并成功响应)后才有效——若在 AJAX 成功回调中调用,请确认 dataSource 已更新(通常 dataBound 事件后保证就绪);
  • 若需同时获取对应 DOM 行,可结合 grid.tbody.find("tr[data-uid='" + uidValue + "']"),但切勿反向依赖此 DOM 查找结果调用 dataItem()
  • 对于服务器端分页场景,getByUid() 仅对当前页数据有效;如需跨页查找,请先调用 dataSource.fetch() 或 read() 加载目标数据。

总之,在异步上下文(如 AJAX success 回调)中操作 Grid 数据,应始终以 dataSource 为单一可信源,避免 DOM 与数据状态错位引发的 null 陷阱。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

258

2024.09.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号