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. java提高篇(七)-----关键字static

    一. static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员 ...

  2. http学习笔记(四)——HTTP报文

    http报文是在http应用程序之间发送的数据块,这些数据块以一些文本形式的元信息. 请求报文从客户端流入服务器,向服务器请求数据,服务器响应请求,响应报文从服务器流出,回到客户端. 这就构成了一个事 ...

  3. Javascript中构造函数与new命令2

    典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...

  4. 在Windows下安装Memcached

    Windows下的Memcache安装: 需要运行命令行工具cmd 请以管理员权限运行 开始->附件->命令提示符,以管理员身份运行 假如当前C:\windows\system32,输入c ...

  5. Android开发学习之路-Android Design Support Library使用(CoordinatorLayout的使用)

    效果图: 上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig ...

  6. jquery 的队列queue

    使用示列代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. IOS开发之控件篇UITabBarControllor第二章 - 遮掩TableView问题

    在IOS7.0以后UITabBar 里面放入一个UITableView会出现一个问题,Table会被TabBar掩盖了,当移动到最后一项的时候,永远看不到,如下面的例子,总共是99项,但是只能显示到9 ...

  8. Java-集合=第五题 (Map)设计Account 对象如下: private long id; private double balance; private String password; 要求完善设计,使得该Account 对象能够自动分配id。 给定一个List 如下: List list = new ArrayList(); list.add(new A

    第五题 (Map)设计Account 对象如下: private long id; private double balance; private String password; 要求完善设计,使得 ...

  9. 去除IE6浏览器下获得焦点的元素的虚线框的两个小办法

    [1]onfocus = "this.blur()"//得到焦点时,失去焦点 e.g. <a href="#" onfocus = "this. ...

  10. Azure ARM (2) 概览

    <Windows Azure Platform 系列文章目录> http://files.cnblogs.com/files/threestone/AzureResourceManager ...