Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

305
Visualizações
oj-table row grouping and row selection type checkbox

I have below requirement. I only need to use oracle-jet oj-table:

  • On page load organization data is loaded with different roles of employees. Need to bind this data to oj-table, with rows grouped on employee role (like manager, HR etc..)
  • Row selection should be enabled with checkbox in first column. Single & multiple selection needed.
  • Group header row should also have the checkbox, selecting which selects all the employees in that group.

Sample code or examples or any reference links are highly appriciated.

Thanks

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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.
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda