使用 OJET 创建动态 ojTable

Question

我有一个 JSON 数据，其中包含 n 行和 n 列。我需要从中创建一个 table 来显示带有 pagination.Is 的结果有可能创建一个 ojtable 具有来自 JSON 的动态行数和列数？

Answer 1

组件将根据 JSON 文件中的数据行数为您处理这些行。如果要限制开始时显示的行数，则设置 ojTable 的列选项可以传递一个对象，该对象将动态设置应显示的列。

像这样：

<table data-bind="ojComponent: {component: 'ojTable', 
        data: pagingDatasource,
        columns: dynamicCols}">
</table>

self.getCols = function () {
  var url = getUrl();
  $.getJSON(url).then(function (data) {
    var tempCols = [];
    for (var property in data.items[0]) {
      if (data.items[0].hasOwnProperty(property)) {
        tempCols.push({headerText: property, field: property});
      }
    }
    self.dynamicCols(tempCols);
    self.pagingDatasource(new oj.PagingTableDataSource(new oj.ArrayTableDataSource(data.items, {idAttribute: 'empno'})));
}

这是一个展示如何操作的 jsFiddle。您可以在两个 URL 之间添加（取消）注释，以查看基于 REST 端点返回的 JSON 生成的不同表。 https://jsfiddle.net/peppertech/mdp0xjh3/

使用 OJET 创建动态 ojTable

Creating a Dynamic ojTable Using OJET

oracle-jet