Technorati Tags:
javascript,
position
מצאתי 2 פונקציות טובות למציאת מיקום מדויק של אלמנט על המסך , אך לצערי צריך לנסות את שתיהן, כי יש דפים שבם אחת מחזירה תוצאות יותר מדויקות ויש דפים שהשניה... ומכיוון שאינני מומחה כל כך גדול בג'אווה סקריפט, אני גם לא יכול לשפר אותן, אבל עדיין, הן טובות, רק תעשו ניסוי קטן בכל דף לבדוק איזו מהן מתאימה
הפונקציה הראשונה - שולחים לה את האובייקט (לא את השם שלו...) והיא מחזירה אובייקט עם ערך x וערך y
function zxcPos(zxcobj){
var position = new Object;
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
position.x=zxctop;
position.y=zxclft;
return position;
}
הפונקציה שניה בנויה משני פונקציות בעצם, אחת מחזירה את המיקום x ואחת את המיקום y
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
.התחלנו כבר לדבר על דיפדוף יעיל בדטה בייס בעבר, עכשיו נמשיך את זה לצד הלקוח
נשתמש באג'קס ליישום הדיפדוף (אני משתמש ב framework לנוחות, אבל כל אג'קס יעשה את העבודה)
נתחיל בבניית הטבלה בדף, אנחנו כבר יודעים איך למשוך את הנתונים כך שנקבל רק את השורות המתאימות לדף שלנו, אז פשוט נזרוק את כל הנתונים לדף בצורת טבלה. את הטבלה נשים בתוך div עם id
נבנה בדף פונקציה שתמשוך לנו את הנתונים מה ADP
private string GetTable()
{
int pagenum;
if (!int.TryParse(Request.Params["pagenum"], out pagenum))
{
pagenum = 1;
}
int rowsPerPage = 10;
string sortByColumn = Request.Params["sortName"];
if (string.IsNullOrEmpty(sortByColumn)) sortByColumn = "id";
string sortOrder = Request.Params["sortOrder"];
if (string.IsNullOrEmpty(sortOrder)) sortOrder = "asc";
DataTable table = ADP.GetUsers(pagenum, rowsPerPage, sortByColumn, sortOrder);
StringBuilder sb = new StringBuilder();
sb.Append("<table><tr><td>id</td><td>name</td></tr>");
foreach (DataRow dr in table.Rows)
{
sb.Append("<tr>");
sb.Append("<td>");
sb.Append(dr["id"]);
sb.Append("</td>");
sb.Append("<td>");
sb.Append(dr["name"]);
sb.Append("</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
הפונקציה הזאת בעצם בונה לנו את הטבלה לפי פרמטרים שהיא מקבלת מהדף כמו מספר הדף ולפי מה למיין. אם זו כניסה ראשונה לדף ואין עדיין נתונים היא משתמשת בערכי ברירת מחדל. קבענו כאן גם את מספר השורות להציג בכל דף. כעת ניקח את התוצאה של הפונקציה הזאת ונציב את הסטרינג הזה בתוך הdiv שלנו
<div id="div_data"><%=myTable%>
</div>
כעת נבנה את שורת הדפדוף, אני אשתמש בפשוטה ביותר כרגע. קודם צריכים לדעת כמה נתונים יש בדטה בייס, נמשוך את מספר השורות ונחלק במספר השורות שאנו מציגים בדף כדי לדעת את מספר הדפים
int rowsCount =ADP.GetUsersCount();
int rowsPerPage = 10;
int totalPages=(int)Math.Ceiling((double)rowsCount / rowsPerPage);
הפייג'ר עצמו בדף html:
<%for (int i=0;i<totalPages;i++)
{
%>
<a href="javascript:doPaging(
<%=(i+1)
%>)">
<%=(i+1)
%></a>
%<}
%>
ופונקציית ג'אווה קטנה
<script type="text/javascript">
var curpage=1;
var sortName='id';
var sortDirection='asc';
function doPaging(pagenum){
curpage=pagenum;
var url='mypage.aspx?action=paging&pagenum='+curpage+'&sortName='+ sortName+'&sortOrder'+sortDirection;
new Ajax.Request(url,{onSuccess:function(t){
if (t.responseText=='error'){
alert('error!');
}else{
document.getElementById('div_data').innerHTML=t.responseText;
}
}});
}
</script>
זהו, בשביל הדפדוף זה מספיק... רק בשביל המיון צריך עוד 2 דברים קטנים לעשות. קודם כל כשאנו בונים את הטבלה, אז בכותרות להוסיף הפניה לפונקציה של ג'אווה סקריפט כדי שכשמקליקים על הכותרת יתבצע מיון
נשנה מעט את איך שבנינו את הטבלה מקודם במקום לכתוב id בכותרת נכתוב <a href=\"javascript:doSort('id');\">id</a> ,וכך לגבי שאר הכותרות, ונבנה את הפונקציה המתאימה בג'אווה סקריפט
function doSort(columnName){
if (sortName==columnName){
if (sortDirection=='asc'){
sortDirection='desc';
}else{
sortDirection='asc';
}
}else{
sortName=columnName;
sortDirection='asc';
}
var url='mypage.aspx?action=paging&pagenum='+curpage+'&sortName='+ sortName+'&sortOrder'+sortDirection;
new Ajax.Request(url,{onSuccess:function(t){
if (t.responseText=='error'){
alert('error!');
}else{
document.getElementById('div_data').innerHTML=t.responseText;
}
}});
}
</script>
הפונקציה הזאת רק מסדרת את הפרמטר של שם העמודה למיון והסדר (עולה יורד) וממשיכה כרגיל כמו הפונקציה הקודמת. זהו בעיקרון, ניתן להוסיף גם חיפוש באותה שיטה למי שרוצה...
להורדת דוגמה (ללא דטה בייס כמובן)
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
Technorati Tags:
ajax,
paging
כולנו שמענו על אג'קס אבל בכל זאת החלטתי לתת דוגמה הכי קצרה ופשוטה לקוד ג'אווה סקריפט לכל אלו שרק מכירים את Ajax של Asp ולא ראו את הקוד מעולם. זה טוב לדעת, זה הרבה יותר מהיר ויעיל, ולפעמים גם הדרך היחידה לבצע דברים שבעזרת ה Asp.Ajax סתם אפשר להסתבך
הנה לדוגמה פונקציית ג'אווה סקריפט שמנסה ליצור אובייקט אג'קס לכל דפדפן. הפונקציה מקבלת את הכתובת לפנות אליה, את הפרמטרים להעביר אם יש, ובסוף מעדכנת div על המסך עם התשובה שהיא קיבלה מהכתובת הזאת
<script type="text/javascript">
var ajaxResponse;
var hasError;
function GetAjax(url,parameters){
var myAjax;
try { myAjax = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { myAjax = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { myAjax = new XMLHttpRequest(); }
catch (e3) { alert('could not create ajax object');return; }
}
}
myAjax.onreadystatechange = function()
{
if(myAjax.readyState == 4)
{
if(myAjax.status == 200)
{
hasError=false;
ajaxResponse=myAjax.responseText;
}
else
{
hasError=true;
ajaxResponse='Error ' + myAjax.status;
}
document.getElementById('div_result').innerHTML=ajaxResponse;
}
};
myAjax.open('POST', url, true);
myAjax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
myAjax.setRequestHeader('Content-length', parameters.length);
myAjax.setRequestHeader('Connection', 'close');
myAjax.send(parameters);
}
</script>
נדאג שיש לנו כזה div בדף
<div id "div_result"></div>
זהו... פשוט צריך לקרוא לפונקציה עם הכתובת והפרמטרים והיא תעדכן את הdiv עם התוצאות
אני אישית משתמש ב prototype framework לשם הנוחות, אבל בכל הדוגמאות ניתן להשתמש בסקריפט הנ"ל באותה צורה
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5