עקרונות וכלים לבניית LiveGrid

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

בשביל ליישם את הרכיב כאמור, צריך 3 דברים חשובים:

1. טבלה/רשימה נגללת.
2. תקשורת Ajax – שכולל להעביר את ה-offset וה-record count לצד השרת ולקדם את ה-offset ב-record count בכל פעולה של הוספת רשומות. וכן להוסיף את התוצאות לתוך הטבלה.
3. לקבוע את הנקודה שבה מוסיפים עוד נתונים.

טבלה נגללת

טבלה נגללת ניצור בעזרת הגדרת overflow:auto/scroll לתגית ה-tbody או הרשימה (OL/UL).

<ol style="overflow:scroll;">...</ol>

Ajax

בשביל Ajax אני ממליץ להשתמש בספריית MooTools שמאפשרת לבודד מתוכה את החלקים שרוצים (במקרה הזה Ajax ו-Element.Event).

נקודת הוספת הנתונים

בשביל לקבוע את הנקודה שבה מוסיפים עוד נתונים עלינו להשתמש באירוע onScroll ובתוכו לבדוק מתי ה-scrollTop מספיק גבוה בשביל הגלילה. ניתן להשתמש ב-scrollHeight וב-offsetHeight בשביל לבצע חישובים שונים.

למשל, בשביל לקבוע שהנקודה שבה מוסיפים עוד נתונים היא כאשר מסיימים לגלול (כמו ב-Google Reader למשל):

// "this" is our scrollable element
if(this.scrollHeight>=(this.scrollTop+this.offsetHeight)){
    // Do Ajax here and append the results into the scrollable element
}

דוגמא נוספת, בשביל לקבוע שאחרי גלילה של 10 רשומות יש להוסיף עוד רשומות:

// "this" is our scrollable element
var rowHeight = rowObject.offsetHeight;
var rowsInView = Math.floor(this.offsetHeight/rowHeight);
var scrolledRows = Math.floor(this.scrollTop/rowHeight);
var rowsCount = 0;
if((rowsInView+scrolledRows)%rowsCount===0){
    // Do Ajax here and append the results into the scrollable element
}

מימושים קיימים:

OpenRico LiveGrid‏ ( ה”ממציא” של הקונספט אם אני לא טועה )
moo.Playgroud LiveGrid‏ ( בשימוש עם MooTools‏ )
Google Reader‏ – המימוש שאני אישית הכי מתחבר אליו,מבחינת שמישות הוא הכי נכון, אתה תמיד עובר עמוד אחד, לפי הסדר שבו קבעת מהישן לחדש – נורא מתאים לאפליקציות מהסוג הזה.