بناء جداول HTML مع “جوجل التصور API”

ماذا عن عرض البيانات المجدولة الخاصة بك مع نظرة جميلة وتبقى قادرة على فرز وصفحة, بنيت جميع بشكل حيوي ودون كتابة أي “جدول HTML”?

العرض التقديمي

الـ جوجل التصور API يقدم مجموعة من التقنيات لعرض البيانات الخاصة بك بسهولة وبسرعة. في هذا المنصب سنرى مخططات الجداول.

العمليه

مثال
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?بي إتش بي
<لانغ html="pt-BR">
  <رئيس>    
    <محارف ميتا="ISO-8859-1" />
    <نوع البرنامج النصي='نص / جافا سكريبت' src='https://www.google.com/jsapi'></البرنامج النصي>
    <نوع البرنامج النصي='نص / جافا سكريبت'>
      جوجل.تحميل('التصور', '1', {حزم:['جدول']});
      جوجل.setOnLoadCallback(جدول الرسم);
      الدالة جدول الرسم() {
        فأر تاريخ = الجديد جوجل.التصور.Datatable();
        تاريخ.إضافة كولومن(سلسله, 'الاسم');
        تاريخ.إضافة كولومن('العدد', 'الراتب');
        تاريخ.إضافة كولومن(منطقيه, 'دوام كامل');
        تاريخ.إضافات([
          ['جون',  {الخامس: 2000, و: '2,000.00 ريال سعودي'}, صحيح],
          ['مريم', {الخامس: 5000, و: '5,000.00 ريال سعودي'}, كاذبة],
          ['أليس', {الخامس: 1000, و: '1,000.00 ريال سعودي'}, صحيح],
          ['بوب',   {الخامس: 1500, و: '1,500.00 ريال سعودي'}, صحيح]
        ]);
        فأر الجدول = الجديد جوجل.التصور.الجدول(الوثيقة.جيتيليمينتبييد('table_div'));
        الجدول.رسم(تاريخ, {إظهاراNumber: صحيح});
      }
    </البرنامج النصي>
  </رئيس>
  <الهيئة>
    <معرف div='table_div'></div>
  </الهيئة>
</إتش تي أم ال>
?>

(1) في التعليمات البرمجية أعلاه, لاحظ أننا بدأنا بإجراء مكالمة إلى واجهة برمجة تطبيقات جافا سكريبت من Google (JSAPI).

(2) ثم, نحمل نحن التصور, في الإصدار 1.0, ومكتبتك 'الجدول’.

(3) نستخدم وظيفة JSAPI setOnLoadCallback تعيين المعالج جدول الرسم (أو اسم آخر تريد), الذي هو في الواقع الذي ينبغي إنشاء وتحديد الجدول.

(4) الـ Datatable يتم تحويلها إلى جدول HTML حيث يجب أن يكون كل عمود من نفس نوع البيانات المعتمدة (سلسله, منطقيه, عدد, إلخ).

(5) استخدام إضافة كولومن() لإنشاء عمود, تمرير كمعلمة نوع واسم البيانات.

(6) استخدام إضافات() لإنشاء الصفوف في الجدول, إنترنت إكسبلورر, أدخل بياناتك نفسها. حدود الخطوط بأقواس [] والمعلومات الخاصة بكل خلية مفصولة بفاصلة. لاحظ هناك ملاحظة “الخامس” و “و”, التي أفترض يعني قيمة والميدان, على التوالي, إنترنت إكسبلورر, القيمة الفعلية للخلية والتسمية التي سيتم عرضها في. هذا ضروري, ل, كما قال العمود هو من “كل”, لذلك يمكن أن يضعف الترتيب الصحيح إذا كانت تؤخذ على أنها سلاسل.

(7) وأخيراً, نحن نعلمك على التي سيتم تقديم DIV الرسم الجدول (table_div) واستعداد!

في الممارسة العملية

تنشئ التعليمات البرمجية أعلاه جدول HTML التالي:

إنه ليس مثيراً للاهتمام حتى? تم إنشاء كافة HTML من الجدول دون الحاجة إلى كتابة جدول واحد, TR أو TD. بالطبع, وكان هذا مجرد مظاهرة. يمكنك تعميق معرفتك واكتشاف إمكانيات التكوين الأخرى للعمل مع الجداول من خلال مخططات الجداول.

معرض

وهناك أيضا العديد من الميزات الأخرى المثيرة للاهتمام أن معرض مخططات جوجل يقدم. هناك مجموعة متنوعة من المخططات التي تم تحسينها لتلبية احتياجات التصور البيانات. تعتمد الرسومات على تقنية HTML5/SVG نقية (اعتماد VML للإصدارات القديمة من IE), لذلك لا توجد حاجة إلى الإضافات. يمكن إضافة هذه الرسومات إلى صفحتك في بضع خطوات بسيطة.

الخطوط

إجمالي عدد مرات الدخول: 5928

اترك ردًا

عنوان البريد الإلكتروني الخاص بك لن ينشر. يتم وضع علامة الحقول المطلوبة مع *