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元素 ...
随机推荐
- SQL Server 性能优化之——T-SQL TVF和标量函数
阅读导航 1. TVF(表-值行数Table-Valued Functions) a. 创建TVF b. 使用TVF的低性能T-SQL c. 使用临时表 ...
- 如何给开源的DUILib支持Accessibility
最近的工作是给开源的DUILib支持Accessibility, 一些经验记录并分享下. 微软的Accessibility其实Windows平台上一个挺重要的东西, 尽管在国内不受重视,但是如果你的软 ...
- [ACM_动态规划] 找零种类
问题描述:假设某国的硬币的面值有 1.5.10.50 元四种,输入一个金额 N (正整数,N<=1000),印出符合该金额的硬币组合有多少种. 问题分析: 1.5.10 元组合出 N 元的方法数 ...
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- Java基础之I/O和file
五.IO流1.IO流概述 (1)用来处理设备(硬盘,控制台,内存)间的数据. (2)java中对数据的操作都是通过流的方式. (3)java用于操作流的类都在io包中. (4)按照流操作的数据的类型不 ...
- css 常见时间轴的做法(————————————————时间轴——————————————————)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java线程:线程状态的转换
Java线程:线程状态的转换 一.线程状态 线程的状态转换是线程控制的基础.线程状态总的可分为五大状态:分别是生.死.可运行.运行.等待/阻塞.用一个图来描述如下: 1.新状态:线程对象已 ...
- C# 进制转换 (没有数值的长度限制)
曾经在大学时做过一个c的进制转换算法,那时由于技术的局限性,数值的大小受到限制(系统数据类型长度限制),多年以后,自己那台学习机陈旧后感觉要报废了,整理了一下里面的东西,偶尔在一个角落里发现了这个转换 ...
- 那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。
之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...
- Ajax在IE浏览器会出现中文乱码解决办法
在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. Ajax在IE浏览器会出现中文乱码的情况!解决办法如下 <script type="text/javascrip ...