[2018 년 10 월 3 일 편집]
devdoc에 대한 링크 업데이트 : 2.0- https ://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html 및 https://devdocs.magento.com/guides/v2 0 / ui-components / ui-secondary.html
2.1- https : //devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-listing-grid.html
2.2- https : //devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html
[2016 년 1 월 21 일 편집]
2016 년 1 월 20 일부터 magento2 devdocs는 UI 구성 요소에 대한 확장 설명서로 업데이트되었습니다. 나는 그것을 광범위하게 확인하지는 않았지만 며칠 전에했던 응답보다 더 많은 정보를 포함 할 수 있으므로 시간의 이익을 위해 http://devdocs.magento.com/guides/v2.0/ui 를 참조 하십시오. -library / ui-library-secondary.html
[/편집하다]
나는 한 달 이상 Magento2와 함께 일해 왔으며 이것이 그리드를 만드는 새로운 방법에 대해 알게 된 것입니다.
마 젠토 2 UI 그리드 컴포넌트
1) 내부 레이아웃 파일은 Company/Module/view/adminhtml/layout/module_controller_action.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">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="listing_name"/>
</referenceContainer>
</body>
</page>
2) uiComponent는 Company/Module/view/adminhtml/ui_component/listing_name.xml파일 에서 정의 됩니다. 파일 이름은 레이아웃 파일에 사용 된 uiComponent 이름과 같아야합니다. 파일의 구조는 첫눈에 꽤 복잡해 보일 수 있지만 항상 반복되는 노드입니다. 간단하게 만들기 위해 슬라이스하십시오. 구성 요소 파일의 기본 노드는 <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">입니다. 고정되어 있으며 네임 스페이스 위치 속성이 필요하다고 생각합니다. 다음이 내부 4 개 노드 전형적으로 <listing />노드 : <argument />, <dataSource />, <container />와 <columns />. 그러나 <argument />더 많은 구성을 제공하기 위해 노드를 복제하거나 <container />cms 페이지 목록과 같이 어떤 이유로 "sticky"컨테이너를 추가 하기 때문에 이는 엄격한 설정이 아닙니다 .
첫 번째 노드는 <argument />입니다. 이 노드는 구성 요소의 데이터를 정의합니다. 일반적으로 다음과 같은 것을 제공해야합니다.
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
<item name="deps" xsi:type="string">listing_name.listing_name_data_source</item>
</item>
<item name="spinner" xsi:type="string">listing_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 Item</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<argument />노드에는 attribute가 필요합니다 name. 이 경우 data구성 요소에 대한 기본 정보를 정의합니다. <item />구성의 특정 부분마다 여러 개의 노드가 있습니다. js_config목록 xml 구성에서 데이터 및 종속성을 제공하는 구성 요소를 구성 요소에 알려줍니다 (Javascript 해시로 변환된다고 생각합니다). provider값은 레이아웃 파일에 사용 된 리스팅 이름과 나중에 사용될 uniqure 데이터 소스 이름으로 구성됩니다. 그 명부에서 나는 젠토 체크 provider와 deps동일합니다. 나는 이것이 다른 것을 사용하는 것이 확실하지 않습니다. spinner그리드의 열이 정의 된 노드의 이름을 사용합니다. buttons그리드 상단에 버튼을 추가 할 수 있습니다. 대부분의 경우 Add new버튼 일뿐 입니다. 버튼에는 몇 가지 요소가 있습니다.name요소 ID로 사용되는 label버튼은 class버튼 클래스이며 버튼 url이 가리키는 링크입니다. 별표는 현재 URL의 일부로 대체됩니다. 다른 가능한 <item />버튼의 노드는 다음과 같습니다 id, title, type, (, 다시 제출하거나 버튼) onclick(대신 url, 그것은 우선 순위가), style, value, disabled. 버튼 요소는 Magento\Ui\Component\Control\Button클래스 별로 렌더링됩니다 .
다음으로 <dataSource />노드 가 있습니다 :
<dataSource name="listing_name_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">UniqueNameGridDataProvider</argument>
<argument name="name" xsi:type="string">listing_name_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">database_id</argument>
<argument name="requestFieldName" xsi:type="string">request_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>
name에 사용되는 <dataSource />노드 것은에서 사용되는 일치해야합니다 argument/js_config/provider및 argument/js_config/deps. 다음 노드는 그리드에 대한 데이터 준비를 담당하는 클래스를 정의합니다. class인수는에 일치하는 고유 이름이 필요합니다 di.xml. primaryFieldName데이터베이스 기본 열 및 requestFieldNamehttp 요청의 변수 와 관련 됩니다. 그들은 동일 할 수 있지만 필요가 없습니다, CMS 페이지 목록이 사용 page_id등 primaryFieldName과 id같이 requestFieldName. update_url필터링 및 정렬을위한 ajax 호출이 전송되는 진입 점을 나타냅니다. 두 번째 인수 <dataSource />는 그리드에 대한 ajax 호출 전송 및 처리의 js 부분을 처리하는 javascript 파일을 나타냅니다. 기본 파일은 Magento/Ui/view/base/web/js/grid/provider.js입니다.
다른 노드는 <container />입니다.
<container name="listing_top"> ... </container>
많은 데이터가 포함되어 있으므로 나눌 수도 있습니다. 그 자식은 전체 페이지의 일부입니다. 첫 아이 <argument />:
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
</item>
</argument>
레이아웃 및 모든 작업을 처리하고 기본적으로 Magento/Ui/view/base/web/templates/grid/toolbar.html
다음 노드는 <bookmark />
<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">listing_name</item>
</item>
</item>
</argument>
</bookmark>
이 노드는 책갈피 기능을 그리드에 추가합니다. 관리자가 다른 열을 표시하는 그리드의 다른 "프로필"을 설정할 수 있습니다. 덕분에 테이블의 모든 열을 그리드에 추가하고 사용자가 자신과 관련된 정보를 결정할 수 있습니다. namespace레이아웃 파일에 사용 된 이름과 일치해야합니다.
다른 노드는 <component />
<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">listing_name.listing_name.listing_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>
여기서 구성 할 값은 3 가지입니다. 먼저 provider[listing_name_from_layout]. [listing_name_from_layout]. [listing_columns_node_name] (노드 목록 / 인수 / 스피너와 같은) 패턴을 따릅니다. component그리드를 표시하고 기본적으로 Magento/Ui/view/base/web/js/grid/controls/columns.jstemplate를 사용하는 포인트를 표시하는 js 파일을 나타냅니다 Magento/Ui/view/base/web/templates/grid/controls/columns.html. 마지막 항목은 displayArea열 컨트롤을 표시해야하는 위치를 정의합니다. (기본값 getRegion('dataGridActions'):)에 정의 된 파일을 나타냅니다 .container/argument/config/templateMagento/Ui/view/base/web/templates/grid/toolbar.html
다음 노드는 <filterSearch />
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
<item name="chipsProvider" xsi:type="string">listing_name.listing_name.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
이 노드는 전체 텍스트 검색을 페이지에 추가합니다. "키워드로 검색"을 자리 표시 자로 사용하여 단일 텍스트 입력 필드로 그리드 위에 있습니다. 나는 이것을 많이 사용하지 않았기 때문에 여기에서 어떤 옵션이 가능한지 잘 모르겠지만 listing_filters_chips는 Magento/Ui/view/base/web/js/grid/filters/chips.js파일을 참조 합니다.
다음 노드는 <filters />
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">listing_name.listing_name.listing_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.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">listing_name.listing_name.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">listing_name.listing_name.listing_columns.${ $.index }:visible</item>
</item>
</item>
</item>
<item name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</item>
</argument>
</filters>
이 노드는 그리드 오른쪽 상단의 "필터"버튼을 클릭 한 후 표시되는 열 필터링 구성을 정의합니다. columnsProvider이전 노드와 유사한 구조를 따르므로 [listing_name_from_layout]. [listing_name_from_layout]. [listing_columns_node_name]. storegeConfig[listing_name_from_layout]. [listing_name_from_layout]. [container_node_name] [bookmark_node_name]과 같습니다. 에서 templates항목 노드 특정 필터 옵션을 렌더링하는 데 사용되는 파일을 정의 할 수 있습니다. 이 경우에만 정의를 선택하고 그것을 사용 Magento/Ui/view/base/web/js/form/element/ui-select.js으로 component하고 Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.html녹아웃 템플릿으로. Magento/Ui/view/base/web/js/form/element다른 가능성을 살펴보십시오 . 기본값을 재정의하려면 select 만 여기에 정의되어 있습니다 : Magento/Ui/view/base/web/js/form/element/select.js및 Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. 필터 및 기타 노드의 기본값은에 정의되어 Magento/Ui/view/base/ui_component/etc/definition.xml있습니다.
다음 노드는 <massAction />그리드에 대량 작업 선택을 추가 할 수 있습니다.
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
<item name="indexField" xsi:type="string">database_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="*/*/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="change_status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">change_status</item>
<item name="label" xsi:type="string" translate="true">Change Status</item>
</item>
</argument>
<argument name="actions" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Company\Module\Ui\Component\MassAction\Status\Options</argument>
<argument name="data" xsi:type="array">
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Change Status</item>
<item name="message" xsi:type="string" translate="true">Are you sure to change status for selected feed(s)?</item>
</item>
</argument>
</argument>
</action>
</massaction>
name인수는 고유해야합니다. 첫 번째 자식 노드 <argument />는 기본 데이터를 정의합니다. provider다른 노드와 동일한 구조를 따르며 열 node name 및 ids 열을 나타냅니다. 이 열에는 대량 작업을 처리하기 위해 선택한 항목이있는 확인란이 있습니다. component대량 작업을 렌더링하고 처리하는 데 사용되는 파일을 정의합니다. 기본값은 Magento_Ui/js/grid/massactions(을 가리킴 Magento/Ui/view/base/web/js/grid/massactions.js)입니다. Magento_Ui/js/grid/tree-massactions트리와 같은 구조를 추가 하는 데 사용할 수 있습니다 . 위의 경우 "활성화"및 "비활성화"옵션을 표시하는 "상태 변경"작업을 추가하는 데 사용합니다. <argument />노드 이후 <action />에는 원하는 조치 수만큼 노드를 추가 할 수 있습니다 . 각 <action />노드는 유사한 체계를 따릅니다. 첫 번째 경우 (작업 삭제) 노드에는 고유 한 이름이 필요합니다. 그런 다음 argument구성이 포함됩니다.label선택 옵션, url엔드 포인트에서 데이터를 전송하고 전송 confirm전에 확인 모달을 추가 하는 데 표시되는 내용입니다 . url첫 번째 argument노드 에서 "상태 변경"조치의 경우 두 번째 argument노드에 정의 된 클래스별로 상태별로 URL이 제공되므로 URL이 생략됩니다 . 클래스는 Zend \ Stdlib \ JsonSerializable 인터페이스를 구현해야합니다. Magento\Customer\Ui\Component\MassAction\Group\Options참조로 확인하십시오 .
마지막으로 <container />노드에는 <paging />페이지 매김을 정의 하는 노드가 있습니다 .
<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">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
</item>
</argument>
</paging>
에 대한 구조 provider와는 selectProvider이제 명확해야한다.
그리고 기본 그리드의 마지막 노드는 <columns />입니다. 여기에는 관리자가 사용할 수있는 모든 열 정의가 포함됩니다. 노드는 다음과 같이 정의됩니다
<columns name="listing_columns"> ... </columns>
name 속성은 참조 할 때 다른 노드에서 사용됩니다. 첫 아이는
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.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 name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">name_listing.name_listing.listing_columns.actions</item>
<item name="target" xsi:type="string">applyAction</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">edit</item>
<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</item>
</item>
</item>
</argument>
여기서 내가 provider한 것은 목록에 사용 된 체계에 따라 올바른 값만 제공 하는 것입니다. fieldAction노드는 셀을 클릭 할 때 발생하는 동작을 정의 할 수 있습니다. 기본 설정 호출 편집 동작
다음은 <selectionColumns />
<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">id</item>
</item>
</argument>
</selectionsColumn>
이 노드는 대량 작업에 사용할 확인란이있는 열을 정의합니다. 이 이름은 위에서 설명한 여러 노드에서 점 뒤에 표시됩니다.
그런 다음 동일한 형식으로 여러 열을 추가 할 수 있습니다.
<column name="name" class="Company\Module\Ui\Component\Listing\Column\Name">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Company\Module\Model\Source\Type</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">select</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="dataType" xsi:type="string">select</item>
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
<item name="label" xsi:type="string" translate="true">Name</item>
<item name="sortOrder" xsi:type="number">80</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</column>
대부분의 내부 항목 노드가 필요한 것은 아닙니다. 그들은 정의하고 있습니다 :
filter-열의 필터 유형. 이것은 필터 블록에서 사용됩니다. 사용 가능한 값은 text, select, dateRange입니다. select가 사용 <item name="options">...</item>되면 필터 선택에 대한 옵션을 제공하는 클래스로 사용됩니다.
component-열을 렌더링하는 데 사용되는 js 파일을 정의합니다. 사용 가능한 옵션은에 Magento/Ui/view/base/web/js/grid/columns/*있습니다. select가 제공되면 필터가 select로 설정됩니다. 텍스트 필터의 경우이 값이 필요하지 않습니다.
dataType-열 값에 사용 된 데이터 유형 정보를 제공합니다. selectRange select date의 경우 dateRange use date-
bodyTmpl녹아웃에서 셀을 렌더링하는 데 사용되는 html 파일을 정의합니다. 기본적으로 UI / 그리드 / 세포 / 텍스트가 사용된다 ( Magento/Ui/view/base/web/templates/grid/cells/text.html). 다른 옵션은 Magento/Ui/view/base/web/templates/grid/cells/*디렉토리에 있습니다. ui/grid/cells/html셀에서 html 컨텐츠를 사용할 수 있습니다.
label -열 헤더 및 필터 블록에 표시됩니다
sortOrder -주문
visible-열 표시 여부. 책갈피의 열을 정의하는 데 사용할 수 있지만 기본적으로 표시하지는 않습니다.
마지막으로 단일 항목에 대해 수행 가능한 작업 열 마녀 작업을 추가 할 수 있습니다
<actionsColumn name="actions" class="Company\Module\Ui\Component\Listing\Column\Actions">
<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">107</item>
<item name="indexField" xsi:type="string">database_id</item>
</item>
</argument>
</actionsColumn>
indexField데이터베이스의 열 이름을 나타냅니다. 액션 클래스는 메소드를 확장 Magento\Ui\Component\Listing\Columns\Column하고 정의 해야합니다 prepareDataSource. 참조 Magento/Cms/Ui/Component/Listing/Column/PageActions.php로 참조
3) 그리드를 완성하기 위해서는 Company / Module / etc / di.xml에서 일부 요소를 정의해야합니다
먼저 노드에서 사용 된 제공자 클래스를 정의합니다 dataSource/class
<virtualType name="UniqueNameGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Company\Module\Model\Resource\Item\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">UniqueNameItemIdFilterPool</argument>
</arguments>
</virtualType>
collection표준 컬렉션 클래스로 확인하고 filerPool새 요소를 정의합니다.
<virtualType name="UniqueNameItemIdFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<arguments>
<argument name="appliers" xsi:type="array">
<item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
<item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
</argument>
</arguments>
</virtualType>
이것은 필터링 및 검색과 관련이 있습니다. 지금은 항상 기본값을 사용했습니다.
이제 데이터 소스를 등록합니다 :
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="listing_name_data_source" xsi:type="string">Company\Module\Model\Resource\Item\Grid\Collection</item>
</argument>
</arguments>
</type>
이 경우 노드 이름은 <dataSource />xml 나열 에서 노드에 사용 된 노드 이름과 일치해야 하며 콜렉션이 아니라 GridCollection 클래스로 해석됩니다. 일반 컬렉션 클래스를 확장하고 추가로 구현해야 Magento\Framework\Api\Search\SearchResultInterface합니다.
결국 우리는 그리드 컬렉션을 구성합니다 (인수 이름은 다소 분명합니다)
<type name="Company\Module\Model\Resource\Item\Grid\Collection">
<arguments>
<argument name="mainTable" xsi:type="string">database_table_name</argument>
<argument name="eventPrefix" xsi:type="string">name_for_events</argument>
<argument name="eventObject" xsi:type="string">event_object_name</argument>
<argument name="resourceModel" xsi:type="string">Company\Module\Model\Resource\Item</argument>
</arguments>
</type>