Excel gibi davranan kopyala-yapıştır — ve davranmadığı yerler

"Excel gibi düzenleme" ifadesi Excel'in hangi parçalarını kastettiğini söylemiyor. Bir dikdörtgen seçmek için sürükleyebilmeniz anlamına gelebilir. Ctrl+C'nin panoya kullanılabilir bir şey koyması, ya da doldurma tutamacının sayısal bir seriyi yıllarca süren tablo alışkanlığının beklediği gibi uzatması anlamına da gelebilir. Bunlar birbirinden çok farklı miktarda davranış, o yüzden burada, jest jest, gerçekte ne yaptığımız var, artı Excel karşılaştırmasının doğru olmayı bıraktığı kesin yerler.

Tek anahtar, üç davranış

Ayrı bir rangeSelection, fillHandle veya clipboard prop'u yok. Dikdörtgen, doldurma tutamacı ve pano jestleri, üçü de editing.range üzerinde:

import { EnterpriseDataGrid } from '@kanunilabs/datagrid-react-enterprise';

<EnterpriseDataGrid
  licenseKey={key}
  dataSource={rows}
  rowKey="id"
  columns={columns}
  editing={{ mode: 'cell', range: true }}
/>

range varsayılan olarak true, yani hücre düzenlemeyi açmak size zaten dikdörtgeni veriyor — ayrıca bir şeye izin vermenize gerek yok, ve düzenlemeyi kapatmak onu da kapatıyor. Playground'da çalışırken görün.

Jestler

Ok tuşları, Home ve PageUp/PageDown için son satır Excel'in de kuralı: bir aralık seçiliyken bunlardan birine basınca Excel tek bir hücreye geri döner ve onu taşır. (Tab farklı — Excel'de etkin hücreyi seçimi çökertmeden seçimin içinde gezdirir.) Bu kuralı somut bir nedenle aldık. Bir hücreye tıklamak bir dikdörtgen başlatıyor, ve dikdörtgenin çapası odaklı hücreyle aynı şekilde çerçeveleniyor. Eskiden ok tuşları odağı taşıyıp çapayı yerinde bırakıyordu; ekranda aynı anda iki çerçeveli hücre duruyordu ve hangisinin güncel olduğu anlaşılmıyordu. Gezinince çökertmek ekranda tek bir işaret bırakıyor.

Gerçekten kim yazabilir

allowUpdating, satır ve sütun üzerinde tek bir predicate, ve hücre editörü, kesme, yapıştırma ve doldurma tutamacının hepsi ona soruyor:

editing={{
  mode: 'cell',
  allowUpdating: (row, columnId) => columnId !== 'id' && !row?.locked,
}}

Onun reddettiği bir hücre, ya da editable: false olan bir sütun, yine de kopyalanır — kilitli bir sütun Ctrl+C'ye görünmez değildir. Yalnızca temizlenmez, üzerine yapıştırılmaz ve doldurulmaz. Jestin geri kalanı devam eder; yani bir yapıştırmanın içindeki tek bir salt-okunur sütun yapıştırmayı iptal etmez.

Gözlemleyebilecekleriniz

Jestler bir parantez yayınlıyor — bir Start olayı ve bir End olayı. Bir Start ateşlendiyse ardından End mutlaka geliyor, jestin hiçbir şey yazmadığı ve yarıda hata fırlattığı durumlar dahil; yani ikisi arasında kendi işini duraklatan bir dinleyici (örneğin bir yapıştırmanın ürettiği cellValueChanged olaylarını toplu işlemek için) asla duraklatılmış halde kalmaz:

onReady={(controller) => {
  controller.events.on('fillStart', (e) => console.log('filling', e.cellCount));
  controller.events.on('fillEnd', (e) => console.log('done', e.performed));

  controller.events.on('cellValueChanged', (e) => {
    // e.source: 'edit' | 'cut' | 'fill' | 'paste' | 'undo' | 'redo'
    if (e.source === 'paste') audit(e.rowKey, e.columnId, e.value);
  });
}}

Aynı desen cutStart/cutEnd, copyStart/copyEnd ve pasteStart/pasteEnd'i de kapsıyor. Bunun üzerine undo/redo kuruyorsanız bilmeye değer: 200 hücreyi yapıştırmak bir undo adımı, 200 değil.

statusBar'ı açın, dikdörtgen hiçbir şey bağlamadan kendi istatistiklerini bildirsin — hücre sayısı, toplam, ortalama, min, max:

statusBar={{ items: ['totalRows', 'selectedRows', 'rangeStats'] }}

Dikdörtgenin içindeki sayısal olmayan hücreler bu hesaplamalarda atlanır, sıfır sayılmaz — bu, aynı sürüklemede sayısal bir sütunun yanında bir metin sütunu olduğu an önem kazanıyor.

"Excel gibi"nin gerçek olmayı bıraktığı yerler

Bu kısım, entegre etmeden önce okunmaya değer, bir kullanıcı aslında belgelenmiş bir sınır olan bir "bug" bildirdikten sonra değil.

• Dikdörtgene giden hiçbir klavye yolu yok. Shift+Yukarı/Aşağı, hücre dikdörtgenini değil (çoklu seçim modunda) satır seçimini uzatır, ve Ctrl+A satırları seçer. Dikdörtgen yalnızca fare ile, ve doldurma tutamacı aria-hidden — Excel'in kendi klavye doldurma kısayollarının aksine ona giden hiçbir klavye veya ekran okuyucu yolu yok.
• Aynı anda bir dikdörtgen. Excel'in izin verdiği gibi ayrık, çok bölgeli bir seçim kurmak için Ctrl-tıklama yok.
• Yapıştırma asenkron pano API'sine ihtiyaç duyuyor — navigator.clipboard.readText(), eski clipboardData olayına geri dönüş yok. Bu, güvenli bir bağlam, artı tarayıcının bir sayfanın panoyu okumasından önce gösterdiği izin istemi ya da onay demek; tarayıcı reddettiğinde, yapıştırma hata vermek yerine sessizce hiçbir şey yapmıyor.
• Yapıştırma kırpar, grid'i asla büyütmez. 100 satır kopyalayıp sondan bir önceki satıra yapıştırın, yalnızca fiziksel olarak sığan satırlar yazılır — "yapıştırmaya sığması için daha fazla satır ekle" davranışı yok.
• Tip dönüşümü yalnızca sayıları ve boolean'ları kapsıyor, başka hiçbir şeyi değil. Yapıştırılan bir tarih düz metin olarak yazılır, ayrıştırıcının okuyamadığı bir sayı da öyle — bir tarih tipine sessiz yeniden biçimlendirme yok.
• Doldurma yalnızca eşit aralıklı sayısal bir seriyi genişletiyor. Adımı sabit iki veya daha fazla sayı (1, 2 ya da 10, 20, 30) aritmetik bir dizi olarak devam eder. Aralıkları eşit olmayan sayılar, Excel'in doğrusal bir eğilim uyduracağı yerde, desen olarak tekrarlanır; metin, tarihler, boolean'lar ve boş hücreler de öyle — ay adı dizisi yok, Item 1'in Item 2'ye artması yok, tarih serisi yok. Doldurma değerleri yazar, hücre biçimlerini asla.
• Kopyalanan şey kullanıcının gördüğü şey, yani bir lookup sütununun etiketi ve varsa valueFormatter çıktısı — altta gerçekten saklanan ham değer değil. Bu tek yönlü: Antalya etiketini geri yapıştırmak, altta saklanan kodu çözmez.
• Sıralama veya filtreleme dikdörtgeni temizlemiyor. Koordinatlar görünüm indeksleri, yani bir sıralamadan sonra dikdörtgen altındaki farklı satırların üzerinde aynı ekran konumunda oturur — uygulamanızda kafa karıştırıcı olacaksa kendiniz temizlemeye değer.
• Dikdörtgenin şekli için özel bir olay yok. selectionChanged satır seçimidir; bir rangeSelectionChanged yok. Jestlerin olduğunu gözlemleyebilirsiniz, geçerli dikdörtgenin sınırlarını doğrudan bir olaydan sorgulayamazsınız.
• İstatistikler 100.000 hücrede duruyor ve o noktadan sonra bir sayı yerine truncated bildiriyor, sessizce daha uzun sürmek yerine.
• Community bunların hiçbirine sahip değil. Dikdörtgen yok, doldurma tutamacı yok, kesme yok, TSV-olarak-yapıştırma yok. Community'nin Ctrl+C'si seçili tüm satırları kopyalar, ki bu aynı klavye kısayoluna sahip farklı bir özellik.

Bunların hiçbiri bir lisans kontrolünün arkasına gizlenmiş de değil — bir lisans anahtarı olmadan özellikler yine çalışır, filigranlı, yani yukarıdaki gerçek davranışı, uyup uymadığına karar vermeden önce değerlendirebilirsiniz, sadece hakkında okumak yerine.

Bir grid'e karar vermeden önce gerçekten test edilecek şey

Bir özellik listesindeki "Excel gibi kopyala-yapıştır", yapıştırma ve doldurmanın salt-okunur bir hücreye uyup uymadığını ya da doğrudan üzerine yazıp yazmadığını, kilitli bir sütunun yalnızca-kopyalanabilir mi yoksa görünmez mi olduğunu, yapıştırmanın grid'i büyütüp büyütemeyeceğini, ya da doldurmanın bir tarih serisini tanıyıp tanımadığını söylemiyor. Her birini çalışan bir örneğiniz olduğunda elle kontrol etmek yaklaşık bir dakika sürüyor — bizimki playground'da.

---

Aralık seçimi, doldurma ve pano, olaylar referansında anlatılan aynı düzenleme katmanında oturuyor — düzenleme bir tuş vuruşundan, bir doldurmadan veya bir yapıştırmadan gelse de aynı cellValueChanged olayı ateşleniyor, ve source alanı bunları birbirinden ayırıyor. Tam API ve prop şekilleri aralık seçimi sayfasında.