Magento 2:显示加载器，而Ajax调用列行操作?

Question

Grid xml 列：

<column name='actions' class='MyTestUiComponentListingColumnsFeedsAdvancedActions'> 
<argument name='data' xsi:type='array'> 
<item name='config' xsi:type='array'>
<item name='component' xsi:type='string'>My_Test/js/grid/columns/actions</item> 
<item name='dataType' xsi:type='string'>text</item> 
<item name='label' xsi:type='string' translate='true'>Actions</item> 
<item name='sortOrder' xsi:type='number'>90</item> 
</item>
</argument>
</column>

操作.js

define(
[
'jquery',
'underscore',
'mageUtils',
'uiRegistry',
'Magento_Ui/js/grid/columns/actions',
'Magento_Ui/js/modal/confirm'
], function ($, _, utils, registry, Column, confirm) {
'use strict';
return Column.extend(
{
/**
* Applies specified action.
*
* @param   {String} actionIndex - Actions' identifier.
* @param   {Number} rowIndex - Index of a row.
* @returns {ActionsColumn} Chainable.
*/
applyAction: function (actionIndex, rowIndex) {
var action = this.getAction(rowIndex, actionIndex),
callback = this._getCallback(action);
if (action.confirm) {
this._confirm(action, callback);
} else if (action.popup) {
this._popup(action, callback);
} else {
callback();
}
return this;
},

_popup: function (action, callback) {
var popupData = action.popup;
var dataType = popupData.type;
//Start loader
var body = $('body').loader();
body.loader('show');
if (popupData.file !== undefined && popupData.file !== '') {
$.ajax(
{
url: popupData.file,
async: false,
dataType: "text",
type: 'GET',
showLoader: true, //use for display loader
success: function (data) {
popupData.message = data;
}
}
);
}
//Stop loader
body.loader('hide');
},
});

使用showLoader: true和var body = $('body').loader(); body.loader('show');但在 ajax 请求时无法启动加载程序。

需要一种替代方法来在 ajax 调用期间启动加载程序。

Answer 1

我遇到了同样的问题。就我而言，我需要加载'jquery/ui'依赖项。

define(
[
'jquery',
...
'jquery/ui'

Answer 2

请查看以下代码，这可能会有所帮助。

define([
'jquery',
'Magento_Checkout/js/model/full-screen-loader',
], function ($,fullScreenLoader
) {
//Start Loader
fullScreenLoader.startLoader();
//Your AJax COde here
//Stop Loader
fullScreenLoader.stopLoader();
});

Answer 3

只需将loader依赖项添加到末尾：

define([
'jquery',
...
'loader'
]

showLoader: true和var body = $('body'); body.loader('hide');将开始工作。

Answer 4

尝试$('body').trigger('processStart')&$('body').trigger('processStop')