תצוגה חזותית: טבלה

  1. סקירה כללית
  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. כל עמודה צריכה להיות מאותו סוג נתונים, ויש תמיכה בכל סוגי הנתונים של תצוגה חזותית רגילה (מחרוזת, ערך בוליאני, מספר וכו').

נכסים מותאמים אישית

אפשר להקצות את המאפיינים המותאמים אישית הבאים לרכיבים בטבלת נתונים באמצעות ה-method setProperty() של DataTable.

שם הנכס חלה על תיאור
className תא שם של מחלקה במחרוזת שצריך להקצות לתא ספציפי. אפשר להשתמש בו כדי להקצות עיצוב CSS לתאים ספציפיים.
style תא מחרוזת סגנון להקצאה בתוך השורה. הפעולה הזו תבטל סגנונות של מחלקה של CSS שהוחלו על התא הזה. כדי שההגנה הזו תפעל, צריך להגדיר את המאפיין allowHtml=true. דוגמה: 'border: 1px solid green;'

דוגמה

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

אפשרויות הגדרה

שם
allowHtml

אם המדיניות מוגדרת כ-True, ערכים בפורמט של תאים שכוללים תגי HTML יוצגו כ-HTML. אם המדיניות מוגדרת כ-False, רוב העיצובים המותאמים אישית לא יפעלו כראוי.

סוג: בוליאני
ברירת מחדל: false
alternatingRowStyle

ההגדרה קובעת אם סגנון הצבעים המתחלפים יוקצה לשורות אי-זוגיות וזוגיות.

סוג: בוליאני
ברירת מחדל: True
cssClassNames

אובייקט שבו כל שם מאפיין מתאר רכיב בטבלה, וערך המאפיין הוא מחרוזת, שמגדירה מחלקה שצריך להקצות לאותו רכיב בטבלה. צריך להשתמש במאפיין הזה כדי להקצות שירות CSS מותאם אישית לרכיבים ספציפיים בטבלה. כדי להשתמש במאפיין הזה, צריך להקצות אובייקט, כאשר שם המאפיין מציין את הרכיב בטבלה וערך המאפיין הוא מחרוזת, שמציין את שם המחלקה שיוקצה לאלמנט הזה. לאחר מכן צריך להגדיר סגנון CSS עבור המחלקה הזו בדף שלכם. שמות המאפיינים הבאים נתמכים:

  • headerRow – הקצאת שם מחלקה לשורת הכותרת של הטבלה (רכיב <tr>).
  • tableRow – הקצאת שם מחלקה לשורות שאינן כותרות (רכיבי <tr>).
  • oddTableRow – הקצאת שם מחלקה לשורות אי-זוגיות בטבלה (רכיבי <tr>). הערה: האפשרות alternatingRowStyle חייבת להיות מוגדרת כ-True.
  • selectedTableRow – הקצאת שם מחלקה לשורה שנבחרה בטבלה (רכיב <tr>).
  • hoverTableRow – הקצאת שם מחלקה לשורה בטבלה שעוברת מעליה (רכיב <tr>).
  • headerCell – הקצאת שם מחלקה לכל התאים בשורת הכותרת (רכיב <td>).
  • tableCell – הקצאת שם מחלקה לכל התאים בטבלה שלא מכילים כותרת (רכיב <td>).
  • rowNumberCell – הקצאת שם מחלקה לתאים בעמודת מספר השורה (רכיב <td>). הערה: הערך של האפשרות showRowNumber צריך להיות True.

לדוגמה: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

הערה: ב-CSS, רכיבים מסוימים מבטלים את הרכיבים האחרים. לדוגמה, אם מציינים צבע רקע של רכיב <tr> ומרכיב <td>, הצבע השני מקבל קדימות על פני הרכיב הקודם. חשוב לציין את כל סגנונות ה-CSS הרלוונטיים ב-cssClassNames כדי למנוע התנגשויות.

Type: object (סוג אובייקט)
ברירת מחדל: null
firstRowNumber

מספר השורה של השורה הראשונה ב-dataTable. משתמשים בו רק אם הערך של showRowNumber הוא True.

סוג: מספר
ברירת מחדל: 1
frozenColumns

מספר העמודות בצד ימין שמוקפאות. העמודות האלה יישארו במקומן כשתגלו את העמודות האחרות לרוחב. אם showRowNumber הוא false, הגדרה של frozenColumns כ-0 תופיע בדיוק כמו שהיא מוגדרת ל-null, אבל אם showRowNumber מוגדר לערך true, העמודה של מספר השורה תקפיא.

סוג: מספר
ברירת מחדל: null
גובה

מגדיר את הגובה של רכיב הקונטיינר של התצוגה החזותית. אפשר להשתמש ביחידות HTML רגילות (לדוגמה: 100px, 80em, 60). אם לא צוינו יחידות, המספר נחשב לפיקסלים. אם לא מציינים זאת, הדפדפן יתאים את הגובה באופן אוטומטי כדי להתאים את הטבלה, והוא יכווץ עד כמה שאפשר בתהליך. אם הוא מוגדר קטן מהגובה הנדרש, הטבלה מוסיפה סרגל גלילה אנכי (גם שורת הכותרת קפואה). אם הערך מוגדר ל-100%, הטבלה תתרחב עד כמה שאפשר לרכיב הקונטיינר.

סוג: מחרוזת
ברירת מחדל: אוטומטי
דף, עמוד

אם ואיך מפעילים את החלוקה לדפים של הנתונים. בוחרים אחד מערכי המחרוזת הבאים:

  • 'enable' – הטבלה תכלול לחצנים למעבר לדף קדימה ו-page-Back. לחיצה על הלחצנים האלו תבצע את פעולת החלוקה לדפים ותשנה את הדף המוצג. מומלץ להגדיר גם את האפשרות pageSize.
  • 'event' - הטבלה תכלול לחצנים קדימה ואחורה, אבל לחיצה עליהם תפעיל אירוע 'דף' ולא תשנה את הדף שמוצג. כדאי להשתמש באפשרות הזו כאשר הקוד מיישם לוגיקה משלו להעברת דפים. בדוגמה של TableQueryWrapper מוסבר איך לטפל באירועי חלוקה לדפים באופן ידני.
  • 'Disable' (השבתה) – [ברירת מחדל] החלוקה לדפים לא נתמכת.
    • סוג: מחרוזת
    ברירת מחדל: 'השבתה'
pageSize

מספר השורות בכל דף, אם החלוקה לדפים מופעלת עם אפשרות הדף.

סוג: מספר
ברירת מחדל: 10
pagingButtons

מגדיר אפשרות מוגדרת ללחצני החלוקה לדפים. האפשרויות הן:

  • 'שניהם' - הפעלת הלחצנים 'הקודם' ו'הבא'
  • 'הקודם' - רק הלחצן 'הקודם' מופעל
  • 'הבא' – רק הלחצן 'הבא' מופעל
  • 'אוטומטי' - הלחצנים מופעלים בהתאם לדף הנוכחי. רק הדף הבא מוצג. בדף האחרון מוצגת רק הגרסה הקודמת. אחרת, שתי האפשרויות מופעלות.
  • מספר - מספר לחצני הדפדוף להצגה. המספר המפורש הזה יבטל את המספר המחושב מ-pageSize.
סוג: מחרוזת או מספר
ברירת מחדל: 'אוטומטי'
rtlTable

נוספה תמיכה בסיסית בשפות מימין לשמאל (כמו ערבית או עברית) על ידי הפיכת סדר העמודות בטבלה כך שעמודה אפס היא העמודה הימנית ביותר והעמודה האחרונה היא העמודה השמאלית ביותר. אין לכך השפעה על אינדקס העמודות בנתוני הבסיס, אלא רק על סדר התצוגה. בתצוגה החזותית של הטבלה אין תמיכה בתצוגה מלאה של שפה דו-כיוונית (BiDi), גם אם בוחרים באפשרות הזו. המערכת תתעלם מהאפשרות הזו אם תפעילו את החלוקה לדפים (באמצעות אפשרות הדף), או אם הטבלה כוללת סרגלי גלילה כי ציינתם אפשרויות גובה ורוחב קטנות מהגודל הנדרש של הטבלה.

סוג: בוליאני
ברירת מחדל: false
scrollLeftStartPosition

מגדירה את מיקום הגלילה האופקית, בפיקסלים, אם הטבלה כוללת סרגלי גלילה אופקיים כי הגדרתם את מאפיין הרוחב. הטבלה תפתח את מספר הפיקסלים שיופיעו אחרי העמודה הימנית ביותר.

סוג: מספר
ברירת מחדל: 0
showRowNumber

אם המדיניות מוגדרת כ-True, מספר השורה יהיה העמודה הראשונה בטבלה.

סוג: בוליאני
ברירת מחדל: false
מיון

אם ואיך למיין עמודות כשהמשתמש לוחץ על כותרת עמודה. אם המיון מופעל, מומלץ להגדיר גם את המאפיינים listAscending ו-sortColumn. בוחרים אחד מערכי המחרוזת הבאים:

  • 'enable' – [ברירת מחדל] המשתמשים יכולים ללחוץ על כותרות העמודות כדי למיין את הנתונים לפי העמודה שעליה הם לחצו. כשמשתמשים ילחצו על כותרת העמודה, השורות ימוינו באופן אוטומטי ויופעל אירוע 'מיון'.
  • 'event' – כשמשתמשים ילחצו על כותרת העמודה, יופעל אירוע 'sort', אבל השורות לא ימוינו באופן אוטומטי. כדאי להשתמש באפשרות הזו כאשר הדף מיישם מיון משלו. בדוגמה של TableQueryWrapper אפשר לראות דוגמה לאופן הטיפול במיון אירועים באופן ידני.
  • 'השבתה' – ללחיצה על כותרת של עמודה אין השפעה.
סוג: מחרוזת
ברירת מחדל: 'enable'
sortAscending

הסדר שבו ממוינת עמודת המיון הראשונית. הערך הוא True לערך עולה, FALSE לערך יורד. המערכת תתעלם אם לא צוין sortColumn.

סוג: בוליאני
ברירת מחדל: True
sortColumn

אינדקס של עמודה בטבלת הנתונים, שלפיו הטבלה ממוינת בהתחלה. העמודה תסומן בחץ קטן שמציין את סדר המיון.

סוג: מספר
ברירת המחדל: 1-
startPage

דף הטבלה הראשון להצגה. בשימוש רק אם page במצב הפעלה או אירוע.

סוג: מספר
ברירת מחדל: 0
רוחב

מגדיר את הרוחב של רכיב הקונטיינר של התצוגה החזותית. אפשר להשתמש ביחידות 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 - (מערך מספרי) מערך של מספרים, שבו האינדקס במערך הוא מספר השורה אחרי מיון (בטבלה הגלויה), והערך הוא האינדקס של השורה הזו בטבלת הנתונים הבסיסית (לא ממוינת).
למקומות

התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים שיטת ציור, ולקרוא לו רק אחרי שהאירוע הופעל.

מאפיינים: ללא

מעצבי עיצוב

הערה: התצוגה החזותית של הטבלה כוללת קבוצה של אובייקטים של עיצוב, שיוחלפו על ידי מעצבים גנריים, שמתנהגים באותו אופן, אבל אפשר להשתמש בהם בכל תצוגה חזותית.

בטבלה הבאה מוצגים עיצוב הטבלה הקודם ואת הפורמט הגנרי המקביל שלו. כשכותבים קוד חדש, צריך להשתמש בפורמט הגנרי.

כלי לעיצוב טבלאות
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.

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.