Флажки с иерархическими данными

Question

Я использую плагин CheckboxFormatter с иерархическими данными. Проблема в том, что если я проверю свернутую группу и затем разворачиваю ее, дочерние строки не будут выбраны по умолчанию (selectedCellCssClass не применяется). Я довольно новичок в использовании SlickGrid. Но так я полагаю, что контроль должен протекать:

1. Должен быть атрибут «скрытый», связанный с каждой строкой при использовании форматирования флажка. При щелчке по флажку было бы просто переключить этот атрибут на true/false.
2. Щелчок по флажку должен поднять событие onClick/onChecked, которое может быть отменено.
3. В случае, если вы можете проверить, имеет ли отмеченная строка дочерние элементы, если да, то установите атрибут «скрытый» для детей.
4. Применить css на проверочные строки.

Если кто-нибудь может указать мне на конкретные события, используемые атрибуты, которые будут служить отличной отправной точкой. Также шаги, которые я упомянул, - это всего лишь предположение: D Любая помощь по фактическому процессу будет очень оценена.

Спасибо!

Answer 1

В результате я получил свою собственную реализацию флажка без использования 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' }; 
     } 
};