LivaDocsv1.0.112

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…

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 iki 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.

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.

İç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.

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

TreeList'i bir LivaGridStateProvider altında kullanıp sabit bir id verdiğinizde 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. Ş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.