| HTML |
|---|
<!-- فونت وزیر --> <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" /> <h2 style="text-align:center; font-family:Vazir, Tahoma; color:#333; font-weight:600; margin-top:20px;"> مستندات اعتباربخشی </h2> <!-- فیلترهای زیبا --> <div id="search-filters" style=" display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:25px 0; direction:rtl;"> <select id="filterAxis" onchange="updateSubAxis(); filterTable()" style="flex:0 1 160px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;"> <option value="">انتخاب محور</option> <option value="modiriyat">رهبری و مدیریت</option> <option value="mored">مراقبت و درمان</option> <option value="hemayat">حمایت از گیرنده خدمت</option> </select> <select id="filterSubAxis" onchange="filterTable()" style="flex:0 1 160px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;"> <option value="">انتخاب زیرمحور</option> </select> </div> <!-- جدول اصلی --> <table id="myTable" border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%; margin-top: 10px; font-family:Vazir, Tahoma; direction:rtl;"> <thead style="background-color: #f2f2f2;">"> <thead> <tr> <th>محور</th> <th>زیر محور</th> <th>کمیته</th> <th>عنوان سند</th> <th>نوع سند</th> <th>تاریخ آخرین بازنگری</th> <th>تاریخ ویرایش</th> <th>کد ویرایش</th> </tr> </thead> <tbody> <!-- ردیفها توسط JS پر میشوند --> </tbody> </table> <!-- CSS جدول زیبا --> <style> #myTable { border-collapse: separate; border-spacing: 0; width: 100%; font-family: Vazir, Tahoma; direction: rtl; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; } #myTable thead th { background-color: #f2f2f2; padding: 10px; font-weight: 600; text-align: center; border-bottom: 1px solid #ddd; } #myTable tbody td { padding: 10px; text-align: center; border-bottom: 1px solid #eee; } #myTable tbody tr:nth-child(even) { background-color: #fafafa; } #myTable tbody tr:hover { background-color: #e6f7ff; transition: background-color 0.3s; } #myTable thead tr:first-child th:first-child { border-top-right-radius: 10px; } #myTable thead tr:first-child th:last-child { border-top-left-radius: 10px; } #myTable tbody tr:last-child td:first-child { border-bottom-right-radius: 10px; } #myTable tbody tr:last-child td:last-child { border-bottom-left-radius: 10px; } #search-filters select { transition: all 0.3s; } #search-filters select:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); } </style> <!-- JS داینامیک جدول و فیلتر --> <script> // JSON دادهها const documents = [ { axis:"رهبری و مدیریت", subAxis:"رهبری و مدیریت کیفیت", committee:"کمیته مدیریت کیفیت", title:"مثال 1", type:"Word", lastRevision:"2025-11-29", editDate:"2025-11-28", editCode:"001" }, { axis:"مراقبترهبری و درمانمدیریت", subAxis:"مراقبتهای عمومی بالینیمدیریت خطر، حوادث و بلایا", committee:"کمیته درمانمدیریت بحران", title:"مثال 24", type:"PDF", lastRevision:"2025-11-2825", editDate:"2025-11-2724", editCode:"002004" }, { axis:"حمایتمراقبت ازو گیرنده خدمتدرمان", subAxis:"احتراممراقبتهای به حقوق گیرنده خدمتعمومی بالینی", committee:"کمیته حقوق گیرنده خدمتدرمان", title:"مثال 32", type:"ExcelPDF", lastRevision:"2025-11-2728", editDate:"2025-11-2627", editCode:"003002" } ]; // زیرمحورها برای هر محور const zirmohvarOptions = { modiriyat: ["رهبری و مدیریت کیفیت","مدیریت خطر، حوادث و بلایا","مدیریت منابع انسانی و سلامت حرفهای","مدیریت خدمات پرستاری","فناوری و مدیریت اطلاعات سلامت","بهداشت محیط","مدیریت تجهیزات پزشکی"], mored: ["مراقبتهای عمومی بالینی","مراقبتهای حاد و اورژانس","مراقبتهای جراحی و بیهوشی","مراقبتهای مادر و نوزاد","پیشگیری و کنترل عفونت","مدیریت دارویی","خدمات تصویربرداری","خدمات آزمایشگاه","طب انتقال خون","خدمات سرپایی"], hemayat: ["تأمین تسهیلات برای گیرنده خدمت","احترام به حقوق گیرنده خدمت"] }, { axis:"مراقبت و درمان", subAxis:"پیشگیری و کنترل عفونت", committee:"کمیته بهداشت", title:"مثال 5", type:"Word", lastRevision:"2025-11-26", editDate:"2025-11-25", editCode:"005" }, { axis:"حمایت از گیرنده خدمت", subAxis:"تأمین تسهیلات برای گیرنده خدمت", committee:"کمیته پشتیبانی", title:"مثال 3", type:"Excel", lastRevision:"2025-11-27", editDate:"2025-11-26", editCode:"003" }, { axis:"حمایت از گیرنده خدمت", subAxis:"احترام به حقوق گیرنده خدمت", committee:"کمیته حقوق گیرنده خدمت", title:"مثال 6", type:"PDF", lastRevision:"2025-11-24", editDate:"2025-11-23", editCode:"006" } ]; // پر کردن جدول از JSON function populateTable() { const tbody = document.querySelector("#myTable tbody"); tbody.innerHTML = ""; documents.forEach(doc => { const tr = document.createElement("tr"); tr.innerHTML = ` <td>${doc.axis}</td> <td>${doc.subAxis}</td> <td>${doc.committee}</td> <td>${doc.title}</td> <td>${doc.type}</td> <td>${doc.lastRevision}</td> <td>${doc.editDate}</td> <td>${doc.editCode}</td> `; tbody.appendChild(tr); }); } // تنظیماستخراج زیرمحورها پس از از دادهها function getSubAxes(axis) { return documents .filter(doc => doc.axis === axis) .map(doc => doc.subAxis) .filter((v, i, a) => a.indexOf(v) === i); } // پر کردن زیرمحورها هنگام انتخاب محور function updateSubAxis() { const axisaxisSelect = document.getElementById("filterAxis").value; const subAxisSelect = document.getElementById("filterSubAxis"); const axisText = axisSelect.options[axisSelect.selectedIndex].text; subAxisSelect.innerHTML = '<option value="">همه</option>'; if (axis && zirmohvarOptions[axis]) {axisText) { const subs = getSubAxes(axisText); zirmohvarOptions[axis]subs.forEach(sub => { const option = document.createElement("option"); option.value = sub; option.textContent = sub; subAxisSelect.appendChild(option); }); } } // فیلتر کردن جدول function filterTable() { const axisaxisSelect = document.getElementById("filterAxis").value; const subAxissubAxisSelect = document.getElementById("filterSubAxis"); const axisText = axisSelect.options[axisSelect.selectedIndex].text; const subText = subAxisSelect.value; const trrows = document.querySelectorAll("#myTable tbody tr"); trrows.forEach(row => { const rowAxis = row.children[0].textContent.trim(); const rowSub = row.children[1].textContent.trim(); const axisMatch = axis === "" || (axis === "modiriyat" && !axisText || rowAxis === "رهبری و مدیریت") || (axis === "mored" && rowAxis === "مراقبت و درمان") || (axis === "hemayat" && rowAxis === "حمایت از گیرنده خدمت"); axisText; const subMatch = subAxis === ""!subText || rowSub === subAxissubText; row.style.display = axisMatch && subMatch ? "" : "none"; }); } // پر کردن جدولاجرا هنگام لود صفحه document.addEventListener("DOMContentLoaded", () => { populateTable(); }); </script> |
...