oj-表行分组和行选择类型复选框

Question

我的要求低于要求。我只需要使用oracle-jet oj-table。

• 在页面加载组织数据时，会加载员工的不同角色。需要将这些数据绑定到oj表，并将行按雇员角色分组(如manager、HR等)
• 第一列中的复选框应启用行选择。需要单一和多个选择。
• 组标题行也应该有复选框，选择选择该组中所有员工的复选框。

示例代码或示例或任何参考链接都是非常有用的。

谢谢

Answer 1

甲骨文喷射食谱中有很多关于如何将数据绑定到oj-table的示例。

为了检查一行/所有行，以下是一种方法：

查看：

<oj-table data="[[ dataProvider ]]" columns='[{"headerText": "Check All", "headerTemplate": "headerTpl", "resizable": "enabled", "sortable": "disabled", "template": "checkTpl"}]'>
  <template slot="headerTpl" data-oj-as="cell">
    <input type="checkbox" data-bind="checked: bulkCheckFlag" />
  </template>
  <template slot="allactivechkbox" data-oj-as="cell">
    <input type="checkbox" name="selectedIds" data-bind="attr:{value:cell.row.ID, id:cell.row.ID}" />
  </template>
</οj-table>

型号：

class ViewModel {
  constructor() {
    const self = this;
    this.dataProvider = yourDataProviderSetup();
    this.bulkCheckFlag = ko.observable(false);
    this.bulkCheckFlag.subscribe((newValue) => {
      $("input[name='selectedIds']").prop("checked", newValue);
    }
    this.selectedIds = () => $("input[name='selectedIds']:checked").toArray().map((el) => el.id));
}

如果您有一个按钮或其他东西，那么您可以使用一个单击回调，在这里您可以通过const ids = self.selectedIDs();获得所选的If。

请注意，可能有更好的方法来做到这一点，但是，总之：

• 每个行都有一个复选框，名称相同(示例中为selectedIds)，每个行都具有由该行表示的实体的ID；
• 列标题中有一个复选框，在ViewModel中有一个标志作为Observable<boolean>，订阅它的值并用上面的名称(selectedIds)更新所有复选框的值；
• 一种方法，用于选择这些复选框并在需要时检索它们的ID。

编辑：有一个用于(多)选择的菜谱示例，这比我讨厌的方法容易得多。