OJ-Table行分组和行选择类型复选框

发布于 2025-01-23 19:44:34 字数 262 浏览 3 评论 0 原文

我有以下要求。我只需要使用oracle-jet oj-table ：

在页面加载组织数据上加载了不同的角色雇员。需要将此数据绑定到OJ-Table，将行分组为员工角色（例如经理，人力资源等）
应在第一列中使用复选框启用行选择。单身的＆amp;需要多个选择。
组标头行还应具有复选框，选择哪个选择该组中的所有员工。

示例代码或示例或任何参考链接是高度应用的。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

古镇旧梦 2025-01-30 19:44:34

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 inds = self获得所选ID。 SelectedIDS（）; 。

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

每行的一个复选框，具有相同的名称（示例中的 selectedids ），并且每个复选框都具有代表实体的ID通过那行；
列标题中的一个复选框，该复选框在ViewModel中具有标志为可观察到的boolean＆gt; ，订阅其值并使用上述名称更新所有复选框的值（ selecteds selectedIds ）；
一种选择这些检查的复选框并在需要时检索其ID的方法。

编辑：
这里有一个

There are plenty of example in Oracle JET cookbook on how to bind data to an oj-table.

For checking one/all rows, here is one way to do it:

View:

<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>

Model:

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));
}

If you have a button or something, you can then have a click callback where you can have your selected IDs by const ids = self.selectedIDs();.

Note that there are probably better ways to do this, but, in summary:

One checkbox for each row, with the same name (selectedIds in the example) and each of them having the ID of the entity represented by that row;
One checkbox in column header, which has a flag in the ViewModel as Observable<boolean>, subscribe to its value and update the value of all checkboxes with the above name (selectedIds);
One method to select those checked checkboxes and retrieve their IDs when needed.

EDIT:
There is a Cookbook example for (multi)selection, which is waaaaay easier than my hacky approach.