Question

在我的Kendo UI treelist中，我想捕获expand事件中当前展开的行，然后检查其子行是否为叶节点。如果它们是叶节点，我想删除font-weight: bold;样式属性。

以下是显示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;
                }
            };

这是我正在阅读的Kendo API文档。

提前谢谢，鲍勃

Answer 1

我还没有在doc中找到任何方法，我现在能想到的唯一方法是循环数据源并获取与扩展元素的父id匹配的所有子元素。然后你可以看看它是否是'hasChildren'属性。

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

Answer 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

Answer 3

如果您选择了树形图，则可以使用点击事件

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

kendo treelist扩展活动

3 个答案: