2015-06-24 80 views
1

在我的Kendo UI treelist中,我想捕獲expand事件中當前展開的行,然後檢查其子行是否爲葉節點。 如果它們是葉節點,我想刪除樣式屬性font-weight: bold;kendo treelist展開事件

這是顯示treeOptions對象的片段。在這個expand事件中,很容易知道有子節點,但我怎麼知道這些子節點是否有孩子?即他們是葉節點?

var treeOptions = { 
 
       dataSource: ds, 
 
       columns: colDefs, 
 
       selectable: true,     
 
       height: 320, 
 
       change: function (e) {      
 
        var selectedRow = this.select(); 
 
        var row = this.dataItem(selectedRow);      
 
       }, 
 
       expand: function (e) { 
 
        var row = e.model; 
 
        var hasChildren = row.hasChildren; 
 
        var uid = row.uid; 
 
       } 
 
      };

這裏是劍道API文檔我讀通過。

在此先感謝, 鮑勃

回答

2

這是一種方式。獲取dataSource視圖並遍歷所有行。查找其提供的parentId等於當前行ID的那些和使用UID更新的DOM元素:

expand: function (e) { 
    var id = e.model.id; 
    if (!e.model.hasChildren) return; 

    var dataSourceView = $(this)[0].dataSource._view; 
    for (var i=0; i<dataSourceView.length; i++){ 
    var pid = dataSourceView[i].parentId; 

    var Children = dataSourceView[i].hasChildren; 
    if (pid == id && !Children){        
     var uid = dataSourceView[i].uid; 
     $('[data-uid="' + uid + '"]').css("font-weight", "bold"); 
    } 

    } 
} 

DEMO

+0

哦不,我忘了添加樣式:D,順便說一句不錯 –

+0

@machun,謝謝。加1也給你;看起來像我們有同樣的想法。 – ezanker

+0

好主意。我也在考慮dataSource,但我不想從頂端迭代。我希望能以某種方式解析我目前擴展的行的子項。 –

2

我還沒有發現任何方法,這樣做在doc要麼,我現在能想到的它的唯一途徑是通過數據源循環並獲得所有的子元素匹配展開元素的父ID。然後你可以看看它是否有'孩子'屬性。

expand: function(e) { 
    //get the widget datasource then loop to match the parent id of the expanded element 
    var data =this.dataSource.data(); 
    var children = []; 
    for(i=0; i<data.length; i++){ 
     if(data[i].parentId == e.model.id){ 
     children.push(data[i]); 
    } 
    } 


    //do chose which children you want to see its "hasChildrenStatus" 
    console.log(children[0].hasChildren); 
    console.log(children[1].hasChildren); 

    //do remove css by using it's uid to get the element 

} 

Kendo dojo example

0

,如果你做的樹形列表選擇,比你使用點擊事件

$("#treeList).on("click","tr[role='row']",function(e){ 
    var row = $(e.target).closest("tr[role='row']"); 
     })