kendo ui的treeView节点点击事件修改和grid的配置的一点总结
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.
要不然编辑的时候,会出现很多问题,可以试试。
kendo ui的treeView节点点击事件修改和grid的配置的一点总结的更多相关文章
- Flutter中通过普通的点击事件修改TextFormField的值
import 'package:flutter/material.dart'; import 'package:zhongfa_apps/widget/public/PublicWidget.dart ...
- element ui的 el-dropdown-item标签点击事件
在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click( ...
- Kendo UI中TreeView 放入tabstrip中,大数据量时超过边框的解决方案。
参考http://www.kendoui.com/forums/ui/tabstrip/tabstip-with-treeview-treeview-breaking-out-of-tabstrip. ...
- Unity3D研究院之将UI的点击事件渗透下去(转)
转自 http://www.xuanyusong.com/archives/4241 处理UI还有3D模型的点击推荐使用UGUI的这套事件系统,因为使用起来比较简洁,不需要自己用代码来发送射线,并且可 ...
- Kendo UI for jQuery使用教程:方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI 初始化 Data 属性
初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决
Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决 http://blog.csdn.net/net_boy/archive/2009/11/05/477 ...
- jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
随机推荐
- 架构设计:前后端分离之Web前端架构设计
在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...
- java提高篇(七)-----关键字static
一. static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员 ...
- SQL Server 性能优化之——T-SQL 临时表、表变量、UNION
这次看一下临时表,表变量和Union命令方面是否可以被优化呢? 阅读导航 一.临时表和表变量 二.本次的另一个重头戏UNION 命令 一.临时表和表变量 很多数据库开发者使用临时表和表变量将代码分解成 ...
- [ACM_几何] F. 3D Triangles (三维三角行相交)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28235#problem/A 题目大意:给出三维空间两个三角形三个顶点,判断二者是否有公共 ...
- 【译】用jQuery 处理XML-- jQuery与XML
用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...
- 自已写的Json序列化方法,可以序列话对象的只读属性
/* * by zhangguozhan 2015/1/5 * P2B.Common.CJson.ConvertJson.ObjectToJson<SenderDomainModel>方法 ...
- svn import-纳入版本控制
转svn import-纳入版本控制 import: 将未纳入版本控制的文件或目录树提交到版本库.用法: import [PATH] URL 递归地提交 PATH 的副本至 URL. 如果省略 PA ...
- Objective-C实现发短信和接电话
发短信: [[UIApplication sharedApplication]openURL:[NSURL URLWithString:@"sms://10000"]]; 打电话: ...
- yar粗略使用记录
yar是鸟哥(laruence)开发的一个并行的RPC框架.据说sina weibo已经在大规模使用这个框架了.今天初步使用了下,觉得还是挺爽的一个工具. 什么情况适用这个工具呢? 比如一般你有个微博 ...
- Lua标准库- 模块(Modules)
Lua包库为lua提供简易的加载及创建模块的方法,由require.module方法及package表组成 1.module (name [, ···]) 功能:建立一个模块. module的处理流程 ...