Ma'lumot · compound
Daraxt jadvali
Içma-iç qatorli jadval (APG treegrid): loyiha → bosqiç → vazifa, smeta, fayllar tuzilmasi. Ota qator aria-expanded bilan oçiladi/yopiladi, daraja aria-level bilan çekinadi, ustunlar (holat, mas'ul, summa) hamma darajada tekislanadi. Birinçi katakda → oçadi, ← yopadi (yoki otaga çiqadi); ↑↓ faqat körinadigan qatorlar böylab; belgi bosilsa yoki Enter almaştiradi. Qator va katak uslubi Ma'lumot töridan (.fx-datagrid) olinadi — ikkala sinf birga yoziladi. Xulq foxui.js'da (data-fx-treegrid).
Nomi
Mas'ul
Holat
Byudjet, söm
Boş ofis rekonstruksiyasi
Jasur A.
Jarayonda
480 000 000
Loyihalaş
Malika R.
Tugadi
60 000 000
Me'moriy çizmalar
Malika R.
Tugadi
35 000 000
Muhandislik tarmoqlari
Sardor T.
Tugadi
25 000 000
Quriliş-montaj
Jasur A.
Jarayonda
340 000 000
Devor va pardozlaş
Bekzod N.
Jarayonda
190 000 000
Elektr va tarmoq
Sardor T.
Kutilmoqda
150 000 000
Jihozlaş
Nigora Q.
Kutilmoqda
80 000 000
Mebel yetkaziş
Nigora Q.
Kutilmoqda
50 000 000
Texnika örnatiş
Nigora Q.
Reja
30 000 000
Veb-sayt yangilaş
Dilfuza S.
Reja
120 000 000
Dizayn tizimi
Dilfuza S.
Reja
70 000 000
Kontent köçiriş
Alişer M.
Reja
50 000 000
Anatomiya
- root
.fx-treegridşart - name
.fx-treegrid__nameşart - toggle
.fx-treegrid__toggleixtiyoriy - label
.fx-treegrid__labelixtiyoriy - count
.fx-treegrid__countixtiyoriy
Holatlar
expandedcollapsedhover
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| → | Yopiq ota qatorni oçadi; oçiq/bargda keyingi katakka ötadi |
| ← | Oçiq ota qatorni yopadi; aks holda ota qatorga çiqadi yoki oldingi katakka ötadi |
| ↑ ↓ | Körinadigan qatorlar böylab |
| Home / End | Qatorning birinçi / oxirgi katagi |
| Ctrl+Home / Ctrl+End | Birinçi / oxirgi körinadigan qator |
| PageUp / PageDown | 10 qator |
| Enter, Boʻsh joy | Birinçi katakda ota qatorni almaştiradi |
role="treegrid"; qatorlar aria-level (1 dan), ota qator aria-expanded, aria-posinset/aria-setsize (xulq töldiradi). Birinçi ustun katagi role="rowheader". Belgi aria-hidden — holatni qator aytadi. Bitta katak tabindex="0" (roving).
Naqş: WAI-ARIA APG treegrid · rol treegrid
Kod
AI uçun: qaçon işlatiladi
Işlating
- Ma'lumot iyerarxik va har darajada bir xil ustunlar kerak (loyiha → bosqiç → vazifa, smeta, hisoblar rejasi).
Işlatmang
- Ustunsiz papkalar daraxti →
tree - Tekis, tahrirlanadigan jadval →
datagrid - Oddiy tekis jadval →
table - 5 darajadan çuqur iyerarxiya qilmang — çuqur bölsa qidiruv va yöl (breadcrumb) qöşing.
- Oçiş/yopişni faqat belgi bilan qoldirmang — klaviatura (→ ←, Enter) ham işlaşi şart.
- Ustunsiz oddiy daraxt uçun daraxt jadvalidan foydalanmang — daraxt (tree) yengilroq.
- Yopilgan ota ostidagi qatorlarni display bilan emas, hidden bilan yaşiring — aria-rowindex saqlansin.
npx foxui add treegrid
<div class="fx-datagrid fx-treegrid" role="treegrid" aria-label="Loyihalar va bosqiçlar" data-fx-treegrid style="--_cols: 320px 140px 150px 160px">
<div class="fx-datagrid__head" role="rowgroup">
<div role="row" class="fx-datagrid__row">
<div role="columnheader" class="fx-datagrid__cell">Nomi</div>
<div role="columnheader" class="fx-datagrid__cell">Mas'ul</div>
<div role="columnheader" class="fx-datagrid__cell">Holat</div>
<div role="columnheader" class="fx-datagrid__cell" data-type="num">Byudjet, söm</div>
</div>
</div>
<div class="fx-datagrid__body" role="rowgroup">
<div role="row" class="fx-datagrid__row" aria-level="1" aria-expanded="true">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Boş ofis rekonstruksiyasi</span></div>
<div role="gridcell" class="fx-datagrid__cell">Jasur A.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="info">Jarayonda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">480 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="2" aria-expanded="false">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Loyihalaş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Malika R.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tugadi</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">60 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Me'moriy çizmalar</span></div>
<div role="gridcell" class="fx-datagrid__cell">Malika R.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tugadi</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">35 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Muhandislik tarmoqlari</span></div>
<div role="gridcell" class="fx-datagrid__cell">Sardor T.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="success">Tugadi</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">25 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="2" aria-expanded="true">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Quriliş-montaj</span></div>
<div role="gridcell" class="fx-datagrid__cell">Jasur A.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="info">Jarayonda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">340 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Devor va pardozlaş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Bekzod N.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="info">Jarayonda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">190 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Elektr va tarmoq</span></div>
<div role="gridcell" class="fx-datagrid__cell">Sardor T.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">150 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="2" aria-expanded="false">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Jihozlaş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Nigora Q.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">80 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Mebel yetkaziş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Nigora Q.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="warning">Kutilmoqda</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">50 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="3">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Texnika örnatiş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Nigora Q.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="neutral">Reja</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">30 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="1" aria-expanded="false">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Veb-sayt yangilaş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Dilfuza S.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="neutral">Reja</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">120 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="2">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Dizayn tizimi</span></div>
<div role="gridcell" class="fx-datagrid__cell">Dilfuza S.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="neutral">Reja</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">70 000 000</div>
</div>
<div role="row" class="fx-datagrid__row" aria-level="2">
<div role="rowheader" class="fx-datagrid__cell fx-treegrid__name"><span class="fx-treegrid__toggle" aria-hidden="true"></span><span class="fx-treegrid__label">Kontent köçiriş</span></div>
<div role="gridcell" class="fx-datagrid__cell">Alişer M.</div>
<div role="gridcell" class="fx-datagrid__cell"><span class="fx-status" data-tone="neutral">Reja</span></div>
<div role="gridcell" class="fx-datagrid__cell" data-type="num">50 000 000</div>
</div>
</div>
</div>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-ease-standard --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-radius-badge --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-3 --fx-space-5 --fx-text-primary --fx-text-tertiary
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.