带有分层数据的复选框
带有分层数据的复选框
提问于 2014-01-06 12:20:00
我正在使用CheckboxFormatter插件与分层数据。问题是，如果我检查一个折叠的组，然后展开它，默认情况下不会选择子行(不应用selectedCellCssClass)。我对使用SlickGrid非常陌生。但这就是我认为控件应该流动的方式：
- 当使用复选框格式化程序时，必须有与每一行相关联的“隐藏”属性。单击复选框只需将该属性切换到true/false。
- 单击复选框应引发一个可以重写的onClick/onChecked。
- 在这种情况下，可以检查检查行是否有子行，如果有，则在子行上设置“隐藏”属性。
- 在选中的行上应用css。
如果有人能告诉我具体的事件和使用的属性，那将是一个很好的起点。另外，我提到的步骤只是一个猜测:D对实际过程的任何帮助都将是非常感谢的。
谢谢!
回答 1
Stack Overflow用户
发布于 2014-01-11 13:00:35
最后，我没有使用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' };
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20949909
复制相关文章
相似问题
腾讯云开发者
