1. مولد وظيفة المقارنة:
نسخ رمز رمز على النحو التالي:
/**
* مولد وظيفة المقارنة
*
* param icol
* عدد صفوف البيانات
* param sdatatype
* نوع بيانات الصف
* @يعود
*/
وظيفة generateComParetrs (icol ، sdatatype) {
مقارنة وظيفة الإرجاع (OTR1 ، OTR2) {
VValue1 = Convert (OTR1.Cells [icol] .firstchild.nodevalue ، sdatatype) ؛
VValue2 = Convert (OTR2.Cells [ICOL] .firstchild.nodevalue ، sdatatype) ؛
if (vValue1 <vvalue2) {
العودة -1 ؛
} آخر إذا (vValue1> vvalue2) {
العودة 1 ؛
} آخر {
العودة 0 ؛
}
} ؛
}
2. أنواع أنواع الأحرف المقارنة:
نسخ رمز رمز على النحو التالي:
/**
* معالجة نوع الحقل المرتبة
*
* param svalue
* تخلف قيمة الحقل إلى نوع الأحرف ، أي قارن رموز ASCII
* param sdatatype
* نوع الحقل يدعم فقط تنسيقات MM/DD/YYYY أو MMMM DD ، YYYYY (12 يناير 2004)
* @يعود
*/
وظيفة تحويل (svalue ، sdatatype) {
التبديل (sdatatype) {
حالة "int":
إرجاع Parseint (Svalue) ؛
حالة "تعويم":
إرجاع parsefloat (svalue) ؛
حالة "تاريخ":
إرجاع تاريخ جديد (date.parse (svalue)) ؛
تقصير:
إرجاع svalue.toString () ؛
}
}
3. الوظيفة الرئيسية:
نسخ رمز رمز على النحو التالي:
/**
* فرز أعمدة الجدول حسب رأس الجدول
*
* param stableid
* معرف الجدول للمعالجة <جدول المعرف = ''>
* param icol
* معرف عمود الحقل على سبيل المثال: 0 1 2 3 ...
* param sdatatype
* نوع بيانات الحقل int ، تعويم ، تتم معالجة التاريخ افتراضيًا.
*/
وظيفة sortable (ثابت ، icol ، sdatatype) {
var otable = document.getElementById (StableId) ؛
var otbody = otable.tbodies [0] ؛
var coldatarows = otbody.rows ؛
var atrs = صفيف جديد ؛
لـ (var i = 0 ؛ i <coldatarows.length ؛ i ++) {
atrs [i] = Coldatarows [i] ؛
}
if (otable.sortcol == icol) {
Atrs.reverse () ؛
} آخر {
Atrs.sort (generateComParetrs (Icol ، sdatatype)) ؛
}
var ofragment = document.createdocumentFragment () ؛
لـ (var j = 0 ؛ j <atrs.length ؛ j ++) {
Ofragment.AppendChild (ATRS [J]) ؛
}
Otbody.AppendChild (Ofragment) ؛
otable.sortcol = icol ؛
}
قم بتغليف رمز السؤال أعلاه في ملف JS والرجوع إليه في صفحة HTML.
اختبار test.html:
نسخ رمز رمز على النحو التالي:
<html xmlns = "http://www.w3.org/1999/xhtml">
<title> جدول جدول الجدول </ title>
<script type = "text/javaScript" src = "js/sortable.js"> </script>
<body>
<table border = "1" id = "tblsort">
<thead style = "اللون: أحمر ؛ bgcolor: فارغ">
<tr>
<th onClick = "Sorttable ('tblsort' ، 0) ؛"
<th onClick = "Sorttable ('tblsort' ، 1 ، 'int') ؛
<th onClick = "Sorttable ('tblsort' ، 2 ، 'date') ؛
</r>
</ thead>
<tbody>
<tr>
<td> a </td>
<td> 1 </td>
<td> 5/9/2008 </td>
</r>
<tr>
<td> b </td>
<td> 3 </td>
<td> 6/9/2008 </td>
</r>
<tr>
<td> d </td>
<td> 6 </td>
<td> 5/4/2008 </td>
</r>
<tr>
<td> e </td>
<td> -5 </td>
<td> 5/4/2007 </td>
</r>
<tr>
<td> h </td>
<td> 34 </td>
<td> 5/8/2008 </td>
</r>
<tr>
<td> c </td>
<td> 12 </td>
<td> 1/4/2018 </td>
</r>
</tbody>
</ table>
</ body>
</html>