التصور: جدول

  1. Overview
  2. مثال
  3. جارٍ التحميل
  4. تنسيق البيانات
    1. الخصائص المخصّصة
  5. خيارات الإعداد
  6. الطُرق
  7. الأحداث
  8. أدوات التنسيق
  9. سياسة البيانات

نظرة عامة

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

مثال

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

جارٍ التحميل

اسم حزمة "google.charts.load" هو "table".

  google.charts.load('current', {packages: ['table']});

اسم فئة العرض المرئي هو google.visualization.Table.

  var visualization = new google.visualization.Table(container);

تنسيق البيانات

يتم تحويل DataTable إلى جدول HTML مقابل، مع تحويل كل صف/عمود في DataTable إلى صف/عمود في جدول HTML. يجب أن يكون كل عمود من نوع البيانات نفسه، وأن تكون جميع أنواع بيانات التمثيل البصري العادية متوافقة (سلسلة بيانات منطقية أو رقم أو غير ذلك).

الخصائص المخصّصة

يمكنك تحديد السمات المخصّصة التالية لعناصر جدول البيانات باستخدام طريقة setProperty() في DataTable.

اسم الموقع ينطبق على الوصف
className الخلية اسم فئة سلسلة لتعيينه لخلية فردية. يمكنك استخدام هذا الخيار لتحديد نمط CSS لخلايا فردية.
style الخلية سلسلة نمط لتعيين السمة inline للخلية. سيؤدي هذا الإجراء إلى إلغاء أنماط فئة CSS المطبّقة على تلك الخلية. يجب تعيين السمة AllowHtml=true لكي يعمل هذا الأمر. مثال: 'border: 1px solid green;'

مثال

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

خيارات الضبط

الاسم
allowHtml

في حال الضبط على "صحيح"، سيتم عرض القيم المنسَّقة للخلايا التي تحتوي على علامات HTML على أنّها HTML. في حال ضبط هذه السياسة على "خطأ"، لن تعمل معظم أدوات التنسيق المخصّصة بشكلٍ سليم.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
alternatingRowStyle

تحدد ما إذا كان سيتم تعيين نمط اللون البديل إلى الصفوف الفردية والزوجية.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
cssClassNames

تمثّل هذه السمة كائنًا يصف فيه كل اسم سمة عنصرًا في جدول، وتكون قيمة السمة هي سلسلة، تحدّد فئة يجب تخصيصها لعنصر الجدول. استخدِم هذه السمة لتحديد لغة CSS مخصّصة لعناصر معيّنة في جدولك. لاستخدام هذه السمة، خصِّص كائنًا، حيث يحدّد اسم السمة عنصر الجدول وتكون قيمة السمة سلسلة، وتحدِّد اسم فئة لتحديدها لهذا العنصر. وعليك بعد ذلك تحديد نمط CSS لتلك الفئة على صفحتك. تتوفّر أسماء السمات التالية:

  • headerRow: يعيّن اسم فئة لصف العنوان في الجدول (عنصر <tr>).
  • tableRow - يعيّن اسم فئة للصفوف التي لا تحتوي على عناوين (عناصر <tr>).
  • oddTableRow - يعيّن اسم فئة إلى صفوف الجدول الفردية (عناصر <tr>). ملاحظة: يجب ضبط الخيار altnatingRowStyle على "صحيح".
  • selectedTableRow: يعيّن اسم فئة للصف المحدّد في الجدول (عنصر <tr>).
  • hoverTableRow: تحدّد اسم فئة لصف الجدول الذي تم تمريره (عنصر <tr>).
  • headerCell - لتحديد اسم فئة لجميع الخلايا في صف العنوان (عنصر <td>).
  • tableCell - يعيّن اسم فئة لجميع خلايا الجدول التي ليست عناوين (عنصر <td>).
  • rowNumberCell - يعيّن اسم فئة للخلايا في عمود رقم الصف (عنصر <td>). ملاحظة: يجب ضبط الخيار showRowNumber على "صحيح".

مثال: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

ملاحظة: في CSS، تلغي بعض العناصر عناصر أخرى. على سبيل المثال، إذا حددت لون الخلفية للعنصر <tr> والعنصر <td>، تكون الأولوية للّون الأول على اللون الأول. احرص على تحديد جميع أنماط CSS ذات الصلة في cssClassNames لتجنُّب حدوث أي تعارضات.

Type: كائن
الإعداد التلقائي: قيمة خالية
firstRowNumber

رقم الصف للصف الأول في dataTable. لا يُستخدم إلا إذا كانت قيمة showRowNumber صحيحة.

النوع: رقم
تلقائي: 1
frozenColumns

عدد الأعمدة من اليسار التي سيتم تجميدها. وستظل هذه الأعمدة في مكانها عند تمرير الأعمدة المتبقية أفقيًا. إذا كانت قيمة showRowNumber هي false، ستظهر القيمة frozenColumns على 0 بالطريقة نفسها كما في حال ضبطها على null، ولكن إذا تم ضبط showRowNumber على true، سيتم تجميد عمود رقم الصف.

النوع: رقم
الإعداد التلقائي: قيمة خالية
الطول

يضبط ارتفاع عنصر حاوية التمثيل البصري. يمكنك استخدام وحدات HTML عادية (على سبيل المثال، "100px" و"80em" و"60"). إذا لم يتم تحديد أي وحدات، يُفترض أن يكون الرقم وحدات بكسل. إذا لم يتم تحديد الارتفاع، سيضبط المتصفح الارتفاع تلقائيًا ليلائم الجدول، ما يؤدي إلى تقليل الارتفاع قدر الإمكان في العملية، وإذا تم ضبطه على أصغر من الارتفاع المطلوب، سيضيف الجدول شريط تمرير عموديًا (يتم أيضًا تجميد صف العنوان). في حال ضبط هذه القيمة على "%100"، سيتم توسيع الجدول قدر الإمكان إلى عنصر الحاوية.

النوع: سلسلة
تلقائي: تلقائي
الصفحة

ما إذا كانت طريقة تفعيل التنقل بين البيانات بين البيانات وطريقة تفعيله. اختَر إحدى قيم السلسلة التالية:

  • "enable" - سيتضمّن الجدول زرَّي "إعادة توجيه الصفحة" و"رجوع إلى الصفحة" . سيؤدي النقر على هذه الأزرار إلى تنفيذ عملية الصفحات وتغيير الصفحة المعروضة. ويمكنك أيضًا تحديد خيار pageSize.
  • "الحدث": سيتضمّن الجدول زرَّي "الصفحة التالية" و"رجوع إلى الصفحة"، ولكن النقر عليهما سيؤدّي إلى بدء حدث "الصفحة" ولن يؤدّي ذلك إلى تغيير الصفحة المعروضة. ويجب استخدام هذا الخيار عندما تنفذ الرمز منطق تحوّل الصفحة الخاص به. اطّلِع على مثال TableauWrapper للحصول على مثال حول كيفية التعامل مع أحداث ترقيم الصفحات يدويًا.
  • "إيقاف" - [تلقائي] لا تتوفّر إمكانية ترقيم الصفحات.
    • النوع: سلسلة
    الإعداد التلقائي: "إيقاف"
pageSize

عدد الصفوف في كل صفحة، عند تفعيل خيار الصفحة على الصفحات.

النوع: رقم
تلقائي: 10
pagingButtons

لتحديد خيار محدّد لأزرار الصفحات. وتكون الخيارات كما يلي:

  • "كلاهما": تفعيل زرَّي "السابق" و"التالي"
  • "prev" - يتم تفعيل الزر "السابق" فقط.
  • "التالي" - تم تفعيل زر "التالي" فقط
  • "تلقائي" - يتم تمكين الأزرار وفقًا للصفحة الحالية. في الصفحة الأولى، يتم عرض الصفحة التالية فقط. في الصفحة الأخيرة، يتم عرض الصفحة السابقة فقط. وبخلاف ذلك، يتم تفعيل كلتيهما.
  • الرقم - عدد أزرار الصفحات المراد عرضها. سيلغي هذا الرقم الفاضح الرقم المحتسَب من pageSize.
النوع: سلسلة أو رقم
تلقائي: "تلقائي"
rtlTable

تتيح إضافة التوافق الأساسي للغات التي تُكتب من اليمين إلى اليسار (مثل العربية أو العبرية) من خلال عكس ترتيب الأعمدة في الجدول، بحيث يكون العمود صفر هو العمود الموجود في أقصى اليمين، والعمود الأخير هو العمود الموجود في أقصى اليسار. لا يؤثر ذلك في فهرس الأعمدة في البيانات الأساسية، بل فقط في ترتيب العرض. لا يتيح التمثيل المرئي للبيانات في الجدول استخدام العرض الكامل الثنائي الاتجاه (BiDi) للغة، حتى مع استخدام هذا الخيار. سيتم تجاهل هذا الخيار في حال تفعيل التنقل بين الصفحات (باستخدام خيار الصفحة)، أو إذا كان الجدول يحتوي على أشرطة تمرير لأنّك حددت خيارات الارتفاع والعرض أصغر من حجم الجدول المطلوب.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
scrollLeftStartPosition

يتم ضبط موضع التمرير الأفقي بالبكسل إذا كان الجدول يحتوي على أشرطة تمرير أفقية لأنّك ضبطت سمة العرض. سيفتح الجدول عند تمريرها بمقدار وحدات بكسل عديدة تتجاوز العمود الموجود في أقصى اليسار.

النوع: رقم
القيمة التلقائية: 0
showRowNumber

وفي حال ضبطها على "صحيح"، يتم عرض رقم الصف كأول عمود في الجدول.

النوع: قيمة منطقية
الإعداد التلقائي: خطأ
ترتيب

ما إذا كان يتم ترتيب الأعمدة وطريقة ترتيبها عندما ينقر المستخدم على عنوان عمود إذا تم تفعيل الترتيب، ننصحك بضبط السمتَين sortAscending و sortColumn أيضًا. اختَر إحدى قيم السلسلة التالية:

  • "enable" - [تلقائي] يمكن للمستخدمين النقر على رؤوس الأعمدة للترتيب حسب العمود الذي تم النقر عليه. عندما ينقر المستخدمون على عنوان العمود، سيتم ترتيب الصفوف تلقائيًا، وسيتم تشغيل حدث "الترتيب".
  • "الحدث": عندما ينقر المستخدمون على عنوان العمود، سيتم تشغيل حدث "ترتيب"، ولكن لن يتم ترتيب الصفوف تلقائيًا. يجب استخدام هذا الخيار عند تنفيذ الصفحة للترتيب الخاص بها. راجِع مثال TableauWrapper للاطّلاع على مثال حول كيفية التعامل مع ترتيب الأحداث يدويًا.
  • "إيقاف": ليس هناك أي تأثير للنقر على رأس العمود.
النوع: سلسلة
تلقائي: "تفعيل"
sortAscending

هذا هو الترتيب الذي يتم به ترتيب عمود الترتيب الأولي. صحيح للترتيب التصاعدي، وخطأ للترتيب التنازلي. يتم تجاهل السياسة إذا لم يتم تحديد السمة sortColumn.

النوع: قيمة منطقية
القيمة التلقائية:صحيح
sortColumn

فهرس عمود في جدول البيانات، ويتم ترتيب الجدول وفقًا له في البداية. سيتم وضع علامة على العمود باستخدام سهم صغير يشير إلى نظام الترتيب.

النوع: رقم
تلقائي: -1
startPage

أول صفحة جدول لعرضها. لا يتم استخدامه إلا إذا كان page في الوضع تفعيل/الحدث.

النوع: رقم
القيمة التلقائية: 0
العرض

لضبط عرض عنصر حاوية التمثيل البصري. يمكنك استخدام وحدات HTML عادية (على سبيل المثال، "100px" و"80em" و"60"). إذا لم يتم تحديد أي وحدات، يُفترض أن يكون الرقم وحدات بكسل. إذا لم يتم تحديد ذلك، سيضبط المتصفح العرض تلقائيًا ليلائم الجدول، ما يؤدي إلى تقليل العرض قدر الإمكان خلال العملية. وفي حال ضبطه على مساحة أصغر من العرض المطلوب، سيضيف الجدول شريط تمرير أفقيًا. في حال ضبط هذه القيمة على "%100"، سيتم توسيع الجدول قدر الإمكان إلى عنصر الحاوية.

النوع: سلسلة
تلقائي: تلقائي

الطُرق

الطريقة
draw(data, options)

لرسم الجدول.

نوع الإرجاع: لا شيء
getSelection()

تنفيذ أمر getSelection العادي. عناصر التحديد هي جميع عناصر الصف. يمكن عرض أكثر من صف محدّد. تشير فهارس الصفوف في عنصر التحديد إلى جدول البيانات الأصلي بغض النظر عن أي تفاعل يجريه المستخدم (مثل الترتيب أو التقسيم إلى صفحات أو غير ذلك).

تجدر الإشارة إلى أنّ الخيارات المحدّدة هي الخيار المناسب: يؤدي النقر على خلية في المرة الأولى إلى اختيارها، ويؤدي النقر على الخلية مرة أخرى إلى إلغاء اختيارها، ما يؤدي إلى ظهور حدث اختيار بدون عناصر محدَّدة في كائن التحديد الذي تم استرداده.

نوع الإرجاع: مصفوفة من عناصر الاختيار
getSortInfo()

يمكنك استدعاء هذه الطريقة لاسترداد معلومات عن حالة الترتيب الحالية لجدول تم ترتيبه (عادةً حسب المستخدم الذي نقر على عنوان عمود لترتيب الصفوف حسب عمود معيّن). إذا تم إيقاف الفرز، فلن تعمل هذه الطريقة.

إذا لم ترتّب البيانات في الرمز البرمجي أو لم يفرز المستخدم البيانات من خلال اختيار الرمز، سيتم عرض القيم التلقائية للترتيب.

نوع الإرجاع: كائن بالسمات التالية:
  • column - (رقم) فهرس العمود الذي يتم ترتيب الجدول بناءً عليه.
  • ascending - (قيمة منطقية) "صحيح" إذا كان الترتيب تصاعديًا، وخطأ إذا كان تنازليًا.
  • sortedIndexes - (مصفوفة رقمية) مصفوفة أرقام، حيث يكون الفهرس في الصفيف هو رقم الصف مرتّبًا (في الجدول المرئي)، والقيمة هي فهرس هذا الصف في جدول البيانات الأساسي (غير المرتّب).
setSelection(selection)

تنفيذ setSelection() عادي، ولكن يمكن اختيار صفوف كاملة أو صفوف متعددة فقط. تشير فهارس الصفوف في عنصر التحديد إلى جدول البيانات الأصلي بغض النظر عن أي تفاعل يجريه المستخدم (مثل الترتيب أو التنقل بين الصفحات وما إلى ذلك).

نوع الإرجاع: لا شيء
clearChart()

يؤدي هذا الإجراء إلى محو الرسم البياني وتحرير جميع الموارد المخصّصة له.

نوع الإرجاع: لا شيء

الأحداث

الاسم
اختيار

حدث اختيار عادي، ولكن يمكن اختيار الصفوف بأكملها فقط.

المواقع: ما مِن مواقع إلكترونية
الصفحة

يتم تشغيله عندما ينقر المستخدِمون على أحد أزرار التنقّل في الصفحة.

المواقع: page: رقم. فهرس الصفحة المطلوب الانتقال إليها.
ترتيب

يتم تشغيله عندما ينقر المستخدمون على عنوان عمود، ولا يكون خيار الترتيب "disable".

الخصائص: كائن بالخصائص التالية:
  • column - (رقم) فهرس العمود الذي يتم ترتيب الجدول بناءً عليه.
  • ascending - (قيمة منطقية) "صحيح" إذا كان الترتيب تصاعديًا، وخطأ إذا كان تنازليًا.
  • sortedIndexes - (مصفوفة رقمية) مصفوفة أرقام، حيث يكون الفهرس في الصفيف هو رقم الصف مرتّبًا (في الجدول المرئي)، والقيمة هي فهرس هذا الصف في جدول البيانات الأساسي (غير المرتّب).
جاهز

الرسم البياني جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد أداة معالجة لهذا الحدث قبل استدعاء طريقة الرسم، وعدم الاتصال بها إلا بعد تنشيط الحدث.

المواقع: ما مِن مواقع إلكترونية

أدوات التنسيق

ملاحظة: يحتوي العرض المرئي في الجدول على مجموعة من العناصر المنسَّقة التي حلت محلها أدوات التنسيق العامة، والتي تعمل بالطريقة نفسها، ولكن يمكن استخدامها في أي عرض مرئي.

يعرض الجدول التالي أداة تنسيق الجدول القديمة وأدوات التنسيق العامة المقابلة لها. ويجب استخدام التنسيق العام عند كتابة رمز جديد.

تنسيق الجداول
TableArrowFormat google.visualization.ArrowFormat
TableBarFormat google.visualization.BarFormat
TableColorFormat google.visualization.ColorFormat
TableDateFormat google.visualization.DateFormat
TableNumberFormat google.visualization.NumberFormat
TablePatternFormat google.visualization.PatternFormat

ملاحظة مهمة: غالبًا ما يستخدم المنسّقون لغة HTML لتنسيق النص، لذلك يجب ضبط خيار allowHtml على true.

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.