ম্যাজেন্টো গ্রিডের উপাদান সঠিকভাবে বাছাই করা হচ্ছে না


16

আমি ম্যাজেন্টোতে একটি গ্রিড উপাদান কনফিগার করেছি - এবং বাছাইয়ের আচরণটি ভাঙ্গা মনে হচ্ছে। আমি জাভাস্ক্রিপ্ট স্তরে এটি কোথায় ডিবাগ করতে পারি, এবং / বা অন্য কারও কি ধারণা আছে যে এটি কেন ঘটছে?

যদি আমি গ্রিডটি একবারে বাছাই করি তবে একটি এজাক্স অনুরোধ করা হয় এবং সমস্ত কিছু সঠিকভাবে সাজানো হয়।

এখানে চিত্র বর্ণনা লিখুন

যাইহোক, দ্বিতীয় সাজানোর, এজ্যাক্স অনুরোধ ছাড়াই, সমস্ত একই আইডি সহ গ্রিডটি সরবরাহ করে।

এখানে চিত্র বর্ণনা লিখুন

আচরণটি ম্যাজেন্টো কোর গ্রিডগুলিতে পুনরাবৃত্তি হয় না , তাই আমি নিশ্চিত যে এটি আমার দ্বারা করা কিছু। আমি ইউআই উপাদানগুলি সিস্টেমটি ঠিক জানি না যে এটির ডিবাগিংটি কোথায় শুরু করতে হবে to

উত্তর:


21

ঠিক আছে, আমি এখনও কেন বোঝার ভান করতে পারি না, তবে সমস্যাটি ছিল dataআমার dataProviderযুক্তির যুক্তি।

<!-- ... -->
<argument name="dataProvider" xsi:type="configurableObject">
    <!-- ... --->
    <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>
<!-- ... -->

আমি যখন এটি কয়েকটি গ্রিডের সাথে তুলনা করেছি, তখন আমার মডেলের প্রাথমিক কী সহ একটি উপ-নোড dataযুক্তি দিয়ে একটি storageConfigনোড অনুপস্থিত ছিল indexField

<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="update_url" xsi:type="url" path="mui/index/render"/>
        <item name="storageConfig" xsi:type="array">
            <item name="indexField" xsi:type="string">pulsestorm_commercebug_log_id</item>
        </item>                    

    </item>                          
</argument>

আমি এই নোডগুলি যুক্ত করার পরে, বাছাইয়ের কার্যকারিতা পুনরুদ্ধার করা হয়েছিল।


ঠিক একই সমস্যার মধ্যে দৌড়েছি, আমি কল্পনা করেছি যে এটি সারি সূচকের দ্বারা ডাটা সারি আইডির চেয়ে স্টোর থেকে পিছনে পড়ে বা মানগুলি লোড হচ্ছে, যদিও এটি কেন নকল হয়েছে তা কোনও ধারণা দেয় না। উত্তরের জন্য ধন্যবাদ.
এলএম_ ফিল্ডিং

7

টি এল; ডিআর

এটি আসলেই একটি আকর্ষণীয় সমস্যা।

এখানে আমি সিস্টেমটি কীভাবে বুঝতে পেরেছি তা কিন্তু 100% সঠিক নাও হতে পারি।

যেমন আপনি শিরোনাম কলামটি ক্লিক করে দেখেছেন নীচের রুটে একটি AJAX অনুরোধ উত্পন্ন হয়েছে: /admin_key/mui/index/renderনিম্নলিখিত পরামিতি সহ:

  • ফিল্টার [প্লেসহোল্ডার]
  • isAjax
  • নামস্থান
  • পেজিং [বর্তমান]
  • পেজিং [pageSize]
  • অনুসন্ধান
  • বাছাই [DIRECTION]
  • বাছাই [ক্ষেত্র]

সর্বশেষে সেই ক্ষেত্রটি যেখানে আপনি আপনার গ্রিড বাছাই করছেন।

এই রুটটি এখানে ডিফল্ট হিসাবে ঘোষণা করা হয় app/code/Magento/Ui/view/base/ui_component/etc/definition.xml:

<insertListing class="Magento\Ui\Component\Container">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/components/insert-listing</item>
            <item name="update_url" xsi:type="url" path="mui/index/render"/>
            <item name="render_url" xsi:type="url" path="mui/index/render"/>
            <item name="autoRender" xsi:type="boolean">false</item>
            <item name="dataLinks" xsi:type="array">
                <item name="imports" xsi:type="boolean">true</item>
                <item name="exports" xsi:type="boolean">false</item>
            </item>
            <item name="realTimeLink" xsi:type="boolean">true</item>
        </item>
    </argument>
</insertListing>

তবে একটি তালিকায় ui_comp घटक এক্সএমএল এটি ঘোষণা করা হয়েছে:

        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">page_id</item>
                </item>
            </item>
        </argument>

এই রুটটি app/code/Magento/Ui/Controller/Adminhtml/Index/Render.phpনেমস্পেস প্যারামিটারের ভিত্তিতে পরিচালনা করা হয় (যা সাধারণত আপনার ইউআই অংশের নাম হয়)

public function execute()
{
    if ($this->_request->getParam('namespace') === null) {
        $this->_redirect('admin/noroute');
        return;
    }

    $component = $this->factory->create($this->_request->getParam('namespace'));
    $this->prepareComponent($component);
    $this->_response->appendBody((string) $component->render());
}

যেখানে prepareComponentশিশুদের উপাদানগুলিতে পদ্ধতিটি পুনরাবৃত্তি হয়:

protected function prepareComponent(UiComponentInterface $component)
{
    foreach ($component->getChildComponents() as $child) {
        $this->prepareComponent($child);
    }
    $component->prepare();
}

কলামের উপাদান প্রস্তুত হয়ে গেলে কলাম সাজানোর কাজটি পরিচালনা করে app/code/Magento/Ui/Component/Listing/Columns/Column.php:

public function prepare()
{
    $this->addFieldToSelect();

    $dataType = $this->getData('config/dataType');
    if ($dataType) {
        $this->wrappedComponent = $this->uiComponentFactory->create(
            $this->getName(),
            $dataType,
            array_merge(['context' => $this->getContext()], (array) $this->getData())
        );
        $this->wrappedComponent->prepare();
        $wrappedComponentConfig = $this->getJsConfig($this->wrappedComponent);
        // Merge JS configuration with wrapped component configuration
        $jsConfig = array_replace_recursive($wrappedComponentConfig, $this->getJsConfig($this));
        $this->setData('js_config', $jsConfig);

        $this->setData(
            'config',
            array_replace_recursive(
                (array)$this->wrappedComponent->getData('config'),
                (array)$this->getData('config')
            )
        );
    }

    $this->applySorting();

    parent::prepare();
}

কোথায় applySorting()পদ্ধতি বাছাই পরামিতি উপর ভিত্তি করে এবং এটা শুধু ডেটা প্রদানকারী করার যোগ করেছেন:

protected function applySorting()
{
    $sorting = $this->getContext()->getRequestParam('sorting');
    $isSortable = $this->getData('config/sortable');
    if ($isSortable !== false
        && !empty($sorting['field'])
        && !empty($sorting['direction'])
        && $sorting['field'] === $this->getName()
    ) {
        $this->getContext()->getDataProvider()->addOrder(
            $this->getName(),
            strtoupper($sorting['direction'])
        );
    }
}

প্রতিটি উপাদান প্রস্তুত হয়ে গেলে, ক্রিয়া শ্রেণি প্রতিক্রিয়াটির জন্য উপাদানটিকে পুনরায় সরবরাহ করে (আবার পুনরাবৃত্তভাবে):

$this->_response->appendBody((string) $component->render());

আমি মনে করি সেগুলি বাছাইয়ের সময় কী ঘটে তার গুরুত্বপূর্ণ PHP পদক্ষেপগুলি।

এখন জেএসের কাছে রেন্ডার এবং আপডেট ইউআরএলগুলি ( definition.xmlউপরে ঘোষণা করা ) এতে উপাদানটিতে অর্পিত হয়েছে app/code/Magento/Ui/view/base/web/js/form/components/insert.js:

return Element.extend({
    defaults: {
        content: '',
        template: 'ui/form/insert',
        showSpinner: true,
        loading: false,
        autoRender: true,
        visible: true,
        contentSelector: '${$.name}',
        externalData: [],
        params: {
            namespace: '${ $.ns }'
        },
        renderSettings: {
            url: '${ $.render_url }',
            dataType: 'html'
        },
        updateSettings: {
            url: '${ $.update_url }',
            dataType: 'json'
        },
        imports: {},
        exports: {},
        listens: {},
        links: {
            value: '${ $.provider }:${ $.dataScope}'
        },
        modules: {
            externalSource: '${ $.externalProvider }'
        }
    }

এখনও এই ফাইলে, requestDataAJAX ডেটা পুনরুদ্ধার করতে একটি পদ্ধতি ব্যবহার করা হয়:

    requestData: function (params, ajaxSettings) {
        var query = utils.copy(params);

        ajaxSettings = _.extend({
            url: this['update_url'],
            method: 'GET',
            data: query,
            dataType: 'json'
        }, ajaxSettings);

        this.loading(true);

        return $.ajax(ajaxSettings);
    }

আপনি দেখতে পাবেন যে পদ্ধতিটি যখন ডাকা হয় তখন এই render()পদ্ধতিটি বলা হয়:

        $.async({
            component: this.name,
            ctx: '.' + this.contentSelector
        }, function (el) {
            self.contentEl = $(el);
            self.startRender = true;
            params = _.extend({}, self.params, params || {});
            request = self.requestData(params, self.renderSettings);
            request
                .done(self.onRender)
                .fail(self.onError);
        });

এটি হয়ে গেলে, ডেটা প্রয়োগের জন্য একটি কলব্যাক পদ্ধতি কল করা হয়। এটি হ'ল onRender():

    onRender: function (data) {
        this.loading(false);
        this.set('content', data);
        this.isRendered = true;
        this.startRender = false;
    }

আমি মনে করি সেখানে নতুন সামগ্রী প্রয়োগ করা হচ্ছে।


কোড
কলম্বো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.