sychoi
/
HANYANG_REACT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 테이블 컴포넌트 분리

This commit is contained in:
sychoi 2024-08-06 10:41:41 +09:00
parent a2915e66e1
commit 9de7296e11
5 changed files with 90 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
www/ksvc/base/insp/insp.js
View File

@ -1,5 +1,5 @@
const req = {
searchReq : [
{ type : "text", id : "INSP_ITEM", placeholder : "검사항목" },
{ type : "checkbox", id : "INSP_ITEM", label : "검사항목", checked : "checked" }
@ -12,15 +12,22 @@ const req = {
filter_btn : false,
put_btn : false,
addBtn : [
{ id:"orgna_btn", value:"편성확정", disabled: "false" }
{ id:"orgna_btn", value:"편성확정", disabled: true }
]
}
};
const App = () => (
<>
<Header req={req} />
<div className="table-header item-header">
<Header req={req} />
</div>
<TableContainer>
<Table title={"검사항목등록"} height={"tb-height-half"}/>
<Table title={"검사항목등록2"} height={"tb-height-half"}/>
</TableContainer>
</>
);
ReactDOM.render(<App />, document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

48
www/ksvc/base/insp/insp.php
View File

@ -16,55 +16,11 @@ include_once _SVC_INC_PATH_ . "/header.php";
<?php include_once _SVC_INC_PATH_ . "/sidebar.php"; ?>
<!-- 사이드바 불러오기 종료 // -->
<!-- 검색 조회 및 저장 -->
<div class="table-header item-header" id="root">
</div>
<!-- 검색 조회 및 저장 종료 // -->
<div id="root"></div>
<!-- 컨텐츠 컨테이너 -->
<div class="contents-container">
<!-- 테이블 컨테이너 -->
<div class="table-container">
<div class="inner-container">
<div class="table-box" id="main_container">
<!-- 테이블 헤더 (제목, 추가, 삭제, 저장) -->
<div class="table-title">
<p class="title">검사항목</p>
<!-- 버튼 -->
<div class="button-box">
<button class="add-btn reverse-btn">
<?php include _SVC_INC_PATH_ . '/img/add.php' ?>
추가
</button>
<button class="remove-btn reverse-btn">
<?php include _SVC_INC_PATH_ . '/img/delete.php' ?>
삭제
</button>
</div>
<!-- 버튼 종료 // -->
</div>
<!-- 테이블 헤더 종료 // -->
<!-- 테이블 -->
<div class="tb-height-full">
<div class="hy-table" id="insp_table"></div>
</div>
<!-- 테이블 종료 // -->
</div>
</div>
</div>
<!-- 테이블 컨테이너 종료 // -->
</div>
<!-- 컨텐츠 컨테이너 종료 // -->
</div>
<!-- 메인 섹션 종료 // -->
@ -73,6 +29,8 @@ include_once _SVC_INC_PATH_ . "/header.php";
<?php include_once _SVC_INC_PATH_ . "/footer_common.php"; ?>
<script type="text/babel" src="../../component/Header.js"></script>
<script type="text/babel" src="../../component/Table.js"></script>
<script type="text/babel" src="../../component/TableContainer.js"></script>
<script type="text/babel" src="./insp.js"></script>
<script src="./insp_excel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>

20
www/ksvc/component/Header.js
View File

@ -5,11 +5,11 @@ const Header = ({req}) =>{
<div className="search-container">
{req.searchReq.map(s=>{
{req.searchReq.map((s, sidx)=>{
switch(s.type){
case "text":
return (
<div className="input-container flexcol gap06">
<div key={'input_'+sidx} className="input-container flexcol gap06">
<div className="input-box">
<input type={s.type} id={s.id} placeholder={s.placeholder}></input>
</div>
@ -17,21 +17,21 @@ const Header = ({req}) =>{
);
case "checkbox":
return (
<div className="input-container flexrow checkbox-container">
<label for={s.id}>{s.label}</label>
<div key={'input_'+sidx} className="input-container flexrow checkbox-container">
<label htmlFor={s.id}>{s.label}</label>
<div className="input-box">
<input type={s.type} id={s.id} checked={s.checked}></input>
<input type={s.type} id={s.id} defaultChecked={s.checked}></input>
</div>
</div>
)
case "select":
return (
<div className="input-container flexcol gap06">
<div key={'input_'+sidx} className="input-container flexcol gap06">
<div className="input-box">
<select name={s.id} id={s.id}>
<option value="">- 전체 -</option>
{s.option.map(op=>(
<option value={op.value}>{op.text}</option>
{s.option.map((op, opidx)=>(
<option key={'op_'+opidx} value={op.value}>{op.text}</option>
))}
</select>
</div>
@ -51,9 +51,9 @@ const Header = ({req}) =>{
<button className="point-btn" disabled={req.btn["excel_data"]} id="excel_data">엑셀 다운로드</button>
<button className="point-btn" disabled={req.btn["excel_up"]} id="excel_up">엑셀 업로드</button>
{ req.btn.addBtn ? req.btn.addBtn.map((add)=>{
{ req.btn.addBtn ? req.btn.addBtn.map((add, idx)=>{
return(
<button className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
<button key={'btn_'+idx} className="point-btn" disabled={add.disabled} id={add.id}>{add.value}</button>
)
}) : null }

48
www/ksvc/component/Table.js Normal file
View File

@ -0,0 +1,48 @@
class Table extends React.Component {
constructor(props){
super(props);
this.title = props.title;
this.height = props.height;
this.ajaxUrl = "./insp.ajax.php";
}
componentDidMount() {
const tableData = [
{id: 1, name: "John", age: 29},
{id: 2, name: "Jane", age: 34},
{id: 3, name: "Smith", age: 23}
];
const table = new Tabulator(this.tableRef, {
data: tableData,
layout: "fitColumns",
columns: [
{title: "ID", field: "id", width: 150},
{title: "Name", field: "name"},
{title: "Age", field: "age"}
]
});
}
render() {
return (
<>
<div className="table-title">
<p className="title">{this.title}</p>
<div className="button-box">
<button className="add-btn reverse-btn" onClick={this.addRow}>추가</button>
<button className="remove-btn reverse-btn" onClick={this.removeRow}>삭제</button>
</div>
</div>
<div className={this.height}>
<div className="hy-table" ref={el => (this.tableRef = el)} id="insp_table"></div>
</div>
</>
);
}
}

18
www/ksvc/component/TableContainer.js Normal file
View File

@ -0,0 +1,18 @@
const TableContainer = ({title, children}) => {
return (
<div className="contents-container">
<div className="table-container">
<div className="inner-container">
<div className="table-box" id="main_container">
{children}
</div>
</div>
</div>
</div>
)
}