当我单击页面上方管理栏中的按钮时，我想在后端打开一个模式。在此模式中，需要显示客户网格 uiComponent。
uiComponent 通过 ajax 加载，但数据从未呈现。 当我单击“为其他客户复制”中的按钮时，将打开一个新的滑出模式。在网络选项卡中，需要解析的网格数据将通过 AJAX 获取。但响应永远不会添加到客户网格中，并且客户网格永远不会在模式中显示。我唯一看到的是在 ajax 请求网格数据期间的旋转器。
quote.js：这个文件句柄是模态的。
define([
'jquery',
'Magento_Ui/js/modal/modal',
'mage/url'
], ($, modal, urlBuilder) => {
return (config, element) => {
window.keepMultiModalWindow = true;
window.requestAQuoteExtender = {
modal: null,
duplicate: () => {
this.doRequest(
config.duplicateUrl,
'POST',
{
quote_id: config.quote_id
}
).done((response) => {
window.location.assign(response.redirect);
});
},
duplicateOtherCustomer() {
this.doRequest(config.duplicateOtherCustomerUrl)
.done((data, textStatus, transport) => {
const dataHtml = $(data);
this.openModal(dataHtml[1]);
})
},
openModal(data) {
if (this.modal) {
this.modal.html(
$(data).html()
).trigger('contentUpdated');
return;
}
var modalOptions = {
title: 'Choose customer',
modalClass: 'magento',
type: 'slide',
buttons: [{
text: $.mage.__('Close'),
class: 'action- scalable back',
click: () => {
this.closeModal(this);
}
}],
close: () => {
this.closeModal(this);
}
}
this.modal = $(data).modal(modalOptions);
this.modal.modal('openModal').trigger('contentUpdated');
},
closeModal(modal) {
$('body').trigger('processStop');
modal.closeModal();
},
doRequest: (url, method = 'GET', data = null) => {
const ajaxObj = {
url: url,
method: method,
data: data,
dataType: 'html',
showLoader: true
}
if (data !== null) {
ajaxObj.data = data;
}
return $.ajax(ajaxObj);
}
};
};
});
quote.phtml：此文件将添加到管理页面上，我可以在其中单击按钮打开模式。
<?php declare(strict_types=1);
use Magento\Backend\Block\Template;
/** @var Template $block */
?>
<script type="text/x-magento-init">
{
"#duplicate": {
"etalesRequestAQuoteExtender": {
"duplicateUrl": "<?= $block->getUrl('etales_quoteextender/quote/duplicate') ?>",
"duplicateOtherCustomerUrl": "<?= $block->getUrl('etales_quoteextender/quote/customergridui') ?>",
"quote_id": "<?= $this->getRequest()->getParam('quote_id') ?>"
}
}
}
</script>
Controller/Adminhtml/Quote/CustomerGridUi.php：此文件句柄是客户网格 uiComponent 的 ajax 请求。
<?php
declare(strict_types=1);
namespace Etales\RequestAQuoteExtender\Controller\Adminhtml\Quote;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\View\Result\Layout;
use Magento\Framework\View\Result\LayoutFactory;
class CustomerGridUi implements HttpGetActionInterface
{
public function __construct(
private readonly LayoutFactory $layoutFactory,
) {
}
public function execute()
{
/** @var Layout $layoutFactory */
return $this->layoutFactory->create();
}
}
view/adminhtml/layout/etales_quoteextender_quote_customergridui.xml：此文件插入上述控制器的uiComponent。
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<container name="content">
<uiComponent name="etales_requestaquoteextender_customer_grid" />
</container>
</body>
</page>
etales_requestaquoteextender_customer_grid.xml：这是使用的uiComponent。
<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">
etales_requestaquoteextender_customer_grid.etales_requestaquoteextender_customer_grid_data_source
</item>
</item>
</argument>
<settings>
<spinner>etales_requestaquoteextender_customer_grid_columns</spinner>
<deps>
<dep>etales_requestaquoteextender_customer_grid.etales_requestaquoteextender_customer_grid_data_source</dep>
</deps>
</settings>
<dataSource name="etales_requestaquoteextender_customer_grid_data_source" component="Magento_Ui/js/grid/provider">
<settings>
<updateUrl path="mui/index/render"/>
</settings>
<dataProvider name="etales_requestaquoteextender_customer_grid_data_source"
class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<settings>
<primaryFieldName>entity_id</primaryFieldName>
<requestFieldName>id</requestFieldName>
</settings>
</dataProvider>
</dataSource>
<listingToolbar name="listing_top">
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<filters name="listing_filters"/>
<paging name="listing_paging"/>
</listingToolbar>
<columns name="etales_requestaquoteextender_customer_grid_columns" class="Magento\Ui\Component\Listing\Columns">
<column name="entity_id" sortOrder="10">
<settings>
<filter>text</filter>
<label translate="true">ID</label>
</settings>
</column>
<column name="company" sortOrder="20">
<settings>
<filter>text</filter>
<label translate="true">Company</label>
</settings>
</column>
<column name="firstname" sortOrder="30">
<settings>
<filter>text</filter>
<label translate="true">Firstname</label>
</settings>
</column>
<column name="lastname" sortOrder="40">
<settings>
<filter>text</filter>
<label translate="true">Lastname</label>
</settings>
</column>
<column name="email" sortOrder="50">
<settings>
<filter>text</filter>
<label translate="true">E-mail address</label>
</settings>
</column>
</columns>
</listing>
di.xml 在此文件中，我为客户网格创建了集合。
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="etales_requestaquoteextender_customer_grid_data_source" xsi:type="string">
Etales\RequestAQuoteExtender\Model\ResourceModel\Customer\Grid\Collection
</item>
</argument>
</arguments>
</type>
<virtualType name="Etales\RequestAQuoteExtender\Model\ResourceModel\Customer\Grid\Collection"
type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">customer_entity</argument>
<argument name="resourceModel" xsi:type="string">Magento\Customer\Model\ResourceModel\Customer</argument>
</arguments>
</virtualType>
</config>
如果我通过要打开模式的页面的布局 xml 添加 uiComponent ，它将正确呈现在页面上。但是使用上面的代码，它只是不会在模式中渲染网格，但所有其他事情（例如获取网格数据等）都在工作。
任何人都可以指出我正确的方向或看到我做错了什么？
我已经解决了这个问题，我现在感觉真的很愚蠢，但我虽然添加修复程序可以帮助将来尝试实现相同类型的事情的其他人（模态，带有 html 和 javascript 的 ajax 请求作为响应）。
所以问题是我在加载网格的元素上缺少 .applyBinding() 方法。
define([
'jquery',
'Magento_Ui/js/modal/modal',
'mage/url'
], ($, modal, urlBuilder) => {
return (config, element) => {
window.keepMultiModalWindow = true;
window.requestAQuoteExtender = {
modal: null,
duplicate: () => {
this.doRequest(
config.duplicateUrl,
'POST',
{
quote_id: config.quote_id
}
).done((response) => {
window.location.assign(response.redirect);
});
},
duplicateOtherCustomer() {
this.doRequest(config.duplicateOtherCustomerUrl)
.done((data, textStatus, transport) => {
const dataHtml = $(data);
this.openModal(dataHtml[1]);
})
},
openModal(data) {
if (this.modal) {
this.modal.html(
$(data).html()
).applyBindings()
.trigger('contentUpdated');
return;
}
var modalOptions = {
title: 'Choose customer',
modalClass: 'magento',
type: 'slide',
buttons: [{
text: $.mage.__('Close'),
class: 'action- scalable back',
click: () => {
this.closeModal(this);
}
}],
close: () => {
this.closeModal(this);
}
}
this.modal = $(data).modal(modalOptions);
this.modal.modal('openModal')
.applyBindings()
.trigger('contentUpdated');
},
closeModal(modal) {
$('body').trigger('processStop');
modal.closeModal();
},
doRequest: (url, method = 'GET', data = null) => {
const ajaxObj = {
url: url,
method: method,
data: data,
dataType: 'html',
showLoader: true
}
if (data !== null) {
ajaxObj.data = data;
}
return $.ajax(ajaxObj);
}
};
};
});