具有分層數據的複選框

我正在使用帶有分層數據的CheckboxFormatter插件。問題是如果我檢查一個摺疊組，然後展開它，默認情況下未選擇子行（未應用selectedCellCssClass）。我是使用SlickGrid的新手。但這是我假設控件應該流動的方式：具有分層數據的複選框

使用複選框格式化程序時，必須存在與每行相關的「隱藏」屬性。點擊複選框將簡單地將此屬性切換爲真/假。
單擊複選框會引發onClick/onChecked事件，該事件可以被覆蓋。
在事件中，可以檢查查看的行是否有子女，如果是，則設置子女的「隱藏」屬性。
在選中的行上應用css。

如果任何人都可以指出特定的事件，使用的屬性，這將作爲一個很好的起點。此外，我提到的步驟只是一個猜測：D在實際過程中的任何幫助將不勝感激。

謝謝！

來源

2014-01-06 prthrokz

我和你有類似的情況（我試圖檢查組中的所有行）。我假設你正在使用組？你在組頭中有複選框嗎？如果你確實做了複選框切換？我也遇到過很多麻煩。 – eric

@eric，我現在已經找到了解決方法。我最終給出了自己的複選框實現，而不使用CheckboxFormatter。因此，無論何時我會檢查父級，我都會遞歸地爲所有子級設置一個屬性，然後重寫getItemmetadata以爲所有這些子級返回特定的css類。 – prthrokz

嗯，這聽起來很有趣。你願意爲它提供代碼嗎？我想檢查一下。 – eric

我最終沒有使用CheckboxFormatter給我自己的複選框實現。我爲我的數據模型添加了一個checked屬性，並且每當檢查一行時，我都會遞歸地更改所有受影響的行的狀態。

var 
    $target = $(event.target), 
    isChecked = $target.is(":checked"), 
    id = dataContext['id'], 
    item = dataView.getItemById(id), 
    children = getChildren(id), // helper method to get children for curr 
    parent = getParent(id); // helper method to get parent for curr 


dataContext['checked'] = isChecked; 
dataView.updateItem(dataContext['id'], dataContext); 

// loop through all children recursively 
while (children && children.length > 0) { 
     var item = children.shift(); 
     item.checked = isChecked; 
     dataView.updateItem(item.id, item); 
     var _children = getChildren(item.id); 
     if (_children && _children.length > 0) 
      children = [].slice.call(_children).concat(children); 
} 
// traverse up the hierarchy 
while (parent && parent.id != config.currentUser) { 
     if (!isChecked) { 
      parent.checked = isChecked 
      dataView.updateItem(parent.id, parent); 
     } else { 
      // if all siblings are checked, change state of parent. 
       var siblingsChecked = true; 
       $.each(getChildren(parent.id), function (index, item) { 
       if (!item.checked) 
        siblingsChecked = false; 
       }); 
       if (siblingsChecked) { 
        parent.checked = isChecked; 
        dataView.updateItem(parent.id, parent); 
       } 
     } 
      parent = dataView.getItemById(parent.parentId); 
    }

我只好再重寫getItemMetaData方法返回一個特定的CSS類所有選中的行。

dataView.getItemMetadata = function (index) { 
    var item = dataView.getItem(index); 
    if (item.checked === true) { 
     return { cssClasses: 'slick-row-selected' }; 
     } 
};

來源

2014-01-11 13:00:35 prthrokz

具有分層數據的複選框

回答

相關問題