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.

要否則編輯的時候,會出現不少問題,能夠試試。

相關文章
相關標籤/搜索