且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Wijmo wj-tree-view angularjs删除等待$ http回调

更新时间:2023-01-23 17:58:22

从理论上讲,您不能在不调用线程睡眠调用的情况下要求异步​​事件在另一个异步操作中等待另一个异步操作.我还假设您不会赞成这一点.因此,这是我建议的在放置操作上调用http操作并取消放置操作的建议.同时,将您的事件args传递给http操作,并在您的http响应回调中手动引发相同的drop操作.这是可以做的小提琴:

Theoretically you cannot ask an async event to wait for another async operation inside another async operation without invoking a thread sleep call. I am also assuming you won't be in favour of that. So here is what I propose, on a drop operation, call an http operation and cancel the drop operation. Meanwhile pass your event args to the http operation and raise the same drop operation manually in your http response call back. Here is the fiddle that would do:

http://jsfiddle.net/gfgLwzss/

JS

  $scope.dragStartFunction=function(s, e) {
    if (e && e.node && e.node.hasChildren) {
    if (!document.getElementById('allowDraggingParentNodes').checked) {
      e.cancel = true; // prevent dragging parent nodes
      } else {
      e.node.isCollapsed = true; // collapse parent nodes when dragging
      }
    }
};

$scope.dragOverFunction= function(s, e) {
    if (!document.getElementById('allowDroppingIntoEmpty').checked &&
    !e.dropTarget.hasChildren &&
    e.position == wijmo.nav.DropPosition.Into) {
        e.position = wijmo.nav.DropPosition.Before;
      }
};

$scope.dropFunction=function(s,e){
if(e.cancel){
  return;
}
  var args=new wijmo.nav.TreeNodeDragDropEventArgs(e.dragSource,e.dropTarget,e.position);

  if(!e.again){
    args.again=true;
        //async call
     $http({
     url:"https://my.api.mockaroo.com/random_validate.json?key=8c9c7af0",
     cache:false,
     method:"GET",
     responseType:"JSON"
     }).then((response)=>{
        //check async validation
      //note that arrow function is used in then callback, use bind() method if you don't want to use arrow functions
        if(response.data.result === true){
        //validation success
        console.log("validation succeed\ncontinue with event");
        args.cancel=false;
      }
      else{
        //validation fails
        //stop event
        console.log("validation failed\ncancel event");
        args.cancel=true;
      }

        s.onDrop(args);
     }).catch(function(err){
        console.log(err);
     });
  }
  else{
    //do something that needs to be done in case of successful validation
    console.log("raised after asyn validation success ");
    var draggedItem=e.dragSource.dataItem;
    e.dragSource.itemsSource.splice(e.dragSource.index,1);
    e.dropTarget.itemsSource.splice(e.dropTarget.index,0,draggedItem);
    s.loadTree();
  }

  //cancel default event 
  e.cancel=true;

  }

HTML

<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">  
   <wj-tree-view items-source="data"
              display-member-path="header"
              child-items-path="'items'"
              allow-Dragging="true"
              drag-start="dragStartFunction(s,e)"
              drag-over="dragOverFunction(s,e)"
              drop="dropFunction(s,e)"
               >
  </wj-tree-view>
</div>