TOGOUTECH

javascript - 无法在 Angular UI Grid 的可扩展行中保存行

coder 2024-12-20 原文

我正在尝试使用 row savingexpandable grid 相结合的功能.目标是能够独立于父行保存子网格行。

$scope.gridOptions = {
  expandableRowTemplate: 'components/grid/orderLineTemplate.html',
  expandableRowHeight: 150,

  expandableRowScope: {
    subGridVariable: 'subGridScopeVariable'

  },
  columnDefs: [
    {field: '_id'},
    {field: 'number'}
  ]
};

$http.get(ORDER_API)
  .success(function (data) {
    for (var i = 0; i < data.length; i++) {
      var rowScope = data[i];
      rowScope.subGridOptions = {
        appScopeProvider: $scope,
        columnDefs: [
          {field: 'amount'},
          {field: 'packageAmount'},
          {field: 'carrierAmount'}
        ],
        data: rowScope.orderLines,
        saveRow : $scope.saveRow
      }
    }
    $scope.gridOptions.data = data;
  });

$scope.gridOptions.onRegisterApi = function (gridApi) {
  $scope.gridApi = gridApi;
  gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};

$scope.saveRow = function (order) {
  var promise = $q.defer();
  $scope.gridApi.rowEdit.setSavePromise(order, promise.promise);
  if(order.number) {
    $http.put(ORDER_API + '/' + order._id, order).success(function () {
      promise.resolve();
    }).error(function () {
      promise.reject();
    });
  }

}
});

当我编辑父行中的字段时,正确调用了 saveRow 函数。当我编辑子行中的字段时,控制台中出现以下消息;
'引发 saveRow 事件时未返回 promise ,要么没有人在监听事件,要么事件处理程序未返回 promise '
永远不会为展开的子行调用 SaveRow。

最佳答案

您需要注册子网格 API。每个网格都有自己单独的 API 实例,您可以使用该实例与其通信:

rowScope.subGridOptions = {
  appScopeProvider: $scope,
  columnDefs: [
    {field: 'amount'},
    {field: 'packageAmount'},
    {field: 'carrierAmount'}
  ],
  data: rowScope.orderLines,
  saveRow : $scope.saveRow,
  onRegisterApi: function (gridApi) {
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow)
  }
}

这很接近,但是您使用 appScopeProvider 将我们的 Controller 作用域注入(inject)到子网格作用域中,您实际上并不需要这样做。相反,我们可以使 saveRow 通用并将其绑定(bind)到我们想要的 gridApi。 bind() 的第一个参数设置函数的 this。我们将只传递网格对象,但我们不需要它。绑定(bind)的第二个参数将是我们要传递的 gridApi。然后在 saveRow 定义中,我们知道我们将收到正确的 API 作为第一个参数,然后是 rowEntity 作为第二个参数。

// Main grid:
$scope.gridOptions.onRegisterApi = function(gridApi) {
  gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
};

// Subgrids:
onRegisterApi: function(gridApi) {
  gridApi.rowEdit.on.saveRow($scope, saveRow.bind(gridApi.grid, gridApi));
}

// Altered saveRow:
function saveRow(gridApi, rowEntity) {
  var promise = $q.defer();
  gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );

  // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
  $interval( function() {
    if (rowEntity.gender === 'male' ){
      promise.reject();
    } else {
      promise.resolve();
    }
  }, 3000, 1);
};

由于您的子网格可能有不同的保存功能,因此要记住的主要事情是使用 onRegisterApi

在它们上注册“saveRow”事件

这是一个演示上面代码的工作 plunker:http://plnkr.co/edit/52mp9C?p=preview

关于javascript - 无法在 Angular UI Grid 的可扩展行中保存行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29333209/

有关javascript - 无法在 Angular UI Grid 的可扩展行中保存行的更多相关文章

  1. javascript - 将支持 node.js 中的原始套接字,例如创建ping数据包? - 2

    将支持node.js中的原始套接字,例如创建ping数据包? 最佳答案 名为node-raw-socket的新模块使用nodejs为真正的原始套接字提供完美的解决方案。并且,为了创建ping(ICMP)数据包,同一开发人员还有一个基于node-raw-sockets的非常好的工作(使用它)解决方案:node-net-ping. 关于javascript-将支持node.js中的原始套接字,例如创建ping数据包?,我们在StackOverflow上找到一个类似的问题:

  2. javascript - 如何在链接点击上播放 mp3 - 2

    有一个简单的链接01.TheNameofTrack如何在用户点击链接时播放mp3文件?请帮助我找到一些简单有效的解决方案。谢谢。感谢您的帮助。我选择了这个解决方案http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/最适合我的情况。 最佳答案 使用HTML5Yourbrowserdoesnotsupporttheaudioelement.document.getElementById("link_id").addEventListener("cli

  3. javascript - 无法在 Express 中呈现 swig 模板 - 2

    所以我正在尝试使用consolidate.js渲染swigtemplates使用express,但是当我尝试从另一个模板“扩展”一个模板时出现以下错误:Error:ENOENT,nosuchfileordirectory'//one.html在我的app.js文件中,我将swig设置为我的渲染引擎(仅包括相关代码):varconsolidate=require('consolidate');app.set('viewengine','html');app.set('views',__dirname+'/views');app.engine('.html',consolidate.swi

  4. Javascript:构造函数中的回调 - 2

    我正在尝试为一个对象编写OOjavascript,该对象具有昂贵的初始化过程,完成后会回调一个函数。问题在于调用者需要在回调例程中使用同一对象的函数,而该对象尚不存在://ctorforfooobjectfunctionfoo(callback){//doslowinitializationhere..//callbackwhendonecallback();};foo.prototype=function(){return{//doStuffmethoddoStuff:function(){alert('stuffdone');}};}();//instantiatethefooob

  5. javascript - 如何将以毫秒为单位的日期转换为 iso 格式的 javascript? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIoutputanISO-8601formattedstringinJavascript?如果我有一个以毫秒为单位表示日期的整数,将其转换为iso格式的语法是什么?

  6. javascript - 在 javascript/DOM 中存储文本内容的最快和/或最干净的方法是什么? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我通常会看到版本1,但我从事的一些开源项目使用版本2,而我过去也使用过版本3。有没有人有更优雅的解决方案,也许是更具可扩展性的解决方案?版本1:vartext1='thisismyscript\'scontent';版本2:Thisismycontentvartext1=$('#text1').html();版本3:vartext1=$('#text1'

  7. javascript - 优化javascript代码以使用整数运算 - 2

    有一些算法可以“非常好”地解决问题,前提是“非常好”意味着最小化浮点算术运算的数量以支持整数算术。以Bresenham'slinealgorithm为例为了弄清楚要填充哪些像素以便在Canvas上画一条线:这个人几乎只用了一些简单的整数运算就使整个过程变得可行。这种事情在很多情况下显然是好的。但是,在javascript中需要大量float学运算的操作值得担心吗?我知道就语言规范而言,一切都几乎是十进制数。我想知道是否实际上尝试让事情尽可能接近整数是否值得——浏览器是否进行了优化以使其值得? 最佳答案 您可以在javascript中

  8. javascript - 使用 YoutubeAPI 播放 youtube 视频直到特定时间并暂停 - 2

    有没有办法使用YoutubeAPI播放视频直到视频中的某个点然后暂停? 最佳答案 我修改了YouTubePlayerAPIReferenceforiframeEmbeds中的代码在一定秒数后暂停播放。Demo代码通过等待onPlayerStateChange事件来工作。当事件触发时,它会检查事件以查看它是否是PLAYING事件。如果是,它会计算从当前时间(getCurrentTime()方法)到所需暂停点(硬编码为stopPlayAt变量)的剩余时间。它设置一个Javascript计时器来等待该差异,然后向API传递一个命令以暂停视

  9. javascript - Chosen.js - 是否可以限制所选项目的数量? - 2

    我有一个客户想要为用户提供从列表中最多选择5个附加选项的选项。我喜欢Chosen.js的概念,但如何限制选择?我想一种解决方案是使用onChange来计算所选的数字,然后禁用剩余的数字,但是有没有更简洁的解决方案? 最佳答案 Chosen提供了一个max_selected_options来允许你这样做:$(".chzn-select").chosen({max_selected_options:5}); 关于javascript-Chosen.js-是否可以限制所选项目的数量?,我们在S

  10. javascript - 定义 Javascript 对象时出现 IE8 错误? - 2

    我知道IE8很麻烦,但我从未见过它给我带来如此麻烦。我想要做的就是定义一个Javascript对象,它会导致错误,停止在页面上运行所有脚本。错误是“预期的标识符、字符串或数字”,表明问题发生在我在下面定义属性“类”的地方。我见过无数的脚本都是这样定义对象的,那么为什么IE8会吐槽这个呢?我将违规代码隔离到此。将它单独放在HTML页面的头部并在IE8中运行它会导致我看到的问题。varatts={class:"trigger"}; 最佳答案 通过用引号引起来定义使用适当的数据类型,"class"

随机推荐