التصور: جدول

نظرة عامة

جدول يمكن ترتيبه وتقسيمه إلى صفحات. يمكن تنسيق خلايا الجدول باستخدام سلاسل التنسيق، أو عن طريق إدراج 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);

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

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

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

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

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

مثال

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

خيارات الضبط

الاسم
السماح باستخدام HTMLHtml

إذا تم التعيين على "true"، فسيتم عرض القيم المنسقة للخلايا التي تتضمن علامات HTML كـ HTML. وإذا تم تعيينها على "false"، فلن تعمل معظم التنسيقات المخصصة بشكلٍ صحيح.

النوع: منطقي
تلقائي: خطأ
تبديل الصف

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

النوع: منطقي
افتراضي: صحيح
cssClassNames

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

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

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

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

النوع: الكائن
تلقائي: null
رقم الصف الأول

رقم الصف للصف الأول في جدول البيانات. يتم استخدامه فقط إذا كان showRowNumber صحيح.

النوع: الرقم
تلقائي: 1
أعمدة مجمّدة

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

النوع: الرقم
تلقائي: null
الارتفاع

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

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

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

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

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

النوع: الرقم
تلقائي: 10
أزرار الترحيل

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

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

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

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

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

النوع: الرقم
القيمة التلقائية: 0
إظهارصف الصف

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

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

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

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

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

النوع: منطقي
افتراضي: صحيح
تصنيف العمود

فهرس عمود في جدول البيانات، والذي يتم ترتيب الجدول من خلاله. وسيتم تمييز العمود بسهم صغير يشير إلى ترتيب التصنيف.

النوع: الرقم
تلقائي: -1
صفحة البدء

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

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

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

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

الطرق

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

لرسم الجدول.

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

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

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

نوع العرض: مصفوفة من عناصر التحديد
getSortInfo()

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

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

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

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

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

محو الرسم البياني وإصدار جميع الموارد المخصّصة له

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

الأحداث

الاسم
اختيار

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

الخصائص: بدون
الصفحة

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

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

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

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

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

الخصائص: بدون

التنسيقات

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

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

أداة تنسيق الجدول
TableArrowFormat google.visibleization.ArrowFormat
تنسيق TableBar google.Visualization.BarFormat
تنسيق لون الجدول google.Visualization.ColorFormat
تنسيق TableDate google.Visualization.DateFormat
تنسيق رقم الجدول google.visibleization.NumberFormat
تنسيق النقش google.Visualization.PatternFormat

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

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

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