我正在使用带有分层数据的CheckboxFormatter
插件。问题是,如果我检查一个折叠的组然后展开它,默认情况下不会选择子行(不应用selectedCellCssClass
)。我对使用SlickGrid很陌生。但这就是我假设控件应该流动的方式:
- 使用复选框格式化程序时,必须有一个与每一行关联的"隐藏"属性。单击该复选框只需将此属性切换为 true/false。
- 单击复选框应引发一个可以覆盖的 onClick/onChecked 事件。
- 在这种情况下,可以检查选中的行是否有子项,如果是,则在子项上设置"隐藏"属性。
- 对选中的行应用 css。
如果有人能指出我使用的特定事件和属性,那将是一个很好的起点。此外,我提到的步骤只是一个猜测:D对实际过程的任何帮助将不胜感激。
谢谢!
我最终给出了自己的复选框实现,而没有使用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' };
}
};