사용자가 폴더를 선택(파일 선택 버튼)하면 하위 폴더 정보를 가져와 테이블로 표시하는 기능을 합니다. 기본적인 폴더 선택 및 테이블 출력 기능이 구현되어 있으며, 날짜 처리나 UI 개선을 통해 더욱 향상시킬 수 있습니다
▷ html 코드
<!DOCTYPE html>
<html>
<head>
<title>폴더 이름 가져오기</title>
<style>
body { font-family: sans-serif; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th {
text-align: center;
background-color: rgb(210, 229, 155);
border: 1px solid black;
}
.title-container {
display: flex;
justify-content: center;
background-color: rgba(165, 192, 224, 0.954);
}
h1 {
color: black;
margin-bottom: 20px;
font-size: 32px;
}
/* New style for single-line layout */
.folder-selection {
display: flex;
align-items: center;
gap: 20px;
margin: 20px 0;
}
input[type="file"] {
font-size: 14px;
}
.folder-selection p {
margin: 0;
font-size: 16px;
}
</style>
</head>
<body>
<div class="title-container">
<h1>폴더 이름 가져오기</h1>
</div>
<div class="folder-selection">
<input type="file" id="folderInput" webkitdirectory onchange="chooseFolder()">
<p>전체 폴더 개수: <span id="totalFolders">0</span></p>
<pp style="margin-left: 100px;">선택한 폴더 이름: <span id="selectedFolderName"></span></p>
</div>
<table>
<thead>
<tr>
<th>번호</th>
<th>폴더 이름</th>
<th>레벨</th>
<th>생성 날짜</th>
</tr>
</thead>
<tbody id="folderTable">
</tbody>
</table>
<script>
function chooseFolder() {
const input = document.getElementById('folderInput');
const files = input.files;
const folders = [];
for (let i = 0; i < files.length; i++) {
const file = files[i];
const pathParts = file.webkitRelativePath.split('/');
// 최상위 폴더인 경우, 파일 이름에서 폴더 이름 추출
const folderName = pathParts.length === 1 ? file.name : pathParts.slice(0, -1).join('/');
const level = pathParts.length - 1; // 레벨 계산 (파일명 제외)
const created = "2025.01.13"; // 임시 생성 날짜 (실제 값은 서버에서 가져와야 함)
// 중복된 폴더는 제외
if (!folders.find(f => f.name === folderName)) {
folders.push({ name: folderName, level: level, created: created });
}
}
displayFolders(folders);
}
function displayFolders(folders) {
const totalFolders = folders.length;
document.getElementById("totalFolders").textContent = totalFolders;
if (totalFolders > 0) {
const selectedFolderName = folders[0].name;
document.getElementById("selectedFolderName").textContent = selectedFolderName;
}
const tableBody = document.getElementById("folderTable");
tableBody.innerHTML = ""; // 기존 내용 지우기
folders.forEach((folder, index) => {
const row = tableBody.insertRow();
let cell = row.insertCell();
cell.textContent = index + 1; // 번호 매기기 (수정됨)
cell.style.textAlign = "center"; // 가운데 정렬 스타일 적용
row.insertCell().textContent = folder.name;
cell = row.insertCell(); // 레벨 셀
cell.textContent = folder.level;
cell.style.textAlign = "center"; // 가운데 정렬 스타일 적용
cell = row.insertCell();
cell.textContent = folder.created;
cell.style.textAlign = "right"; // 오른쪽 정렬 스타일 적용
});
}
</script>
</body>
</html>
▷Web 페이지
□ Creo 파일이 포함된 폴더 이름만 가져오기
html 파일을 더블 클릭하면, 크롬 브라우저에서 실행 됩니다. Web 서버로 구성 가능 합니다. 하지만 보안 이슈 때문에 외부 Web 서버로 구성할 수 없습니다. 제공된 html 파일을 이용하여 Creo 파일이 있는 폴더 이름을 확인 하십시요
엑셀 VBA를 활용하면, 엑셀 파일로 데이터를 가져올수 있습니다. html 파일 내용을 엑셀 파일로 변환 할수 있습니다.
Html 파일은 AI를 이용하여 개발 하였습니다. 프롬프트를 만들고, html 파일을 만들고, 기능 테스트하여 만들었습니다.
클라우드에 데이터가 있다면 보안 이슈없이 모델 데이터를 가져올수 있습니다. 데이터 베이스와 연계하여, 수집된 데이터를 가공 할수 있습니다. folderlist.html은 Creo 모델을 찾기위한 map 입니다. 사람들이 모여 있는 동네를 이름을표시 합니다. 동네 이름을 알면, 그곳에 살고 있는 사람을 구분 할수 있습니다. Part는 몇개, Assembly는 몇개, Drw는 몇개인지 분석 할 수 있습니다. 각각의 파일 사이즈는 몇 KB 인지, 언제 수정된 최신 파일인지 알수 있습니다. 즉 동네의 주민들 이름을 기준으로 상태를 확인 할수 있습니다.
Window 시스템에 있는 폴더, 파일 이름 및 특성을 모두 데이터 베이스에 보낼수 있습니다. 만을 폴더 이름에 코드를 넣고 코드 마다 어떤 특성을 부여 했다면, 특성에 따라 폴더의 내용을 확인할 수 있습니다. 예를 들어 부자 동네(라이브러)의 주민들 이름을 가져올수 있습니다.
AI가 사람의 말과 그림을 이해하는 시대 입니다. 어려운 코딩도 누구나 어느 정도 수준으로 만들수 있습니다. 사람과 사람이 협력을 한다면, 새로운 아이디어로 Html 기능을 만들수 있습니다. AI는 점점 빠르게 사람을 따라 잡을것 입니다. 이것을 이용해야 합니다. 그것 중 하나가 코딩 입니다.
'JavaScript For Creo' 카테고리의 다른 글
| 깃-허브 학습]깃-허브란? (0) | 2025.02.24 |
|---|---|
| 학습] 선택된 폴더에 포함된 파일 이름 모두 가져오는 html 파일 (0) | 2025.02.24 |
| 학습] Creo.js 및 browser.creojs 불러오기 (웹에서 경로표기법) (0) | 2025.02.23 |
| Chrome 문제를 해결을 위한 Creo,Chrome DevTools를 사용하는 방법 (0) | 2025.02.23 |
| 학습] 버튼을 클릭하면, 메세지 보이기 (0) | 2025.02.21 |
