Prototype : A Table Sorter [الأرشيف] - منتديات بانى ستار

mostafaxman

03-17-2009, 11:46 AM

السلام عليكم ورحمة الله وبركاتة

نعود اليكم من جديد في احدى سلسلة دروس مكتبة الـPrototype

وفي هذا الدرس سنعرض احدى التطبيقات البسيطة لعمل هذه المكتبة

وهو مرتب الجدول يقوم هذا التطبيق على اساس الدالة Sort

لترتيب محتويات الجداول عن طريق الفارز الموجود على تاج table بشكل مخفي

فعند الضغط على راس الجدول بالماوس سيتم ترتيب الحقول بشكل متزايد وعند الضغط مره اخرى

سيتم ترتيب الحقول بشكل متناقص ايضا سنستخدم بعض كلاسات الـ CSS

لنقم الان بأنشاء صفحة لتكن بأسم index.html

ضع بها الكود التالي :

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="****/html; charset=utf-8" />
<title>A table sorter with Prototype</title>
<link rel="stylesheet" type="****/css" href="sorter.css" />
<****** type="****/**********" src="prototype.js"></******>
<****** type="****/**********" src="sorter.js"></******>
</head>
<body>

<h1>A table sorter with Prototype</h1>

<h2>To-Do</h2>

<table id="todo">
<thead>
<tr>
<th>What?</th>
<th>When?</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Paris *** 2007</td>
<td>2007-11-15</td>
<td>IBM La Défense / INSIA</td>
</tr>
<tr class="alternate">
<td>Paris On Rails 2007</td>
<td>2007-12-10</td>
<td>Cité des Sciences</td>
</tr>
<tr>
<td>Burger Quiz party</td>
<td>2007-04-14</td>
<td>Volta</td>
</tr>
</tbody>
</table>

<h2>Staff</h2>

<table id="staff">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Latest checkin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Richard</td>
<td>Piacentini</td>
<td>2007-03-27</td>
</tr>
<tr class="alternate">
<td>Eric</td>
<td>Daspet</td>
<td>2007-03-28</td>
</tr>
<tr>
<td>Aurore</td>
<td>Jaballah</td>
<td>2007-03-15</td>
</tr>
</tbody>
</table>

</body>
</html>

لاحظ من رأس الكود بأنك قمت بأستدعاء لعدة ملفات وهي

prototype.js
sorter.js
sorter.css

حسنا الان لنرى ماهية هذه الملفات وسأقم بشرح ما يهمنا منها

اولا الملف الخاص بـCSS

فهو فقط ليقم بتغيير خلفية رؤوس الجداول ووضع صورة صغيرة تدل المستخدم على ان الترتيب

هو ترتيب تصاعدي او ترتيب تنازي لنرى مايوجد بداخل هذا الملف

h1, h2 { font-size: 100%; }

table {
margin: 0.5em 0;
border: 1px solid black; border-collapse: collapse;
font-size: small;
font-family: sans-serif;
}

td, th {
padding: 0.2em 0.3em;
border: 1px solid silver;
}

th {
****-align: left;
padding-right: 20px;
cursor: default;
}

thead th {
background-color: navy; color: white;
}
/* START:core_styles */
thead th.sort-asc, thead th.sort-desc {
background: #aaf url('sort-asc.png') no-repeat right center;
}

thead th.sort-desc { background-image: url('sort-desc.png'); }

tr.alternate * {
background-color: #ddd;
}
/* END:core_styles */

غيرنا الالوان وتلاعبنا ببعض الصور من خلال اسماء الكلاسات المرتبطة بتاجات الhtml

لننتقل الان الى ما هو اهم في درسنا وهو ******ing Part

هذا الكود هو الموجود في ملف sorter.js

Element.addMethods({
collect****Nodes: function(element) {
return $A($(element).childNodes).collect( function(node) {
return (node.nodeType==3 ? node.nodeValue :
(node.hasChildNodes() ? Element.collect****Nodes(node) : ''));
}).flatten().join('');
}
});

//
var TableSorter = Class.create({
initialize: function(element) {
this.element = $(element);
this.sortIndex = -1;
this.sortOrder = 'asc';
this.initDOMReferences();
this.initEventHandlers();
}, // initialize

initDOMReferences: function() {
var head = this.element.down('thead');
var body = this.element.down('tbody');
if (!head || !body)
throw 'Table must have a head and a body to be sortable.';
this.headers = head.down('tr').childElements();
this.headers.each(function(e, i) {
e._colIndex = i;
});
this.body = body;
}, // initDOMReferences

initEventHandlers: function() {
this.handler = this.handleHeaderClick.bind(this);
this.element.observe('click', this.handler);
}, // initEventHandlers

handleHeaderClick: function(e) {
var element = e.element();
if (!('_colIndex' in element)) {
element = element.ancestors().find(function(elt) {
return '_colIndex' in elt;
});
if (!((element) && '_colIndex' in element))
return;
}
this.sort(element._colIndex);
}, // handleHeaderClick

adjustSortMarkers: function(index) {
if (this.sortIndex != -1)
this.headers[this.sortIndex].removeClassName('sort-' +
this.sortOrder);
if (this.sortIndex != index) {
this.sortOrder = 'asc';
this.sortIndex = index;
} else
this.sortOrder = ('asc' == this.sortOrder ? 'desc' : 'asc');
this.headers[index].addClassName('sort-' + this.sortOrder);
}, // adjustSortMarkers

sort: function(index) {
this.adjustSortMarkers(index);
var rows = this.body.childElements();
rows = rows.sortBy(function(row) {
return row.childElements()[this.sortIndex].collect****Nodes();
}.bind(this));
if ('desc' == this.sortOrder)
rows.reverse();
rows.reverse().each(function(row, index) {
if (index > 0)
this.body.insertBefore(row, rows[index - 1]);
}.bind(this));
rows.reverse().each(function(row, index) {
row[(1 == index % 2 ? 'add' : 'remove') + 'ClassName']('alternate');
});
} // sort
}); // TableSorter

********.observe('dom:loaded', function() {
$$('table').each(function(table) { new TableSorter(table); });
});

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