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的配置的一点总结的更多相关文章

  1. Flutter中通过普通的点击事件修改TextFormField的值

    import 'package:flutter/material.dart'; import 'package:zhongfa_apps/widget/public/PublicWidget.dart ...

  2. element ui的 el-dropdown-item标签点击事件

    在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click( ...

  3. Kendo UI中TreeView 放入tabstrip中,大数据量时超过边框的解决方案。

    参考http://www.kendoui.com/forums/ui/tabstrip/tabstip-with-treeview-treeview-breaking-out-of-tabstrip. ...

  4. Unity3D研究院之将UI的点击事件渗透下去(转)

    转自 http://www.xuanyusong.com/archives/4241 处理UI还有3D模型的点击推荐使用UGUI的这套事件系统,因为使用起来比较简洁,不需要自己用代码来发送射线,并且可 ...

  5. Kendo UI for jQuery使用教程:方法和事件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  6. Kendo UI 初始化 Data 属性

    初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...

  7. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决

    Web下TreeView同一节点连续点击,只执行一次SelectedNodeChanged的解决 http://blog.csdn.net/net_boy/archive/2009/11/05/477 ...

  9. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

随机推荐

  1. HTML5文件上传插件 Huploadify V2.1发布

    月初发布了HUploadify2.0版本,增加了文件的断点续传功能,得到了不少朋友的好评.本着按照Uploadify原样复制的原则,本次在一些朋友的建议中采纳了几点,做了一次较小的改动,定为2.1版本 ...

  2. java提高篇(十三)-----equals()方法总结

    equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...

  3. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

  4. CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  5. .net版本发展历史

    最近装上了VS2013,发现好多新特性.新功能,公司办公还在使用VS2005.VS2008,不过用着也很顺手,在最新版Visual Studio中,微软加入了git源码管理工具,和之前的TFS大体上类 ...

  6. EF架构~为BulkInsert引入SET IDENTITY_INSERT ON功能

    回到目录 在设计表结构时,我们通常将不是很在乎表现的主键设计成自增长的,大数据量用bigint,一般地用int就可以了,int就是C#里的Int32,它最大可以存储到2147483647,21亿,基本 ...

  7. salesforce 零基础开发入门学习(七)PickList的value值获取

    之前介绍过PickList类型的声明以及赋值,但是如何取出呢?一个sObject对象可以理解为一条数据.通过sObject直接取恐怕很难做到,因为他只会显示一个值.这时候就要用到Schema命名空间中 ...

  8. iOS-数据持久化基础-JSON与XML数据解析

    解析的基本概念 所谓“解析”:从事先规定好的格式串中提取数据 解析的前提:提前约定好格式.数据提供方按照格式提供数据.数据获取方按照格式获取数据 iOS开发常见的解析:XML解析.JSON解析 一.X ...

  9. 深入理解CSS浮动

    × 目录 [1]定义 [2]特性 [3]表现 [4]重叠 前面的话 浮动最早的使用是出自<img src="#" align="right">,用于 ...

  10. Android实现下滑和上滑事件

    做过开发的对于下滑刷新与上滑加载都一定不陌生,因为我们在很多时候都会使用到,那对对于这个效果如何实现呢?相信难道过很多小伙伴,今天我就带领大家一道通过第三方组件快速完成上述效果的实现,保准每位小伙伴都 ...