简体   繁体   English

使用 OData 模型在间隔时间内更改表格的单元格

[英]Change the cells of a table in an interval time using OData model

I have this code and I need my table to show the first 10 patients and, after 10 seconds, show the next 10 without touching any button (automatically).我有这个代码,我需要我的表格显示前 10 名患者,并在 10 秒后显示接下来的 10 名患者,而无需触摸任何按钮(自动)。

I'm looking for something similar to this: https://embed.plnkr.co/ioh85m5OtPmcvPHyl3Bg/我正在寻找类似的东西: https ://embed.plnkr.co/ioh85m5OtPmcvPHyl3Bg/

But with an OData model (as specified on my view and controller).但是使用 OData 模型(在我的视图和控制器上指定)。

This is my view:这是我的看法:

<Table id="tablaPacientes" items="{/EspCoSet}">
  <columns>
    <!-- ... -->
  </columns>
  <ColumnListItem>
    <ObjectIdentifier title="{Bett}" />
    <!-- ... -->
  </ColumnListItem>
</Table>

This is my controller:这是我的控制器:

onInit: function () {
  var oModel = this.getOwnerComponent().getModel("zctv");
  this.getView().setModel(oModel);
},

onBeforeRendering: function () { // method to get the local IP because I need it for the OData
  var ipAddress;
  var RTCPeerConnection = window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  var self = this;

  function grepSDP (sdp) {
    var ip = /(192\.168\.(0|\d{0,3})\.(0|\d{0,3}))/i;
    sdp.split('\r\n').forEach(function (line) {
      if (line.match(ip)) {
        ipAddress = line.match(ip)[0];
        self.setIp(ipAddress);
      }
    });
  }

  if (RTCPeerConnection) {
    (function () {
      var rtc = new RTCPeerConnection({
        iceServers: []
      });
      rtc.createDataChannel('', {
        reliable: false
      });
      rtc.onicecandidate = function (evt) {
        if (evt.candidate) {
          grepSDP(evt.candidate.candidate);
        }
      };
      rtc.createOffer(function (offerDesc) {
        rtc.setLocalDescription(offerDesc);
      }, function (e) {
        console.log("Failed to get Ip address");
      });
    })();
  }
},

setIp: function (ip) {
  this.getView().byId("planta").bindElement({
    path: "/CenTVSet('" + ip + "')"
  });
  var oModel = this.getView().getModel();
  var that = this;
  oModel.read("/CenTVSet('" + ip + "')", {
    success: function (oData, oRes) {
      var einri = oData.Einri;
      var orgpf = oData.Orgpf;
      var oTable = that.getView().byId("tablaPacientes");
      var oBinding = oTable.getBinding("items");
      var aFilters = [];
      var filterO = new Filter("Orgna", sap.ui.model.FilterOperator.EQ, orgpf);
      aFilters.push(filterO);
      var filterE = new Filter("Einri", sap.ui.model.FilterOperator.EQ, einri);
      aFilters.push(filterE);
      oBinding.filter(aFilters);
    }
  });
}

I searched some functions like IntervalTrigger but I really don't know how can I use it for this example.我搜索了一些像IntervalTrigger这样的函数,但我真的不知道如何在这个例子中使用它。

  1. You could bind you items using bindItems, pass skip,top parameters and wrap the whole thing in a setInterval您可以使用 bindItems 绑定您的项目,传递 skip、top 参数并将整个事物包装在 setInterval 中
var iSkip = 0;
var iTop = 10;
setInterval(function() {

    table.bindItems("/EspCoSet", {
        urlParameters: {
            "$skip": iSkip.toString() // Get first 10 entries
            "$top": iTop.toString()
        },
        success: fuction (oData) {
            iSkip = iTop; // Update iSkip and iTop to get the next set
            iTop+= 10;
        }
        ...
    }, 10000); // Each 10 seconds
)

  1. Almost the same thing, just use oModel.read to read the entities into you viewModel.allEntities, bind your table to the viewModel.shownEntities and use a setInterval to get the next 10 from allEntities to update shownEntities.几乎相同的事情,只需使用 oModel.read 将实体读入 viewModel.allEntities,将表绑定到 viewModel.shownEntities 并使用 setInterval 从 allEntities 获取下一个 10 以更新显示实体。

Here are some small samples:以下是一些小样本:

 startList: function(listBase, $skip, $top, restInfo) { let startIndex = $skip; let length = $top; let totalSize; (function repeat(that) { const bindingInfo = Object.assign({ startIndex, length }, restInfo); listBase.bindItems(bindingInfo); listBase.data("repeater", event => { totalSize = event.getParameter("total"); // $count value startIndex += $top; startIndex = startIndex < totalSize ? startIndex : 0; setTimeout(() => repeat(that), 2000); }).attachEventOnce("updateFinished", listBase.data("repeater"), that); })(this); }, stopList: function(listBase) { listBase.detachEvent("updateFinished", listBase.data("repeater"), this); },

The samples make use of startIndex and length in the list binding info which translates to $skip and $top system queries of the entity request URL.示例在列表绑定信息中使用startIndexlength ,这些信息转换为实体请求 URL 的$skip$top系统查询。 Ie appending those system queries to the request URL (eg https://<host>/<service>/<EntitySet>?$skip=3&$top=3 ), should return the correct set of entities like this .即将这些系统查询附加到请求 URL(例如https://<host>/<service>/<EntitySet>?$skip=3&$top=3 )应该返回正确的实体集, 如 this

Additional options for the list binding info can be found in the UI5 documentation as I explained here .列表绑定信息的其他选项可以在 UI5 文档中找到,正如我在此处解释的那样。

JavaScript part JavaScript 部分

The interval is implemented with an IIFE (Immediately Invoked Function Expression) in combination with setTimeout instead of setInterval .间隔是使用 IIFE(立即调用函数表达式)结合setTimeout而不是setInterval来实现的。

set Interval has the following disadvantages: set Interval有以下缺点:

  • The callback is not immediately invoked.不会立即调用回调。 You'd have to wait 10 seconds first to trigger the 1st callback.您必须先等待 10 秒才能触发第一次回调。
  • Does not wait for the data response to arrive.不等待数据响应到达。 This may cause skipping a batch or showing it for a too short period of time because the delay simply continues regardless of the server response.这可能会导致跳过一个批次或显示它的时间太短,因为无论服务器响应如何,延迟都会继续。

set Timeout instead offers a better control when the next batch should be requested. set Timeout反而提供了更好的控制何时应该请求下一批。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM