LivaDocsv1.1.2

LivaTreeList

DevExtreme TreeList üzerine kurulu hiyerarşik veri tablosu. LivaDataGrid ile aynı veri kaynağı desenini paylaşır; ek olarak keyExpr ve parentIdExpr çifti ile düz bir diziden ağaç yapısı kurar. Özyinelemeli seçim, seçim özeti, satır sürükleme ve satır içi düzenleme özellikleri hazırdır.

import { LivaTreeList, type LivaTreeListColumn } from "@dataliva/livalib";

Hiyerarşi

keyExpr her satırın anahtarını, parentIdExpr üst satırın anahtarını gösterir. Kök satırlar burada parentId: 0 ile işaretlenir; bunu rootValue ile açıkça bildirmek gerekir. LivaTreeList rootValue için varsayılan atamaz — verilmezse hiçbir satır kök sayılmaz ve tablo "No data" görünür. autoExpandAll tüm dalları açık başlatır. Kolonlar LivaTreeListColumn tipindedir; sayısal biçimlendirme için customizeText kullanılabilir.

type Birim = { id: number; parentId: number; ad: string; yonetici: string; personel: number; butce: number };

const birimler: Birim[] = [
  { id: 1, parentId: 0, ad: "Genel Müdürlük", yonetici: "Ayşe Yılmaz", personel: 4, butce: 1200000 },
  { id: 2, parentId: 1, ad: "Finans", yonetici: "Mehmet Demir", personel: 12, butce: 420000 },
  // ...
];

const kolonlar: LivaTreeListColumn[] = [
  { dataField: "ad", caption: "Birim" },
  { dataField: "yonetici", caption: "Yönetici" },
  { dataField: "personel", caption: "Personel", dataType: "number", alignment: "right", width: 110 },
  {
    dataField: "butce",
    caption: "Bütçe",
    dataType: "number",
    alignment: "right",
    customizeText: (c) => (typeof c.value === "number" ? c.value.toLocaleString("tr-TR") + " ₺" : ""),
  },
];
Departman ağacı
Önizleme yükleniyor…

Seçim

selectionMode varsayılanı 'multiple''dır: satır başına onay kutuları kendiliğinden gelir. Seçim istemiyorsanız selectionMode="none" verin. recursiveSelection bir üst düğüm seçildiğinde tüm alt düğümleri de seçer. showSelectionSummary başlığın yanına seçili / toplam biçiminde bir KPI pili ekler.

Seçim kontrollü çalışır: selectedRowKeys ile seçili anahtarları verip onSelectionChanged içinde state'i güncellemek gerekir. Bu ikisi bağlanmazsa onay kutuları görünür ama tıklama sonrası seçim geri alınır.

onSelectionChanged olayı DevExtreme alanlarına ek olarak selectedRowKeysWithDescendants taşır: seçili düğümlerin tüm alt anahtarlarını içerir. Bir üst düğüm seçildiğinde alt kayıtları tek istekte çekmek için kullanılır (ör. loadUrl'e ccntId=1,2,3 göndermek).

Özyinelemeli seçim
Önizleme yükleniyor…

Toplam kayıt satırı — totalRow

totalRow ağacın altına (alt araç çubuğunun üstüne) Toplam kayıt: N şeridini ekler. Dizi kaynakta başlangıç değeri dizinin uzunluğudur; yani yalnızca kök satırlar değil, açık ya da kapalı tüm düğümler sayılır. Ağaç içeriği her hazırlandığında sayı veri kaynağının bildirdiği toplamla (getDataSource().totalCount()) tazelenir; toplam alınamazsa son bilinen değer kalır, hiç bilinmiyorsa — görünür. Etiket ve sayı biçimi lang'a göre seçilir (EN… → Total records, aksi halde Toplam kayıt). Varsayılan false'tur.

Toplam kayıt satırı
Önizleme yükleniyor…

Ortak prop preset'i — getTreeList()

getGridProps()'un ağaç karşılığı. Çoğu ağaçta tekrar eden temel propları tek tek yazmak yerine projenin kendi preset fonksiyonunu spread edin:

import { LivaTreeList } from "@dataliva/livalib";
import { getTreeList } from "@/features/_shared/components";

<LivaTreeList
  {...getTreeList()}
  keyExpr="id"
  parentIdExpr="parentId"
  rootValue={0}
  dataSource={birimler}
  columns={kolonlar}
/>

Spread'i en başa koyun ki sayfaya özel proplar (ör. remoteOperations) ezebilsin. Ağaç yapısı (keyExpr / parentIdExpr / rootValue), yetki propları, export, veri kaynağı ve olaylar preset'e girmez; bunlar her sayfanın kendi kararıdır.

Preset fonksiyonunu tanımlama

LivaBudget'ta _shared/components/getTreeList.ts altında durur:

import { LivaTreeList } from "@dataliva/livalib";
import type { ComponentProps } from "react";

type LivaTreeListProps = ComponentProps<typeof LivaTreeList>;

export function getTreeList(): Partial<LivaTreeListProps> {
  return {
    gridSize: "xxs",
    fullHeight: true,
    editMode: "batch",
    scrollingMode: "virtual",
    showToolbar: true,
    showSearchPanel: true,
    showColumnChooser: true,
    isLivaContextMenu: true,

    lang: currentLanguage(),          // Accept-Language başlığı
    noDataText: t("Common.NoData"),   // çeviriden
  };
}

getGridProps()'tan farkı: TreeList'te kolon seçici prop'u showColumnChooser adıyla gelir (DataGrid'de columnChooser), ve allowGrouping yoktur. Değerler mevcut kullanımların taranmasıyla seçilir: LivaBudget'taki 21 <LivaTreeList> kullanımında gridSize: "xxs" 20/20, fullHeight 19/19, showSearchPanel 15/15, editMode: "batch" 10/10 çıktı.

Preset, bileşenin üç varsayılanını bilerek değiştirir: LivaTreeList'in kendi showSearchPanel varsayılanı false, editMode varsayılanı 'row', scrollingMode varsayılanı 'standard''dır.

Bu bir hook DEĞİLDİR ve hook çağırmaz. getGridProps() ile aynı gerekçe: fonksiyon JSX içinde koşullu dallarda çağrılabildiği için hook barındırırsa render'lar arasında hook sayısı değişir ve React "Rendered more hooks than during the previous render" hatası verir. Dil ve çeviri değerlerini store'dan / i18n örneğinden doğrudan okuyun.

Kütüphane tarafı — baseTreeListProps

@dataliva/livalib, baseGridProps'un ağaç karşılığı olan asgari bir nesne de dışa aktarır:

PropDeğer
gridSize"xs"
fullHeighttrue
showToolbartrue
showSearchPaneltrue
showColumnChoosertrue
editMode"batch"

Sayfalarda doğrudan spread etmeyin; yeni bir projede preset fonksiyonuna başlangıç noktası olarak kullanın. Ayrıntı: getGridProps() bölümü.

Toplu işlemler ve ondalık basamak

selectionMode="multiple" iken alt araç çubuğunda İşlemler menüsü çıkar (bulkActions, bulkSelectionTools, allowBulkDelete, onBulkDelete). Sayısal kolonlara sağ tıklandığında Görünüm → Ondalık Basamak menüsü açılır. Her iki davranış da LivaDataGrid ile birebir aynıdır; oradaki bölümlere bakın.

Aralık kuralı (Min / Max) — sağ tık menüsü

Sayısal ve ay (V001…V012) kolonlarında sağ tık menüsünün Denetim başlığı altında Aralık Gir (Min / Max) yer alır: kolona alt/üst sınır konur, dışında kalan hücreler kırmızı (ya da seçilirse yeşil) işaretlenir. Kural hiçbir hücreye yazmaz, yalnızca görsel bir denetimdir. Kapsam olarak yalnız o kolon, tüm ay kolonları ya da tüm sayı kolonları seçilebilir; uygulamadan önce kaç hücrenin dışarıda kalacağı önizlenir.

Mantık ve pencere LivaDataGrid ile ortaktır — kapsam, renk ve önizleme ayrıntıları için LivaDataGrid sayfasındaki Aralık kuralı bölümüne bakın.

Başlık filtresinde arama

showHeaderFilter açtığınızda değer listesinin arama kutusuna bir mod seçici (Contains / Begins with / Ends with) eklenir ve arama, ham sayı yerine listede yazılı görünen metin üzerinde çalışır. Liste yeniden açıldığında uygulanmış (işaretli) değerler en üstte listelenir. Otomatiktir, prop gerektirmez; DataGrid ile aynı davranış — ayrıntı ve istisnalar için LivaDataGrid sayfasındaki Başlık filtresinde arama bölümüne bakın.

LivaTreeList'te Excel kipi (blok seçimi, hücre içi formül, doldurma tutamacı, seçim özeti) yok — excelMode propu yalnızca LivaDataGrid'de bulunur. Ağaçta satır hiyerarşisi ve genişlet/daralt, dikdörtgen blok seçimiyle bağdaşmıyor.

Kolon tipi — LivaTreeListColumn

DataGrid kolonuyla aynı alanların çoğunu paylaşır (dataField, caption, dataType, format yerine customizeText, width, visible, cellRender, lookup, dropdown, fixed, fixedPosition, cellAlignment, hidingPriority, summary, required). Ağaca özgü ek alan:

AlanTipAçıklama
isCascadebooleanÜst satırda düzenlenen değer tüm alt satırlara yayılır. Alt satırlarda karışık değer varsa üst hücre — gösterir. Varsayılan false.
headerFilterDevExtreme Column headerFilter alanıBaşlık filtresi listesini kendiniz tanımlar. Verilmezse Liva'nın biçimli metin üzerinde arayan varsayılanı uygulanır.

dropdown alanı LivaTreeListColumnDropdown tipindedir ve DataGrid'deki LivaDataGridColumnDropdown ile aynı alanları taşır (dropDownWidth, searchEnabled ve arama modu seçicisi dahil). İki fark var: size alanı yoktur — seçici her zaman 'xs' boyutunda çizilir — ve remoteOperations boolean yerine { filtering?, sorting?, grouping?, paging? } nesnesi de alabilir.

İçe/dışa aktarma

exportOptions (LivaTreeListExportOptions) enabled, actions ('excelAll' \| 'excelSelected' \| 'csv') ve fileName alanlarını alır — DataGrid'den farkı, PDF dışa aktarmanın olmamasıdır. importExportSettings ise DataGrid ile ortak LivaDataGridImportExportSettings tipini kullanır; kurulum için Veri Alışverişi.

İçe aktarma başarıyla bittiğinde sihirbaz closeOnComplete'ten bağımsız olarak hemen kapanır (DataGrid'de varsayılan, rapor adımında açık kalmaktır), ağaç refresh() edilir ve importExportSettings.onImportCompleted(report) çağrılır. refresh() yalnızca bağlı veri kaynağını yeniden okur; yerel dizi veriyorsanız veriyi bu geri çağrıda kendiniz yeniden yükleyin.

Adlandırılmış düzenler ve klavye seçimi

TreeList bir LivaGridStateProvider altında kullanıldığında Düzen menüsü açılır. Bu durumda kolon yeniden boyutlandırma ve sıralama, ilgili proplar açıkça kapatılmadıkça otomatik etkinleşir. Kolon sırası, genişliği, görünürlüğü, sabitleme, sıralama ve filtreler saklanır; açık/kapalı düğümler, seçim ve arama metni saklanmaz. id verilmezse kayıt anahtarı sayfa yolu, keyExpr ve kolon alanlarından otomatik üretilir; aynı sayfada aynı kolonlu iki ağaç varsa ya da kolon eklenip çıkarıldığında düzenlerin korunması gerekiyorsa sabit bir id verin. Şema değişimlerinde stateVersion artırılmalıdır. Kurulum ayrıntıları.

selectionMode="multiple" iken editör dışında basılan Ctrl+A (macOS'ta Cmd+A) tüm satırları seçer. Giriş, metin alanı ve düzenlenen hücrelerde tarayıcının metin seçme davranışı korunur.