Magento 2 добавить общий столбец строк в сетку
Я хочу добавить общее количество строк столбца в сетке, мне нужна подсказка/предложение.Я использовал этот учебник для создания сетки в magneto2
https://ranasohel.me/2014/04/20/creating-magento2-adminhtml-grid /.
Я использовал ui_component для создания сетки.Просто мне нужна подсказка, чтобы добавить общую сумму строк в столбце внизу. название столбца - цена.Мне нужно price общее количество столбцов в нижней части сетки.
App/code/Test/Testimonial/view/adminhtml/ui_component/testimonial_blog_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<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">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
<item name="deps" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">testimonial_blog_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New testimonial</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<dataSource name="testimonial_blog_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">PostGridDataProvider</argument>
<argument name="name" xsi:type="string">testimonial_blog_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argument>
</dataSource>
<container name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
<item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
</item>
</argument>
<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">testimonial_blog_listing</item>
</item>
</item>
</argument>
</bookmark>
<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>
<exportButton name="export_button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.ids</item>
</item>
</argument>
</exportButton>
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing_data_source</item>
<item name="chipsProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="templates" xsi:type="array">
<item name="filters" xsi:type="array">
<item name="select" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
<item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.${ $.index }:visible</item>
</item>
</item>
</item>
<item name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</item>
</argument>
</filters>
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.ids</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
<action name="delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">delete</item>
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="url" path="testimonial/blog/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete items</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
</item>
</item>
</argument>
</action>
<action name="disable">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">disable</item>
<item name="label" xsi:type="string" translate="true">Disable</item>
<item name="url" xsi:type="url" path="testimonial/blog/massDisable"/>
</item>
</argument>
</action>
<action name="enable">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">enable</item>
<item name="label" xsi:type="string" translate="true">Enable</item>
<item name="url" xsi:type="url" path="testimonial/blog/massEnable"/>
</item>
</argument>
</action>
</massaction>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns.ids</item>
</item>
</argument>
</paging>
</container>
<columns name="testimonial_blog_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.testimonial_blog_columns_editor</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">testimonial_blog_listing.testimonial_blog_listing.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
</item>
</item>
</argument>
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
</selectionsColumn>
<column name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</column>
<column name="publish_date" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Publish Date</item>
</item>
</argument>
</column>
<column name="price">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
<item name="label" xsi:type="string" translate="true">Price</item>
</item>
</argument>
</column>
<actionsColumn name="actions" class="SR\testimonial\Ui\Component\Listing\Column\PostAction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="indexField" xsi:type="string">entity_id</item>
<item name="viewUrlPath" xsi:type="string">testimonial/blog/edit</item>
<item name="urlEntityParamName" xsi:type="string">entity_id</item>
</item>
</argument>
</actionsColumn>
</columns>
</listing>
2
1 answers
Я нахожу решение. Я надеюсь, что это может вам помочь.
Найдите строку в js-файле компонента пользовательского интерфейса, в которой напишите тег элемента с именем "компонент":
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argument>
И измените его следующим образом:
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">YourVendor_YourModule/js/grid/provider</item>
</item>
</argument>
Путь к этому js-файлу следующий: vendor/magento/module-ui/view/base/web/js/grid/provider.js
Таким образом, новый путь к вашему новому пользовательскому файлу js будет: app/code/YourVendor/YourModule/view/base/web/js/grid/provider.js
Измените метод "Данные процесса" таким образом, чтобы вы могли рассчитать общую сумму столбца цены, например, так:
ПРОВЕРЬТЕ КОММЕНТАРИЙ К ИЗМЕНЕННОМУ КОДУ. ПРОСТО ПРОВЕРЬТЕ функцию processData, потому что только что изменили эту функцию и другую функцию, скопированную с vendor\magento\module-ui\view\base\web\js\grid/provider.js
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'underscore',
'mageUtils',
'uiElement',
'Magento_Ui/js/modal/alert',
'mage/translate'
], function ($, _, utils, Element, alert, $t) {
'use strict';
return Element.extend({
defaults: {
listens: {
params: 'reload'
}
},
/**
* Initializes provider component.
*
* @returns {Provider} Chainable.
*/
initialize: function () {
utils.limit(this, 'reload', 300);
_.bindAll(this, 'onReload');
return this._super();
},
/**
* Initializes provider config.
*
* @returns {Provider} Chainable.
*/
initConfig: function () {
this._super();
this.setData({
items: [],
totalRecords: 0
});
return this;
},
/**
*
* @param {Object} data
* @returns {Provider} Chainable.
*/
setData: function (data) {
data = this.processData(data);
this.set('data', data);
return this;
},
/**
* Reloads data with current parameters.
*/
reload: function () {
this.trigger('reload');
if (this.request && this.request.readyState !== 4) {
this.request.abort();
}
this.request = $.ajax({
url: this['update_url'],
method: 'GET',
data: this.get('params'),
dataType: 'json'
});
this.request
.done(this.onReload)
.error(this.onError);
},
/* START MODIFIED CODE */
processData: function (data) {
var items = data.items;
var total = 0;
_.each(items, function (record, index) {
record._rowIndex = index;
total += parseFloat(record.price);//price is column of custom table
});
jQuery("#custom_total_value").text(total);
return data;
},
/* END MODIFIED CODE */
/**
* Handles reload error.
*/
onError: function (xhr) {
if (xhr.statusText === 'abort') {
return;
}
alert({
content: $t('Something went wrong.')
});
},
/**
* Handles successful data reload.
*
* @param {Object} data - Retrieved data object.
*/
onReload: function (data) {
this.setData(data)
.trigger('reloaded');
}
});
});
Запись - это объект внутри коллекции, который печатается в сетке.
После того, как вы сможете добавить блок в файл макета:
<referenceContainer name="content">
<uiComponent name="your_listing"/>
<block class="Magento\Framework\View\Element\Template" template="YourVendor_YourModuke::custom_total.phtml" />
</referenceContainer>
Внутри файла custom_total.phtml я пишу:
<span><b>Total</b></span> <span id="custom_total_value"></span>
Таким образом, я вижу строку вниз по сетке, где выводится общая сумма.
Чтобы увидеть изменения в сетке, удалите все статические файлы и кэш с помощью команда:
rm -rf var/cache/* var/page_cache/* var/view_preprocessed/* pub/static/*
Внутри вашего корневого каталога magento.
Затем перекомпилируйте статическое содержимое:
php bin/magento setup:static-content:deploy your_language
ИЗМЕНИТЬ: В качестве альтернативы вы можете изменить объект данных, возвращаемый методом ProcessData, добавив другую запись с теми же атрибутами обычной записи, но с итогами в качестве значений. Таким образом, вероятно, у вас может появиться новая строка внутри сетки. Я не пробовал это решение, но я думаю, что оно сработает.
5
Author: ProcessKiller, 2016-06-05 10:40:01