데모
입력 | Input(React)
팝업
팝업 편집기

팝업 편집기 (React)

이 샘플은 FlexGrid를 사용하여 행 데이터를 표시하고, 사용자 정의 폼을 사용하여 항목을 편집하는 방법을 보여 줍니다. 사용자 정의 폼은 Wijmo Popup 컨트롤에 호스트되어 있고, Wijmo 입력 컨트롤을 포함합니다. 행 헤더의 연필 글리프를 클릭하여 편집합니다.

Input 컨트롤 알아보기 | Popup API Reference

이 데모는 React를 기반으로합니다.

JavaScript
Angular
React
Vue
app.jsx
index.html
app.css
data.jsx
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wjGrid from '@mescius/wijmo.react.grid';
import * as wjInput from '@mescius/wijmo.react.input';
import './app.css';
import { data, countries } from './data';
function App() {
    const [id, setId] = useState(0);
    const [country, setCountry] = useState('');
    const [sales, setSales] = useState(0);
    const [expenses, setExpenses] = useState(0);
    const popupRef = useRef();
    const initPopup = useEvent((sender) => {
        popupRef.current = sender;
    });
    const initGrid = useEvent((flexGrid) => {
        flexGrid.hostElement.addEventListener('click', (e) => {
            const ht = flexGrid.hitTest(e);
            if (ht.panel === flexGrid.rowHeaders) {
                const item = flexGrid.rows[ht.row].dataItem;
                setId(item.id);
                setCountry(item.country);
                setSales(item.sales);
                setExpenses(item.expenses);
                if (popupRef.current) {
                    popupRef.current.show(true, (sender) => {
                        if (sender.dialogResult === 'wj-hide-ok') {
                            const collectionView = flexGrid.collectionView;
                            collectionView.editItem(item);
                            setCountry((prevCountry) => {
                                item.country = prevCountry;
                                return prevCountry;
                            });
                            setSales((prevSales) => {
                                item.sales = prevSales;
                                return prevSales;
                            });
                            setExpenses((prevExpenses) => {
                                item.expenses = prevExpenses;
                                return prevExpenses;
                            });
                            collectionView.commitEdit();
                        }
                        flexGrid.focus();
                    });
                }
            }
        });
    });
    const formatItem = useEvent((sender, e) => {
        if (e.panel === sender.rowHeaders && e.col === 0) {
            e.cell.innerHTML = '<span class="wj-glyph-pencil"></span>';
        }
    });
    const changeCountry = useEvent((sender) => {
        setCountry(sender.selectedValue);
    });
    const changeSales = useEvent((sender) => {
        if (sender.value) {
            setSales(sender.value);
        }
    });
    const changeExpenses = useEvent((sender) => {
        if (sender.value) {
            setExpenses(sender.value);
        }
    });
    return (<div className="container-fluid">
      <wjGrid.FlexGrid isReadOnly={true} selectionMode="Row" formatItem={formatItem} itemsSource={data} initialized={initGrid}>
        <wjGrid.FlexGridColumn binding="id" header="ID" width={50}/>
        <wjGrid.FlexGridColumn binding="country" header="Country" isRequired={true} dataMap={countries}/>
        <wjGrid.FlexGridColumn binding="sales" header="Sales" format="n2"/>
        <wjGrid.FlexGridColumn binding="expenses" header="Expenses" format="n2"/>
      </wjGrid.FlexGrid>
      <wjInput.Popup initialized={initPopup} className="modal-content">
        <div className="modal-header">
          <button type="button" className="close wj-hide">&times;</button>
          <h4 className="modal-title">Edit Item {id}</h4>
        </div>
        <div className="modal-body">
          <div className="wj-labeled-input">
            <wjInput.ComboBox itemsSource={countries} selectedValue={country} selectedIndexChanged={changeCountry}/>
            <label htmlFor="country">Country</label>
          </div>
          <div className="wj-labeled-input">
            <wjInput.InputNumber format="n2" min={0} step={100} value={sales} valueChanged={changeSales}/>
            <label htmlFor="sales">Sales</label>
          </div>
          <div className="wj-labeled-input">
            <wjInput.InputNumber format="n2" min={0} step={100} value={expenses} valueChanged={changeExpenses}/>
            <label htmlFor="expenses">Expenses</label>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-primary wj-hide-ok">OK</button>
            <button type="button" className="btn btn-default wj-hide">Cancel</button>
          </div>
        </div>
      </wjInput.Popup>
    </div>);
}
;
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useRef, useState } from 'react'; import useEvent from 'react-use-event-hook'; import * as wjGrid from '@mescius/wijmo.react.grid'; import * as wjInput from '@mescius/wijmo.react.input'; import './app.css'; import { data, countries } from './data'; function App() { const [id, setId] = useState(0); const [country, setCountry] = useState(''); const [sales, setSales] = useState(0); const [expenses, setExpenses] = useState(0); const popupRef = useRef(); const initPopup = useEvent((sender) => { popupRef.current = sender; }); const initGrid = useEvent((flexGrid) => { flexGrid.hostElement.addEventListener('click', (e) => { const ht = flexGrid.hitTest(e); if (ht.panel === flexGrid.rowHeaders) { const item = flexGrid.rows[ht.row].dataItem; setId(item.id); setCountry(item.country); setSales(item.sales); setExpenses(item.expenses); if (popupRef.current) { popupRef.current.show(true, (sender) => { if (sender.dialogResult === 'wj-hide-ok') { const collectionView = flexGrid.collectionView; collectionView.editItem(item); setCountry((prevCountry) => { item.country = prevCountry; return prevCountry; }); setSales((prevSales) => { item.sales = prevSales; return prevSales; }); setExpenses((prevExpenses) => { item.expenses = prevExpenses; return prevExpenses; }); collectionView.commitEdit(); } flexGrid.focus(); }); } } }); }); const formatItem = useEvent((sender, e) => { if (e.panel === sender.rowHeaders && e.col === 0) { e.cell.innerHTML = '<span class="wj-glyph-pencil"></span>'; } }); const changeCountry = useEvent((sender) => { setCountry(sender.selectedValue); }); const changeSales = useEvent((sender) => { if (sender.value) { setSales(sender.value); } }); const changeExpenses = useEvent((sender) => { if (sender.value) { setExpenses(sender.value); } }); return (<div className="container-fluid"> <wjGrid.FlexGrid isReadOnly={true} selectionMode="Row" formatItem={formatItem} itemsSource={data} initialized={initGrid}> <wjGrid.FlexGridColumn binding="id" header="ID" width={50}/> <wjGrid.FlexGridColumn binding="country" header="Country" isRequired={true} dataMap={countries}/> <wjGrid.FlexGridColumn binding="sales" header="Sales" format="n2"/> <wjGrid.FlexGridColumn binding="expenses" header="Expenses" format="n2"/> </wjGrid.FlexGrid> <wjInput.Popup initialized={initPopup} className="modal-content"> <div className="modal-header"> <button type="button" className="close wj-hide">&times;</button> <h4 className="modal-title">Edit Item {id}</h4> </div> <div className="modal-body"> <div className="wj-labeled-input"> <wjInput.ComboBox itemsSource={countries} selectedValue={country} selectedIndexChanged={changeCountry}/> <label htmlFor="country">Country</label> </div> <div className="wj-labeled-input"> <wjInput.InputNumber format="n2" min={0} step={100} value={sales} valueChanged={changeSales}/> <label htmlFor="sales">Sales</label> </div> <div className="wj-labeled-input"> <wjInput.InputNumber format="n2" min={0} step={100} value={expenses} valueChanged={changeExpenses}/> <label htmlFor="expenses">Expenses</label> </div> <div className="modal-footer"> <button type="button" className="btn btn-primary wj-hide-ok">OK</button> <button type="button" className="btn btn-default wj-hide">Cancel</button> </div> </div> </wjInput.Popup> </div>); } ; const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Popup Editors</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
.wj-flexgrid { max-height: 200px; margin-bottom: 12px; } .modal-content { width: 400px; } /* style our custom 'edit buttons' */ .wj-rowheaders .wj-cell .wj-glyph-pencil { opacity: .5; transform: scale(.75); } .wj-rowheaders .wj-cell:hover .wj-glyph-pencil { opacity: 1; color: #cc0000; transform: scale(1.5) rotate(-90deg); transition: all 400ms; } /* wj-labeled-input: adapted from MDL styles */ /* label input container */ .wj-labeled-input { position: relative; font-size: 16px; display: inline-block; box-sizing: border-box; width: 300px; max-width: 100%; margin: 0 20px; padding: 20px 0; } /* Wijmo control in the container */ .wj-labeled-input .wj-control.wj-content { margin: 0; width: 100%; background-color: transparent; border: none; border-bottom: 1px solid rgba(0, 0, 0, .1); } .wj-labeled-input .wj-control.wj-content button { opacity: 0.75; border-color: rgba(0, 0, 0, .1); } .wj-labeled-input .wj-input-group .wj-form-control { float: none; } /* label in the container (must come after the control) */ .wj-labeled-input label { font-size: 16px; top: 24px; bottom: 0; margin: 0; pointer-events: none; position: absolute; display: block; width: 100%; overflow: hidden; white-space: nowrap; text-align: left; color: rgba(0, 0, 0, 0.258824); transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } /* move label out of the way when control is focused or not empty */ .wj-static-labels .wj-labeled-input :not(.wj-state-focused)+label, .wj-labeled-input .wj-state-focused+label, .wj-labeled-input :not(.wj-state-empty)+label { font-size: 12px; top: 4px; color: rgb(63, 81, 181); visibility: visible; } .wj-labeled-input .wj-state-invalid+label { color: #d50000; } /* underline label */ .wj-labeled-input label:after { background-color: rgb(63, 81, 181); bottom: 20px; content: ''; height: 2px; left: 45%; position: absolute; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); visibility: hidden; width: 10px; } /* show underline when focused */ .wj-labeled-input .wj-state-focused+label:after { left: 0; visibility: visible; width: 100%; } .wj-labeled-input .wj-state-invalid+label:after { background-color: #d50000; } /* validation message */ .wj-labeled-input .wj-error { color: #d50000; position: absolute; font-size: 12px; margin-top: 3px; visibility: hidden; display: block; } .wj-labeled-input .wj-control.wj-state-invalid~.wj-error { visibility: visible; }
function getData() { let data = []; // for (let i = 0; i < 100; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: (i + 1) % 4 == 0 }); } // return data; } export const countries = ['US', 'Germany', 'UK', 'Japan', 'Sweden', 'Norway', 'Denmark']; export const data = getData();
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'react-dom/client': 'npm:react-dom/umd/react-dom.production.min.js', 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);