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.
要不然編輯的時候,會出現很多問題,可以試試。
