kendo ui的treeView节点点击事件修改和grid的配置的一点总结

kendo-ui的treeView节点(node)点击时  能够触发一个select的事件(event),而且连续点击屡次相同节点,能够触发而且只能触发一次该事件。javascript

但是需求上须要实现:每次点击相同的节点,都要触发该select事件。java

这个需求,是和kendo的select事件相悖的。node

最开始想经过 外部手动触发select事件,可是发现并不能作到.json

后来作了以下配置:ui

 $("#treeview").kendoTreeView({
            dataSource: [
                treeData
            ],
            spriteCssClass: "rootfolder",
           //select: onSelect,    //注释select事件
              template: "<span onClick='onTreeViewNodeClick(this);'>#= item.text # </span>",
            //---
            //其余配置
            //---
})

 实现该需求主要配置是  template.   使用template为每一个节点用span包裹起来,并给一个onClick()  this

  这样一来  每次点击节点都会触发一个事件。spa

  可是为何不直接在onClick中调用以前已经写好的onSelect方法呢?blog

  缘由是 在触发select事件调用onSelect方法时,kendo会给咱们自定义方法一个e这个参数,e有不少功能,他知道当前点击节点全部的配置,好比咱们想获取当前点击节点的id,事件

那么就是e.node.id.ip

   然而在咱们没有用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.

要否则编辑的时候,会出现不少问题,能够试试。

相关文章
相关标签/搜索