使用材质和角度构建带有复选框的树视图

Question

我有这个代码：

const TREE_DATA_JSON = {
idManager: 1,
label: 'Manager',
descendants: [
    {
        idManager: 2,
        label: 'Des 1',
        areaManagers: [
            {
                idManager: 3,
                label: 'Manager 1'
            },
            {
                idManager: 4,
                label: 'Manager 2'
            },
        ]
    }
]

};

@Injectable()
export class ChecklistDatabase {
dataChange = new BehaviorSubject<TodoItemNode[]>([]);

get data(): TodoItemNode[] { return this.dataChange.value; }

constructor() {
    this.initialize();
}

initialize() {
    // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
    //     file node as children.
    const data = this.buildFileTree(TREE_DATA_JSON, 0);

    // Notify the change.
    this.dataChange.next(data);
}

/**
 * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
 * The return value is the list of `TodoItemNode`.
 */
buildFileTree(obj: object, level: number): TodoItemNode[] {
    return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
        const value = obj[key];
        const node = new TodoItemNode();
        node.item = key;

        if (value != null) {
            if (typeof value === 'object') {
                node.children = this.buildFileTree(value, level + 1);
            } else {
                node.item = value;
            }
        }

        return accumulator.concat(node);
    }, []);
}

} 但我有这样的树视图：

您知道如何修改 buildFileTree 吗？我得到的树：https://stackblitz.com/angular/gabkadkvybq?file=app%2Ftree-checklist-example.ts.

提前感谢您的留言，对不起我的英语

我想展示这样的东西：

• 经理
  • 设计1
    • 经理 1
    • 经理 2

我的堆栈闪电战：https://stackblitz.com/edit/angular-ivy-xdflat

Answer 1

此解决方案假定当您选择父级时，您也自动希望选择其每个后代。如果您想更改此行为以在检查父级后简单地 显示 后代机器人实际上不会自动检查后代，请告诉我，我可以进行更改。这是一个相当小的变化。

我还在此代码中添加了一个事件侦听器，当取消选中其可见性所需的相关祖先时，它会自动取消选中所有复选框。运行上面的 sn-p 来查看它的实际效果。

const form = document.querySelector('form');
const TREE_DATA_JSON = [{
  idManager: 1,
  label: 'Manager',
  descendants: [{
    idManager: 2,
    label: 'Des 1',
    areaManagers: [{
        idManager: 3,
        label: 'Manager 1'
      }, {
        idManager: 4,
        label: 'Manager 2'
      },
    ]
  }]
}];

function buildTree(form, arr) {
  function fetchUniqueArr(obj) { return obj[Object.keys(obj).filter(key => !['idManager', 'label'].includes(key))]; }
  function buildTreeHTML(arr, nested = false) {
    return arr.map((field,i) => `${i?'<br>':''}<input id="field-${field.idManager}" type="checkbox"><label for="field-${field.idManager}">${field.label}</label>` + (Object.keys(field).length === 3 ? `<br><div class="nested-fields">${buildTreeHTML(fetchUniqueArr(field), true)}</div>` : '')).join('');
  }
  form.insertAdjacentHTML('beforeend', buildTreeHTML(arr));
}

document.addEventListener('change', e => e.target?.matches('form input[type="checkbox"]') && e.target.nextElementSibling?.nextElementSibling?.nextElementSibling?.matches('.nested-fields') && e.target.nextElementSibling.nextElementSibling.nextElementSibling.querySelectorAll('input[type="checkbox"]').forEach(field => field.checked = e.target.checked));

buildTree(form, TREE_DATA_JSON);

body {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 500;
}
form, .nested-fields {
  display: block;
}
.nested-fields {
  padding-left: 20px;
}
input:not(:checked) + label + br + .nested-fields {
  display: none;
}

<form></form>

如果您希望支持“不确定”复选框值，即当仅选中其部分子级时，父级处于“半选中”状态，则 HTML/CSS/JS 本身不支持该功能，但有周围有几个图书馆可以帮助您实现这一目标。有关不确定复选框列表的进一步阅读和示例，请查看 Chris Coyier 撰写的这篇 CSS-Tricks 文章，Indeterminate Checkboxes