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元素 ...
随机推荐
- HTML5文件上传插件 Huploadify V2.1发布
月初发布了HUploadify2.0版本,增加了文件的断点续传功能,得到了不少朋友的好评.本着按照Uploadify原样复制的原则,本次在一些朋友的建议中采纳了几点,做了一次较小的改动,定为2.1版本 ...
- java提高篇(十三)-----equals()方法总结
equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- .net版本发展历史
最近装上了VS2013,发现好多新特性.新功能,公司办公还在使用VS2005.VS2008,不过用着也很顺手,在最新版Visual Studio中,微软加入了git源码管理工具,和之前的TFS大体上类 ...
- EF架构~为BulkInsert引入SET IDENTITY_INSERT ON功能
回到目录 在设计表结构时,我们通常将不是很在乎表现的主键设计成自增长的,大数据量用bigint,一般地用int就可以了,int就是C#里的Int32,它最大可以存储到2147483647,21亿,基本 ...
- salesforce 零基础开发入门学习(七)PickList的value值获取
之前介绍过PickList类型的声明以及赋值,但是如何取出呢?一个sObject对象可以理解为一条数据.通过sObject直接取恐怕很难做到,因为他只会显示一个值.这时候就要用到Schema命名空间中 ...
- iOS-数据持久化基础-JSON与XML数据解析
解析的基本概念 所谓“解析”:从事先规定好的格式串中提取数据 解析的前提:提前约定好格式.数据提供方按照格式提供数据.数据获取方按照格式获取数据 iOS开发常见的解析:XML解析.JSON解析 一.X ...
- 深入理解CSS浮动
× 目录 [1]定义 [2]特性 [3]表现 [4]重叠 前面的话 浮动最早的使用是出自<img src="#" align="right">,用于 ...
- Android实现下滑和上滑事件
做过开发的对于下滑刷新与上滑加载都一定不陌生,因为我们在很多时候都会使用到,那对对于这个效果如何实现呢?相信难道过很多小伙伴,今天我就带领大家一道通过第三方组件快速完成上述效果的实现,保准每位小伙伴都 ...