Sekarang ada sejumlah besar kontrol tabel data JavaScript di pasaran, termasuk pihak ketiga open source dan diproduksi sendiri dan dijual. Dapat dikatakan bahwa FlexGrid Wijmo adalah kontrol meja terbaik yang saat ini disesuaikan dengan Angular 2.
Persyaratan dasar tabel data Angular 2: Lebih kecil, lebih cepat, dan lebih akrab.
Untuk menggunakan bentuk sudut 2, pertama -tama Anda perlu memahami persyaratan dasar formulir. FlexGrid dimulai pada tahun 1996 ketika kontrol yang ditulis untuk Visual Basic digunakan dalam C ++. Selama bertahun -tahun, ia telah berevolusi dan disempurnakan di berbagai platform, terutama platform JavaScript. FlexGrid dinamai karena konsep Flex, dan kontrol harus berisi set fitur utama yang paling dibutuhkan dan kemampuan yang dapat diskalakan. Fungsi dasar bawaan seperti: penyortiran, pengelompokan, pengeditan, dan hal-hal mewah lainnya dapat disediakan melalui ekstensi opsional. Ini akan membuat kontrol tetap efisien dan efisien, sambil memberi pelanggan kemampuan untuk menyesuaikan secara mendalam.
Indikator penting lainnya adalah kinerja. FlexGrid terus dibandingkan dengan produk lain untuk memastikan kami cukup cepat. Konsep Flex membuat file kami cukup kecil (sekitar 25k setelah kompresi) dan kami tidak memiliki ketergantungan pada kerangka kerja lain. Peningkatan kinerja yang paling signifikan adalah melalui rendering virtual. FlexGrid virtualisasi semua DOM, hanya menggambar sel yang perlu diisi dengan viewport (dan beberapa buffer untuk memuluskan gulir) sekaligus. Ketika tabel digulir, sel (elemen DOM) didaur ulang. Render virtual berarti bahwa Grid dapat mengikat jutaan data dalam 1 detik.
Akhirnya, salah satu fitur terpenting adalah operasi yang akrab. FlexGrid didasarkan pada semua perilaku interaksi di Excel, yang mungkin merupakan cara yang paling umum digunakan bagi pengguna untuk mengoperasikan jaringan. Orang -orang ingin mendapatkan perilaku yang pasti saat menggulir, mengklik, terutama saat menggunakan perintah keyboard (termasuk fungsi clipboard) daripada menciptakan diri kita sendiri. Kami meniru Excel sehingga pengguna merasa nyaman menggunakan meja kami, dan secara mengejutkan banyak kisi -kisi lain telah menemukan perilaku mereka sendiri atau tidak sepenuhnya mendukung perilaku menggulir dan keyboard. Misalnya, ketika Anda memilih deretan data dan menahan panah bawah, banyak tabel tidak akan menunjukkan perilaku yang Anda harapkan.
Gunakan bahasa markup untuk mendeklarasikan kontrol UI
Sekarang mari kita lihat keunggulan FlexGrid di bawah AngularJS. Manfaat terbesar di bawah AngularJS adalah bahasa markup FlexGrid: komponen sudut menyediakan kemampuan untuk mendeklarasikan kontrol menggunakan bahasa markup. Penanda deklarasi mengikuti pola desain MVVM dengan baik, dan kami dapat mengonfigurasi komponen kami sepenuhnya melalui tampilan (bahasa markup).
FlexGrid mendukung penggunaan bahasa markup sudut untuk mendeklarasikan API yang lengkap. Anda dapat menggunakan bahasa markup untuk mengatur properti, melampirkan acara, dan mengkonfigurasi subkomponen (seperti kolom).
Berikut adalah contoh yang menunjukkan cara mengkonfigurasi FlexGrid menggunakan bahasa markup Angular2.
<wj-flex-grid [itemssource] = "data"> <wj-flex-grid-kolom [header] = "'country'" "[binding] =" 'country' "[width] =" ''*'"> </wj-flex-grid-column> <wj-flex-grid-column [header] ="' Date '"[binding] =" <wj-flex-grid-kolom [header] = "'pendapatan'" "[Binding] =" 'Jumlah' "[format] =" 'n0' "> </wj-flex-grid-kolom> <wj-flex-grid-kolom [header] =" 'aktif' "[pengikat] =" aktif '"> </wj-flex-colum
Berikut adalah hasil yang kami peroleh dari bahasa markup yang telah kami nyatakan.
Banyak komponen grid lainnya hanya menyediakan kemampuan untuk mendeklarasikan kontrol menggunakan bahasa markup, yang menghasilkan semua konfigurasi yang harus dilakukan dengan menggunakan JavaScript (ViewModel). Ini membuat tampilan dan ViewMode bingung, memaksa pengembang untuk menggunakan JavaScript untuk mengubah UI kontrol. Saat melakukan ini, Anda akan kehilangan semua manfaat dari pengikatan sudut. Kami berpikir bahwa melakukan hal itu adalah anti-pola. Lihat perbedaan di bawah ini:
<ag grid-ng2 #aggrid // item yang terikat ke properti pada pengontrol [gridoptions] = "gridoptions" [columnDefs] = "columnDefs"> </ag grid-ng2>
Dengan menggunakan komponen yang sepenuhnya mendukung bahasa markup, Anda bisa mendapatkan dukungan pola MVVM penuh dan membangun aplikasi seperti platform pengembangan lainnya (ASP.NET, Java, Silverlight, Flex).
Menyatakan templat jenis sel yang dapat digunakan kembali
Untuk mendeklarasikan anggota FlexGrid menggunakan bahasa markup, kami juga menyediakan templat sel. Templat sel adalah cara untuk menyatakan templat yang dapat digunakan kembali untuk berbagai jenis sel. Templat sel mendukung setiap tag sudut yang valid, termasuk ekspresi terikat, HTML dan komponen lainnya. Jenis Template Sel meliputi: Sel judul, edit sel mode, sel mode normal, dll.
Melalui templat sel, FlexGrid memberikan representasi untuk membuat komponen. Anda tidak hanya dapat mendeklarasikan FlexGrid dalam bahasa markup, tetapi juga menggunakan semua sintaks sudut di setiap sel. Mari kita lihat betapa kuatnya tag template sel flexgrid.
<wj-flex-grid [itemsSource]="data1" [allowSorting]="false" [deferResizing]="true"> <template wjFlexGridCellTemplate [cellType]="'TopLeft'" *ngIf="customTopLeft"> № </template> <template wjFlexGridCellTemplate [cellType]="'RowHeader'" *NGIF = "CustomRerHeader" #cell = "cell"> {{cell.row.index}} </template> <wj-flex-grid-column header = "country" binding = "country"> <template wjflexgridcellTemplate [cellType] = "'cell'" *Ngif = "" "" " *Ngif =" "" "" *Ngif = "" "" " *Ngif =" "" "" *Ngif = "" "" " *Ngif =" "" "" *Ngif = "" "" *NGIF = "" "" " *NGIF =" "" " *NGIF =" "" " *NGIF =" "" " *NGIF =" "NGIF =" {item.country}}. png " /> {{item.country}} </template> <template wjflexgridcellTemplate [cellType] =" 'groupHeader' " *ngif =" customGroupheader " #item =" item " #sel =" sel "> <input =" customGroupheader " #item =" item " #cell =" cell " [(ngModel)] = "cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} item) </lemplate> </wj-flex-grid-column> <wj-flex-column header = "unduhan" binding = "download" [wid "[well" = "download" ["well" [well "=" download "" download "" well "[well" = "download" "download" [well "" download "" download "" download "" download "[well" " WjflexGridCellTemplate [CellType] = "'ColumnHeader'" *ngif = "CustomColumnHeaderer"> <input type = "centang kotak" [(ngmodel)] = "uictx.highlightdownloads" /> unduhan < /template> <template wjflexgridcellTemplate " /> cellType [Template> <template wjflexgridcellTemplate" /> cellTye [Template> <template wjflexgridcellTemplate " /cellType [Templates’ *Template wjflexgridcellTeMPlate " /> #item="item"> <span [ngStyle]="{color: uiCtx.highlightDownloads? (item.downloads>10000 ?'green':'red'):'}" style="font-weight:700"> { {item.downloads}} </span> </template> <template wjFlexGridCellTemplate [cellType] = "'grup'" *ngif = "customGroup" #cell = "cell"> sum = {{cell.value | Nomor: '1.0-0'}} </lemplate> </wj-flex-grid-column> </wj-flex-grid>Hasil yang kami nyatakan sebagai templat sel
Templat sel yang dapat digunakan kembali di Angular2
Sekali lagi, untuk mencapai efek ini di kontrol tabel lain, Anda perlu mengedit file JavaScript dan menulisnya di ViewModel.
Secara otomatis memperbarui kontrol menggunakan pengikatan data.
Saya percaya manfaat paling produktif dari Angular adalah ekspresi pengikatan, yang memungkinkan kontrol yang kami buat untuk merespons secara otomatis terhadap perubahan data, membebaskan kami dari penangan acara yang membosankan dan operasi DOM.
Semua sifat pengikatan data dukungan FlexGrid. Selain itu, kami juga menyediakan pengikatan dua arah untuk beberapa properti yang memerlukan pengikatan data dua arah. Tanpa menulis kode apa pun, Anda dapat mengikat komponen untuk menangani acara dan berinteraksi dengan data model.
Ikatan data adalah warga negara kelas satu di platform pengembangan apa pun (Java, .NET), dan Angular membuatnya lebih mudah dan mendukung pengikatan data satu arah dan dua arah.
Naskah: 2 hari kerja dengan sudut.
FlexGrid dan semua kontrol Wijmo ditulis dalam TypeScript. Kami memiliki sejarah yang cukup panjang yang bekerja pada platform Microsoft, jadi ketika Typescript menjadi dewasa, kami memiliki rasa rumah. TypeScript memberi kita pengalaman yang mirip dengan menulis C#: kelas, warisan, pengetikan yang kuat, pemeriksaan jenis, pemeriksaan kesalahan waktu, dan banyak lagi. Adalah katalis bagi kita untuk membuat kontrol JavaScript kelas perusahaan, seperti yang kita lakukan di platform lain, kita tidak perlu membuat kompromi dalam API atau sintaks.
Mungkin yang paling penting, TypeScript memberi kita kemampuan untuk membuat kontrol nyata alih -alih widget. FlexGrid sebagai kelas mewarisi dari kelas kontrol dasar kami. Ketika widget memaksa Anda untuk mengatur nilai atribut dan lulus menggunakan fungsi yang memalukan, FlexGrid memiliki aksesor Getter dan Setter yang dapat Anda atur secara langsung. Wijmo juga menyertakan model acara untuk hanya menambahkan penangan.
Jika pengguna kami memilih untuk menggunakan Tpyescript untuk pengembangan, mereka akan mendapatkan prompt pintar dan peringatan di IDE yang didukung, dan akan ada pesan kesalahan ketika mereka mencoba untuk menetapkan jenis yang salah ke atribut.
Fitur yang paling menarik dari TypeScript adalah bahwa pelanggan kami dapat mewarisi dan memperluas kontrol kami, yang sejalan dengan filosofi Flex kami, menyederhanakan kustomisasi kontrol dan mengurangi kesalahan.
Akhirnya, kami berjalan beriringan dengan Angular2. Saya terkejut melihat keputusan yang kami buat beberapa tahun yang lalu, menggunakan bahasa Microsoft. Kelas kontrol kami sudah menggunakan TypeScript, sehingga dapat dikombinasikan secara mulus dengan Angular2. Kami hanya memperluas mereka dan menambahkan metadata untuk mengekspos mereka dalam komponen Angular2.
Jangan percaya kata-kata sepihak saya: coba juga
“Kami membeli Wijmo dan tim mereka melakukan pekerjaan dengan baik: antarmuka yang indah; arsitektur yang bijaksana; dokumentasi yang dikembangkan dengan baik; menjaga teknologi yang berubah,” kata BJ Jeong dari Cisco.
Jika teks saya tidak meyakinkan Anda, dorong Anda untuk mencoba FlexGrid dan membuktikan saya benar atau salah. Jika saya salah dan FlexGrid dipukuli oleh kontrol grid lain, Anda dapat memberi tahu saya. Kami tidak pernah berhenti berkembang dan membaik selama 20 tahun, dan kami tidak akan pernah berhenti. Unduh sekarang untuk mengalaminya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.