I have below requirement. I only need to use oracle-jet oj-table:
Sample code or examples or any reference links are highly appriciated.
Thanks
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:
selectedIds in the example) and each of them having the ID of the entity represented by that row;Observable<boolean>, subscribe to its value and update the value of all checkboxes with the above name (selectedIds);