如何在 dx-scheduler 中使用 Angular Js ajax

Question

我正在使用 dx-scheduler 日历，并且我正在尝试对会议使用 crud 操作。我想知道如何使用 DevExpress.data.AspNet.createStore 中的函数而不是他们自己的 api 方法 - 这是他们 API 的一个示例：

        DevExpress.data.AspNet.createStore({
            key: "AppointmentId",
            loadUrl: url + "/Get",
            insertUrl: url + "/Post",
            updateUrl: url + "/Put",
            deleteUrl: url + "/Delete",
            onBeforeSend: function(method, ajaxOptions) {
                ajaxOptions.xhrFields = { withCredentials: true };
            }
        }),

我想实现这个：

        DevExpress.data.AspNet.createStore({
            key: "AppointmentId",
            loadUrl: function(){
             $http.get("/getApi").then(function(){
              // manipulate the fetched data
              })
             },
            insertUrl: : function(values){
             // manipulate the values before post
             $http.post("/getApi", values).then(function(){
              
             }),
           
            onBeforeSend: function(method, ajaxOptions) {
                ajaxOptions.xhrFields = { withCredentials: true };
            }
        }), 

Example.

Answer 1

根据link中的文档

loadUrl - 用于加载数据的 URL。我假设您应该在此处为您的 get api 传递 URL 字符串。 如果您的 get 请求需要参数，您可以使用 LoadParams Option 发送它们

loadParams - 应传递给 loadUrl 的附加参数。

并通过实现 onLoaded .. 来处理结果 onLoaded - 参考 CustomStore.onLoaded。

   $scope.schedulerOptions = {
    dataSource: DevExpress.data.AspNet.createStore({
        key: "AppointmentId",
   //    loadUrl: 'https://jsonplaceholder.typicode.com/posts',
      loadUrl: "https://jsonplaceholder.typicode.com/posts",
        insertUrl: url + "/Post",
        updateUrl: url + "/Put",
        deleteUrl: url + "/Delete",
        onBeforeSend: function(method, ajaxOptions) {
            ajaxOptions.xhrFields = { withCredentials: true };
        },
     onLoaded:function(result){
       console.log(result)
       var data = result;
        for (var i in data) {
    data[i].StartDate =  '2020-12-20T10:00:00Z';
    data[i].EndDate =  '2020-12-20T11:00:00Z';
  }
       return data;
      }
    }),
   // remoteFiltering: true,
    dateSerializationFormat: "yyyy-MM-ddTHH:mm:ssZ",
    views: ["day", "workWeek", "month"],
    currentView: "day",
    currentDate: new Date(),
    startDayHour: 9,
    endDayHour: 19,
    height: 600,
    textExpr: "title",
    startDateExpr: "StartDate",
    endDateExpr: "EndDate",
    allDayExpr: "AllDay"
};

get 请求的结果会打印在控制台的 onLoaded 函数中

您在此 json 中的示例中使用的数据 https://jsonplaceholder.typicode.com/posts

不包含 EndDate ，也许如果您将其修改为包含具有相同 dateSerializationFormat 的 Start Date 和 EndDate 它将起作用，我手动修改它们并且它起作用了，我还修改了 textExpr 以显示标题。

您的Example link 已修改

为了使用您自己的 Ajax 请求，您可以使用以下解决方法，在使用结果作为数据资源执行 Ajax 调用后初始化 schedulerOptions。 Example link html：

<div class="dx-viewport demo-container" ng-app="DemoApp" ng-controller="DemoController">
    <div dx-scheduler="schedulerOptions" ng-if=dataSet></div>
</div>

JS：

$scope.dataSet;
  
  var loadFromUrl = function () {
    $http.get('https://jsonplaceholder.typicode.com/posts')
    .then(function(result){
      $scope.dataSet = result.data;
      for (var i in $scope.dataSet) {
        $scope.dataSet[i].startDate =  '2020-12-20T10:00:00Z';
        $scope.dataSet[i].endDate =  '2020-12-20T11:00:00Z';
      }
      
    $scope.schedulerOptions = {
        dataSource: $scope.dataSet,
        dateSerializationFormat: "yyyy-MM-ddTHH:mm:ssZ",
        views: ["day", "workWeek", "month"],
        currentView: "day",
        currentDate: new Date(),
        startDayHour: 9,
        endDayHour: 19,
        height: 600,
        textExpr: "title",
        startDateExpr: "startDate",
        endDateExpr: "endDate",
        allDayExpr: "AllDay"
    };
      
    })
  };

  

  loadFromUrl();