يوجد الآن عدد كبير من عناصر التحكم في جدول بيانات جافا سكريبت في السوق ، بما في ذلك الطرف الثالث مفتوح المصدر وإنتاجها وبيعها. يمكن القول أن Wijmo's FlexGrid هو أفضل تحكم في الجدول تم تكييفه حاليًا مع Angular 2.
Angular 2 TABLE TABLE المتطلبات الأساسية: أصغر وأسرع وأكثر دراية.
من أجل استخدام أشكال Angular 2 ، تحتاج أولاً إلى فهم المتطلبات الأساسية للنماذج. بدأت FlexGrid في عام 1996 عندما تم استخدام عناصر التحكم المكتوبة لـ Visual Basic في C ++. على مر السنين ، تطورت وتم الكمال على منصات متعددة ، وخاصة منصة JavaScript. تم تسمية FlexGrid بسبب مفهوم المرن ، ويجب أن تحتوي عناصر التحكم على مجموعات الميزات الرئيسية الأكثر حاجة إليها وقدرات قابلة للتطوير. يمكن توفير الوظائف الأساسية المدمجة مثل: الفرز والتجميع والتحرير والأشياء الفاخرة الأخرى من خلال امتدادات اختيارية. سيؤدي ذلك إلى إبقاء عناصر التحكم باكسة وفعالة ، مع إعطاء العملاء القدرة على التخصيص العميق.
مؤشر مهم آخر هو الأداء. تقارن FlexGrid باستمرار مع المنتجات الأخرى للتأكد من أننا سريعون بما فيه الكفاية. مفهوم Flex يجعل ملفاتنا صغيرة بما يكفي (حوالي 25 ألفًا بعد الضغط) وليس لدينا أي تبعيات على أطر أخرى. أهم تحسين في الأداء هو من خلال التقديم الافتراضي. تقوم FlexGrid Virtualies بجميع DOM ، حيث رسم فقط الخلايا التي تحتاج إلى ملء مع منفذ العرض (وبعض المخازن المؤقتة لتنعيم التمرير) في وقت واحد. عند تمرير الجدول ، يتم إعادة تدوير الخلايا (عناصر DOM). العرض الافتراضي يعني أن الشبكة يمكن أن تربط ملايين البيانات في ثانية واحدة.
أخيرًا ، واحدة من أهم الميزات هي العمليات المألوفة. يعتمد FlexGrid على جميع سلوكيات التفاعل في Excel ، والتي قد تكون الطريقة الأكثر استخدامًا للمستخدمين لتشغيل الشبكة. يريد الأشخاص الحصول على سلوك محدد عند التمرير ، والنقر ، خاصة عند استخدام أوامر لوحة المفاتيح (بما في ذلك وظائف الحافظة) بدلاً من اختراع أنفسنا. لقد قمنا بتقليد Excel حتى يشعر المستخدمون بالراحة باستخدام طاولاتنا ، ومن المثير للدهشة أن العديد من الشبكات الأخرى قد اخترعت سلوكهم الخاص أو لا تدعم سلوك التمرير والوحة المفاتيح تمامًا. على سبيل المثال ، عند تحديد صف من البيانات مع الاستمرار على السهم لأسفل ، لن تظهر العديد من الجداول السلوك الذي توقعته.
استخدم لغة الترميز لإعلان عناصر التحكم في واجهة المستخدم
الآن دعونا نلقي نظرة على مزايا FlexGrid تحت AngularJS. أكبر فائدة بموجب AngularJS هي لغة الترميز لـ FlexGrid: توفر المكونات الزاوية القدرة على إعلان عناصر التحكم باستخدام لغة الترميز. تتبع علامات الإعلان نمط تصميم MVVM جيدًا ، ويمكننا تكوين مكوناتنا بالكامل من خلال العرض (لغة الترميز).
يدعم FlexGrid استخدام لغة الترميز الزاوي لإعلان واجهة برمجة تطبيقات كاملة. يمكنك استخدام لغة الترميز لتعيين الخصائص ، وإرفاق الأحداث ، وتكوين المكونات الفرعية (مثل الأعمدة).
فيما يلي مثال يوضح كيفية تكوين FlexGrid باستخدام لغة ترميز Angular2.
<wj-flex-grid [heatssource] = "data"> <wj-flex-grid-column [header] = "'country' '[binding] ="' country '"[width] ="' '*' "> </wj-flex-grid-column> <wj-flex-grid-aplumn] =" date " <wj-flex-grid-column [header] = "'' RESENUE '" [binding] = "' 'come'" [format] = "'n0'"> </wj-flex-grid-column> <wj-flex-grid-column] = "'' active '"
فيما يلي النتائج التي حصلنا عليها من لغة الترميز التي أعلنناها.
توفر العديد من مكونات الشبكة الأخرى فقط القدرة على إعلان عنصر تحكم باستخدام لغة الترميز ، مما يؤدي إلى جميع التكوينات التي يجب القيام بها باستخدام JavaScript (ViewModel). هذا يجعل العرض والمرتبط بالمرتبك ، مما يجبر المطورين على استخدام JavaScript لتغيير واجهة المستخدم التحكم. عند القيام بذلك ، ستفتقد كل فوائد الربط الزاوي. نعتقد أن القيام بذلك هو مضاد للانهيار. انظر الفرق أدناه:
<ag-grid-ng2 #aggrid // العناصر المرتبطة بخصائص على وحدة التحكم [الشبكة] = "الشبكات" [columndefs] = "columndefs"> </ag-grid-ng2>
باستخدام المكونات التي تدعم لغات الترميز بالكامل ، يمكنك الحصول على دعم كامل للأنماط MVVM وبناء تطبيقات مثل منصات التطوير الأخرى (ASP.NET ، Java ، Silverlight ، Flex).
إعلان قوالب نوع الخلية القابلة لإعادة الاستخدام
لإعلان أي أعضاء مراسلين باستخدام لغة الترميز ، فإننا نقدم أيضًا قوالب الخلايا. قوالب الخلايا هي وسيلة لإعلان قوالب قابلة لإعادة الاستخدام لأنواع مختلفة من الخلايا. تدعم قوالب الخلايا أي علامات زاوية صالحة ، بما في ذلك التعبيرات الملزمة ، HTML والمكونات الأخرى. تشمل أنواع قوالب الخلية: خلية العنوان ، تحرير الخلية ، خلية الوضع العادي ، إلخ.
من خلال قوالب الخلايا ، يوفر FlexGrid تمثيلًا لإنشاء مكونات. لا يمكنك فقط إعلان FlexGrid بلغة الترميز ، ولكن أيضًا استخدام جميع بناء الجملة الزاوي في كل خلية. دعونا نرى مدى قوة قالب قالب خلية FlexGrid.
<wj-flex-grid [headssource] = "data1" [leftorting] = "false" [deferResization] = "true"> <template wjflexgridcelltemplate [celltype] = "'' topleft '" *ngif = "customtopleft"> № </templeate> <tapplet *ngif = "customRowHeader" #cell = "cell"> {{cell.row.index}} </template> <wj-flex-grid-column header = "country" binding = "country"> <applet wjflexgridcelltemplate src = "Resources/{{item.country}}. [(ngmodel)] = "cell.row.iscollapsed"/> {{item.name}} ({{item.items.length}} عناصر) </template> </wj-flex-grid-column> <wj-flex-grid-column header = "downloading =" downloads] <قالب wjflexgridcelltemplate [celltype] = "'columnheader'" *ngif = "customColumnHeader"> <input type = "checkbox" [(ngmodel)]] = "uictx.highlightdownloads" /> تنزيل < /applate> <applet wjflexgridate] *ngif = "customcell" #item = "item"> <span [ngstyle] = "{color: uictx.highlightdownloads؟ (item.Downloads> 10000؟ [celltype] = "'group'" *ngif = "customgroup" #cell = "cell"> sum = {{cell.value | الرقم: '1.0-0'}} </template> </wj-flex-grid-column> </wj-flex-grid>النتائج التي أعلنناها كقوالب الخلايا
قوالب الخلايا القابلة لإعادة الاستخدام في Angular2
مرة أخرى ، من أجل تحقيق هذا التأثير في عناصر التحكم في الجدول الأخرى ، تحتاج إلى تحرير ملف JavaScript وكتابته في ViewModel.
تحديث عناصر التحكم تلقائيًا باستخدام ربط البيانات.
أعتقد أن الفائدة الأكثر إنتاجية من Angular هي تعبير الربط ، والذي يسمح لعناصر التحكم التي ننشئها بالاستجابة تلقائيًا لتغييرات البيانات ، وتحريرنا من معالجات الأحداث الشاقة وعمليات DOM.
جميع خصائص ربط بيانات دعم FlexGrid. بالإضافة إلى ذلك ، نوفر أيضًا ربطًا في اتجاهين لبعض الخصائص التي تتطلب ربط بيانات ثنائية الاتجاه. دون كتابة أي رمز ، يمكنك ربط المكونات للتعامل مع الأحداث والتفاعل مع بيانات النموذج.
ربط البيانات هو مواطن من الدرجة الأولى على أي منصة تنمية (Java ، .NET) ، والزاوي يجعل الأمر أسهل ويدعم كل من ربط البيانات في اتجاه واحد وذات اتجاهين.
TypeScript: يومين من العمل مع Angular.
تتم كتابة FlexGrid وجميع عناصر التحكم Wijmo في TypeScript. لدينا تاريخ طويل جدًا يعمل على منصة Microsoft ، لذلك عندما يصبح TypeScript ناضجًا ، لدينا شعور بالمنزل. يمنحنا TypeScript تجربة مشابهة للكتابة C#: الفصول ، والميراث ، والكتابة القوية ، والتحقق من النوع ، وفحص خطأ وقت البناء ، والمزيد. إنه المحفز بالنسبة لنا لإنشاء عناصر تحكم JavaScript على مستوى المؤسسة ، تمامًا كما نفعل في منصات أخرى ، لا نحتاج إلى تقديم أي تنازلات في API أو بناء الجملة.
ربما الأهم من ذلك ، أن TypeScript يمنحنا القدرة على إنشاء عناصر تحكم حقيقية بدلاً من الأدوات. FlexGrid كصف يرث من فئة التحكم القاعدة لدينا. عندما تجبرك الأدوات المصغّرة على تعيين سمة وتمرير القيم باستخدام وظائف محرجة ، فإن FlexGrid لديه ملحقات Getter و Setter التي يمكنك تعيينها مباشرة. يتضمن Wijmo أيضًا نموذج أحداث لمجرد إضافة معالجات.
إذا اختار مستخدمونا استخدام TpyScript للتطوير ، فسوف يحصلون على مطالبات وذات تحذيرات في IDEs المدعومة ، وستكون هناك رسائل خطأ عندما يحاولون تعيين نوع غير صحيح إلى سمة.
الميزة الأكثر جاذبية في TypeScript هي أن عملائنا يمكنهم أن يرثوا عناصر التحكم لدينا وتوسيع نطاقها ، والتي تتماشى مع فلسفتنا المرنة ، وتبسيط تخصيص التحكم وتقليل الأخطاء.
أخيرًا ، نذهب جنبًا إلى جنب مع Angular2. لقد فوجئت برؤية قرار اتخذناه قبل بضع سنوات ، باستخدام لغة Microsoft. يستخدم فئة التحكم لدينا بالفعل TypeScript ، بحيث يمكن دمجها بسلاسة مع Angular2. قمنا ببساطة بتوسيعها وأضفنا بيانات التعريف لفضحها في مكونات Angular2.
لا تصدق كلماتي من جانب واحد: حاول أيضًا
"لقد اشترينا Wijmo وفريقهم قاموا بعمل رائع: واجهة جميلة ؛ الهندسة المعمارية المدروسة ؛ وثائق متطورة ؛ مواكبة التكنولوجيا المتغيرة" ، قال BJ Jeong من Cisco.
إذا لم يقنعك نصي ، شجعك على تجربة FlexGrid وإثباتي الصحيح أو الخطأ. إذا كنت مخطئًا وتم تعرض FlexGrid للضرب من خلال التحكم في الشبكة الأخرى ، فيمكنك إخباري. لم نتوقف أبدًا عن التطوير والتحسين لمدة 20 عامًا ، ولن نتوقف أبدًا. تنزيل الآن لتجربة ذلك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.