Treeview의 재귀 적 확인란 선택 | Telerik MVC

Question

최근 더 큰 데이터 세트 (500-1000 + 노드)를 처리 할 때 Telerik Treeview component 및 재귀 선택과 관련된 문제가 발생했습니다. 작은 데이터 세트 (100-300 노드) 트 리뷰와 선택 방법으로

는 다음과 같이 (가 정상적으로) 작동 :

• 을 처음 - 모든 노드가 선택됩니다.

• 모든 노드를 선택하면 토글됩니다. 트 리뷰 및 선택을 처리 할 때 부모의 선택을 취소합니다 하나의 자식 노드 (및 조부모/최상위 노드) 내가 믿는 이러한 것들의 대부분

선택을 취소

은 매우 평범하다. 현재 사용중인 메소드는 가장 깨끗한 것이 아니며 선택 프로세스 중에 불필요한 양의 추가 이벤트를 호출합니다.

내가 현재 코드 (아래에서 사용 가능)를 뜯기 시작하기 전에 누군가가 이와 유사한 문제를 처리했는지 궁금했습니다.

기존 선택 코드 :

$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) { 

     var isChecked = $(e.target).is(':checked'); 
     var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView'); 
     var item = $(e.target).closest('.t-item'); 
     var checkboxes = item.find('.t-checkbox :checkbox'); 
     $.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); }); 
     var siblings = item.parent().find('> li .t-checkbox'); 
     var siblingsLength = siblings.length; 
     var checkedLength = siblings.find(':checked').length; 
     if (siblingsLength == checkedLength) { 
      var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox'); 
      var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox'); 
      parentCheckBox.attr('checked', true) 
      grandparentCheckBox.attr('checked', true) 
      treeView.checkboxClick(e, parentCheckBox) 
      treeView.checkboxClick(e, grandparentCheckBox) 
     } 
     else { 
      var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox'); 
      var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox'); 
      parentCheckBox.attr('checked', false) 
      grandparentCheckBox.attr('checked', false) 
      treeView.checkboxClick(e, parentCheckBox) 
      treeView.checkboxClick(e, grandparentCheckBox) 
     } 
    }); 

Answer 1

가 나는 경우에도 매우 큰 다루고, 나는 적어도 효과적으로 현재의 기능을합니다 기분이 더 빨리 기존의 솔루션보다 좋은 거래를 작동하는 솔루션을 발견 데이터 세트.

function TreeView_Checked(e) { 
    var current = $(e.item).find(':checkbox:eq(0)'); 
    //Check or uncheck all child nodes from this one 
    var children = $(e.item).find(':checkbox'); 
    current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked'); 
} 

상기 트 리뷰 선언 내의 다음 추가하여 구현된다 :

TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked")) 

을

는 I은 트 리뷰 내의 검사 이벤트에 화재 필요한 모든 자식의 선택을 처리하는 간단한 함수를 만들어

Answer 2

이 코드는 모든 하위 항목과 함께 상위 항목을 선택하거나 선택 취소합니다. 부모님을 원한다면 .closest (".t-item")

$(document).ready(function() { 
     $("#btnSelectChildren").click(function() { 
      nodeCheck(true); 
     }); 
     $("#btnDeselectChildren").click(function() { 
      nodeCheck(false); 
     }); 
    }); 

    function nodeCheck(isChecked) { 
     var treeView = $('#TreeView').data('tTreeView'); 
     var selected = $('#TreeView .t-state-selected'); 
     treeView.nodeCheck(selected, isChecked); 
     selected.closest('li').find(".t-item").each(function() { 
      treeView.nodeCheck($(this), isChecked); 
     }); 
    }