의미 UI React를 사용하여 DevExtreme Datagrid에서 사용자 정의 편집 양식을 만드는 방법

// index.js
import React from "react";
import "semantic-ui-css/semantic.min.css";

npx -p devextreme-cli devextreme add devextreme-react

//DevGrid.js
import React from "react";
import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";

DevExtreme에서 데이터 격자를 가져옵니다.

import DataGrid, {
  FilterPanel,
  FilterRow,
  SearchPanel,
  Paging,
  Editing,
  Export,
  Pager,
  Grouping,
  GroupPanel,
  RowDragging,
  Column,
  RequiredRule,
} from "devextreme-react/data-grid";

DevExtreme에서 팝업 창을 동시에 가져옵니다.

import { Popup } from "devextreme-react/popup";

의미 UI에서 양식, 세그먼트 및 버튼을 가져옵니다.

import { Segment,  Button, Form } from "semantic-ui-react";

DevExtreme Datagrid를 덮어쓰는 사용자 정의 편집 양식을 만들려면 Semantic UI의 segment 요소를 사용하여 다른 모든 요소를 포장하는 코드 라이브러리를 다음 형식으로 구성해야 합니다.

const DevGrid = () => {
  return (
    <Segment>
      <h1>Welcome To Devgrid</h1>
      <div className="ui info message">
        <div className="header">We Love To Learn.</div>
      </div>

      <div>
        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={DataSource}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}          
          columnHidingEnabled={true}>
          <RowDragging allowReordering={true} />
          <FilterPanel visible={true} />
          <SearchPanel visible={true} />
          <FilterRow visible={true} />
          <Paging defaultPageSize={10} />
          <Pager
            showPageSizeSelector={true}
            allowedPageSizes={[10, 20, 50, 100]}
            showInfo={true}
          />
          <Grouping contextMenuEnabled={true} />
          <GroupPanel visible={true} />
          <Editing
            mode="popup"
            useIcons={true}
            allowUpdating={true}
            allowDeleting={true}
            allowAdding={true}>
            {" "}
          </Editing>

          <Export
            enabled={true}
            fileName="Devgrid"
            allowExportSelectedData={true}
          />

          <Column dataField="ID" visible={false}></Column>
          <Column dataField="Prefix">
            <RequiredRule />
          </Column>
          <Column dataField=" FirstName">
            <RequiredRule />
          </Column>
          <Column dataField="LastName">
            <RequiredRule />
          </Column>
        </DataGrid>

      </div>
    </Segment>
  );
};
export default DevGrid;

터미널에서 Thread start/npm start를 사용하여 항목을 실행하고 브라우저의 외관을 보십시오.
이것이 바로 격자와 편집 표의 외관이다.

데이터를 가져오려면 프로젝트에 사용자 정의 데이터를 만들고 이를 도구로 Datagrid 구성 요소에 전달하십시오.

const myData = [
    {
      ID: 1,
      FirstName: "Leesi",
      LastName: "Heart",
      Prefix: "Mrs.",
    },
    {
      ID: 2,
      FirstName: "Testimonies",
      LastName: "Drake",
      Prefix: "Mrs.",
    },
    {
      ID: 3,
      FirstName: "Olivia",
      LastName: "Regina",
      Prefix: "Mrs.",
    },
    {
      ID: 4,
      FirstName: "Owanate",
      LastName: "Peter",
      Prefix: "Ms.",
    },
    {
      ID: 5,
      FirstName: "Leera",
      LastName: "Samuel",
      Prefix: "Ms.",
    },
    {
      ID: 6,
      FirstName: "Becky",
      LastName: "Craig",
      Prefix: "Mrs.",
    },
    {
      ID: 7,
      FirstName: "Gloria",
      LastName: "Johnson",
      Prefix: "Ms.",
    },
  ];

      <DataGrid
         ...          
          dataSource={myData}
         >
         ...
        </DataGrid>

사용자 정의 전에 DevExtreme 편집/추가 양식은 다음과 같습니다.

양식을 수정하려면 의미 UI 양식 요소를 추가합니다.양식 요소를 DevExtreme의 popup 요소의 하위 요소로 추가합니다.양식이라는 다른 요소를 추가합니다.다음 그림과 같이 양식의 필드의미 사용자 인터페이스에서.""필드는 레이블과 입력 요소가 포함된 양식에 추가됩니다.팝업 창은 DataGrid 외부에 있어야 합니다.

        <Popup
          title="Create"       

          showCloseButton={false}
          width={700}
          minHeight={"auto"}
          height={600}>
            <Form size="large" >
              <Form.Field>
                <label>ID</label>
                <input placeholder="ID" />
              </Form.Field>
              <Form.Field>
                <label>Prefix</label>
                <input placeholder="Prefix" />
              </Form.Field>
              <Form.Field>
                <label>First Name</label>
                <input placeholder="First Name" />
              </Form.Field>
              <Form.Field>
                <label>Last Name</label>
                <input placeholder="Last Name" />
              </Form.Field>
              <Form.Field></Form.Field>

            <Button.Group>
              <Button positive>Save</Button>
              <Button.Or />
              <Button>Cancel</Button>
            </Button.Group>
          </Form>
        </Popup>

다음은 팝업 창과 폼 구성 요소를 관리하는 상태를 만듭니다.초기 값을 false로 설정합니다.상태를 처리하고true로 설정하는 함수를 만듭니다.팝업 창에서 그것을 호출합니다. 아래와 같습니다.

const [onVisible, setOnVisible] = React.useState(false);

 const handleAddNew = () => {
    setOnVisible(true);
  };

        <Popup

           visible={onVisible}
          >
          <Form size="large" setOnVisible={() => setOnVisible(false)}>

이 양식은 변경되지 않으며 DevExtreme 양식을 볼 수 있습니다.사용자 정의 양식을 표시하려면 DevGrid 구성 요소의 Datagrid에서 함수를 호출하는 함수를 만들어야 합니다.이렇게 하려면 onToolbarPreparing이라는 함수를 만듭니다."tools items"라는 변수를 만듭니다.도구막대 옵션을 할당합니다. for 순환을 실행하여 'tools items' 의 길이를 늘립니다. item이라는 변수를 만들고 tools item을 할당합니다. for 순환에 if 문장을 만들고,' item.name '이' addRowButton '과 같은지 확인하십시오. 같으면' HandLeadNew '함수를 사용하여 새 폼을 추가합니다.

function onToolbarPreparing(e) {
    let toolsItems = e.toolbarOptions.items;

    for (let i = 0; i < toolsItems.length; i++) {
      let item = toolsItems[i];
      if (item.name === "addRowButton") {
        item.options.onClick = handleAddNew;
        break;
      }
    }
  }

이런 방식을 통해 함수를 도구로 데이터 격자에 전달하다

        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={myData}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}
          onToolbarPreparing={onToolbarPreparing}
          columnHidingEnabled={true}>

현재 추가 단추를 누르면 사용자 정의 폼을 볼 수 있습니다.

다음은 DevGrid 구성 요소의 코드 라이브러리입니다.

import React, { useState, useEffect } from "react";
import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";
import DataGrid, {
  FilterPanel,
  FilterRow,
  SearchPanel,  
  Paging,
  Lookup,  
  Position,
  Editing,
  Export,
  Pager,
  Grouping,
  GroupPanel,
  RowDragging,
  Column,
  RequiredRule,

} from "devextreme-react/data-grid";
import { Popup } from "devextreme-react/popup";
import { Segment, Button, Form } from "semantic-ui-react";
import axios from "axios";

const DevGrid = () => {

  const [onVisible, setOnVisible] = React.useState(false);

  const myData = [
    {
      ID: 1,
      FirstName: "Leesi",
      LastName: "Heart",
      Prefix: "Mrs.",
    },
    {
      ID: 2,
      FirstName: "Testimonies",
      LastName: "Drake",
      Prefix: "Mrs.",
    },
    {
      ID: 3,
      FirstName: "Olivia",
      LastName: "Regina",
      Prefix: "Mrs.",
    },
    {
      ID: 4,
      FirstName: "Owanate",
      LastName: "Peter",
      Prefix: "Ms.",
    },
    {
      ID: 5,
      FirstName: "Leera",
      LastName: "Samuel",
      Prefix: "Ms.",
    },
    {
      ID: 6,
      FirstName: "Becky",
      LastName: "Craig",
      Prefix: "Mrs.",
    },
    {
      ID: 7,
      FirstName: "Gloria",
      LastName: "Johnson",
      Prefix: "Ms.",
    },
  ];
  const handleAddNew = () => {
    setOnVisible(true);
  };

  function onToolbarPreparing(e) {
    let toolsItems = e.toolbarOptions.items;

    for (let i = 0; i < toolsItems.length; i++) {
      let item = toolsItems[i];
      if (item.name === "addRowButton") {
        item.options.onClick = handleAddNew;
        break;
      }
    }
  }

  return (
    <Segment>
      <h1>Welcome To Devgrid</h1>
      <div className="ui info message">
        <div className="header">We Love To Learn.</div>
      </div>

      <div>
        <DataGrid
          id="devgrid"
          className="dx-datagrid dx-row-alt"
          hoverStateEnabled={true}
          columnAutoWidth={true}
          dataSource={myData}
          activeStateEnabled={true}
          columnResizingMode="widget"
          allowColumnResizing={true}
          onToolbarPreparing={onToolbarPreparing}
          columnHidingEnabled={true}>
          <RowDragging allowReordering={true} />
          <FilterPanel visible={true} />
          <SearchPanel visible={true} />
          <FilterRow visible={true} />
          <Paging defaultPageSize={10} />
          <Pager
            showPageSizeSelector={true}
            allowedPageSizes={[10, 20, 50, 100]}
            showInfo={true}
          />
          <Grouping contextMenuEnabled={true} />
          <GroupPanel visible={true} />
          <Editing
            mode="popup"
            useIcons={true}
            allowUpdating={true}
            allowDeleting={true}
            allowAdding={true}>
            {" "}
          </Editing>

          <Export
            enabled={true}
            fileName="Devgrid"
            allowExportSelectedData={true}
          />

          <Column dataField="ID" visible={false}></Column>
          <Column dataField="Prefix">
            <RequiredRule />
          </Column>
          <Column dataField="FirstName">
            <RequiredRule />
          </Column>
          <Column dataField="LastName">
            <RequiredRule />
          </Column>
        </DataGrid>
        <Popup
          title="Create"
          // showTitle={true}
          visible={onVisible}
          showCloseButton={false}
          width={700}
          minHeight={"auto"}
          height={600}>
          <Form size="large" setOnVisible={() => 
           setOnVisible(false)}>
            <Form.Field>
              <label>ID</label>
              <input placeholder="ID" />
            </Form.Field>
            <Form.Field>
              <label>Prefix</label>
              <input placeholder="Prefix" />
            </Form.Field>
            <Form.Field>
              <label>First Name</label>
              <input placeholder="First Name" />
            </Form.Field>
            <Form.Field>
              <label>Last Name</label>
              <input placeholder="Last Name" />
            </Form.Field>
            <Form.Field></Form.Field>

            <Button.Group>
              <Button positive>Save</Button>
              <Button.Or />
              <Button>Cancel</Button>
            </Button.Group>
          </Form>
        </Popup>
      </div>
    </Segment>
  );
};
export default DevGrid;

결론

이러한 사용자 정의를 통해 폼은 서로 다른 외관을 가지게 됩니다. DevExtreme Datagrid에서 서로 다른 폼 스타일을 사용하여 여러 폼을 만들 수 있습니다.나는 의미 사용자 인터페이스를 선택하여 맞춤형 제작을 한다. 왜냐하면 이것은 자연스러운 언어이기 때문에 당신은 쉽게 당신의 폼에 응답할 수 있다. 사용자 인터페이스를 볼 때 당신은 매끄러운 느낌을 갖게 될 것이다. 마지막으로 그것은 경량급이다.