그리드에 새 사용자 지정 열 추가...
이를 위해 샘플 모듈을 만들었습니다. 모듈은 아래 파일 구조를 갖게 됩니다.
app/code/Vendor/Module/registration.php
app/code/Vendor/Module/etc/module.xml
app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml
app/code/Vendor/Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js
'custom-column'을 사용자 지정하려면 app/design/adminhtml에 일부 파일을 추가해야 합니다.
app/design/adminhtml/Vendor/backend/Magento_Sales/layout/sales_order_index.xml
app/design/adminhtml/Vendor/backend/Magento_Sales/ui_component/sales_order_grid.xml
app/design/adminhtml/Vendor/backend/Magento_Sales/web/css/custom-column.css
그 부분에 대해 모두 알고 있듯이 모듈 생성을 설명하지 않습니다. 따라서 Vendor_Module/view/adminhtml/ui_component/sales_order_grid.xml과 같은 다른 기본 파일을 살펴보겠습니다.
Vendor_Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js
sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright (c)
* See COPYING.txt for license details.
*/
-->
<listing
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<column name="custom_column">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortable" xsi:type="boolean">false</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label"
xsi:type="string" translate="true">Custom Column</item>
</item>
</argument>
</column>
</columns>
</listing>
custom-column.js
/**
* Copyright (c)
* See COPYING.txt for license details.
*/
define([
'underscore',
'knockout',
'Magento_Ui/js/grid/columns/select'
], function (_, ko, Select) {
'use strict';
return Select.extend({
getFieldClass: function (row) {
var computed;
computed = ko.pureComputed(function () {
//ADD YOUR CODE SNIPPET HERE
}
}, this);
return computed;
}
});
});
이제 실제 시나리오를 살펴보겠습니다.
예: 아래 시나리오에 따라 '사용자 지정 열'에 '녹색'과 '노란색' 두 가지 색상을 표시합니다.
'총계'가 $50.00보다 크거나 같으면 '맞춤 열' 색상이 '녹색'이어야 합니다. 다른 색상은 '노란색'이어야 합니다.
이것을 어떻게 구현할 수 있습니까?
파일 편집: app/code/Vendor/Module/view/adminhtml/web/js/ui/grid/cells/custom-column.js
/**
* Copyright (c)
* See COPYING.txt for license details.
*/
define([
'underscore',
'knockout',
'Magento_Ui/js/grid/columns/select'
], function (_, ko, Select) {
'use strict';
return Select.extend({
getFieldClass: function (row) {
var computed;
computed = ko.pureComputed(function () {
var grandTotal = row['grand_total'].replace(/\$/g,'');
var customColCss = {
'custom-column-green': ko.observable(
grandTotal >= '50.00'?true:false
),
'custom-column-yellow': ko.observable(
grandTotal<'50.00'?true:false
)
}
return customColCss;
}, this);
return computed;
}
});
});
앱/디자인/adminhtml/Vendor/backend/Magento_Sales/layout/sales_order_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright (c)
* See COPYING.txt for license details.
*/
-->
<page
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Sales::css/custom-column.css" />
</head>
</page>
앱/디자인/adminhtml/Vendor/backend/Magento_Sales/ui_component/sales_order_grid.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright (c)
* See COPYING.txt for license details.
*/
-->
<listing
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
<column name="custom_column" component="Vendor_Module/js/ui/grid/cells/custom-column">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visibleByDefault" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="number">110</item>
</item>
</argument>
</column>
</columns>
</listing>
앱/디자인/adminhtml/Vendor/backend/Magento_Sales/web/css/custom-column.css
.custom-column-yellow {
background: #ffff00 !important;
}
.custom-column-green {
background: #006400 !important;
}
다음과 같이 출력합니다.
Reference
이 문제에 관하여(그리드에 새 사용자 지정 열 추가...), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anuradha/add-a-new-customized-column-to-the-grid-1c3b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
