Treeview |中的遞歸複選框選擇Telerik MVC

我最近遇到了一個問題，處理Telerik Treeview component和處理遞歸選擇與處理更大的數據集（500-1000 +節點）時用複選框。最初Treeview |中的遞歸複選框選擇Telerik MVC

- 所有節點被選擇：

隨着較小的數據集（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) 
     } 
    });

來源

2012-07-17 Rion Williams

我發現了一個解決方案，我覺得至少會有效地爲現在的功能和工作的很大比現有解決方案快，即使有非常大的處理數據集。

我創建了一個簡單的函數，在樹視圖中於經過事件觸發和處理所有必要的孩子的選擇：

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的聲明中以下實現：

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

來源

2012-07-24 15:16:32

此代碼將選擇或取消選擇父母及其所有孩子。如果你想要祖父，你可以做.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); 
     }); 
    }

來源

2012-08-10 20:02:39

Treeview |中的遞歸複選框選擇Telerik MVC

回答

相關問題