| 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;">
<tr>
<th>محور</th>
<th>زیر محور</th>
<th>کمیته</th>
<th>عنوان سند</th>
<th>نوع سند</th>
<th>تاریخ آخرین بازنگری</th>
<th>تاریخ ویرایش</th>
<th>کد ویرایش</th>
</tr>
</thead>
<tbody>
<!-- ردیفها توسط JS پر میشوند -->
</tbody>
</table>
<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:"مثال 2", type:"PDF", lastRevision:"2025-11-28", editDate:"2025-11-27", editCode:"002" },
{ axis:"حمایت از گیرنده خدمت", subAxis:"احترام به حقوق گیرنده خدمت", committee:"کمیته حقوق گیرنده خدمت", title:"مثال 3", type:"Excel", lastRevision:"2025-11-27", editDate:"2025-11-26", editCode:"003" }
];
// زیرمحورها برای هر محور
const zirmohvarOptions = {
modiriyat: ["رهبری و مدیریت کیفیت","مدیریت خطر، حوادث و بلایا","مدیریت منابع انسانی و سلامت حرفهای","مدیریت خدمات پرستاری","فناوری و مدیریت اطلاعات سلامت","بهداشت محیط","مدیریت تجهیزات پزشکی"],
mored: ["مراقبتهای عمومی بالینی","مراقبتهای حاد و اورژانس","مراقبتهای جراحی و بیهوشی","مراقبتهای مادر و نوزاد","پیشگیری و کنترل عفونت","مدیریت دارویی","خدمات تصویربرداری","خدمات آزمایشگاه","طب انتقال خون","خدمات سرپایی"],
hemayat: ["تأمین تسهیلات برای گیرنده خدمت","احترام به حقوق گیرنده خدمت"]
};
// پر کردن جدول از 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 updateSubAxis() {
const axis = document.getElementById("filterAxis").value;
const subAxisSelect = document.getElementById("filterSubAxis");
subAxisSelect.innerHTML = '<option value="">همه</option>';
if (axis && zirmohvarOptions[axis]) {
zirmohvarOptions[axis].forEach(sub => {
const option = document.createElement("option");
option.value = sub;
option.textContent = sub;
subAxisSelect.appendChild(option);
});
}
}
// فیلتر کردن جدول
function filterTable() {
const axis = document.getElementById("filterAxis").value;
const subAxis = document.getElementById("filterSubAxis").value;
const tr = document.querySelectorAll("#myTable tbody tr");
tr.forEach(row => {
const rowAxis = row.children[0].textContent.trim();
const rowSub = row.children[1].textContent.trim();
const axisMatch =
axis === "" ||
(axis === "modiriyat" && rowAxis === "رهبری و مدیریت") ||
(axis === "mored" && rowAxis === "مراقبت و درمان") ||
(axis === "hemayat" && rowAxis === "حمایت از گیرنده خدمت");
const subMatch = subAxis === "" || rowSub === subAxis;
row.style.display = axisMatch && subMatch ? "" : "none";
});
}
// پر کردن جدول هنگام لود صفحه
document.addEventListener("DOMContentLoaded", () => {
populateTable();
});
</script> |
...