Pages

0

JQuery 表格欄位排序 plugin v2


點選上面這張圖片就可以看到效果~

這是之前做過 sortTableTd plugin 的第二版，
主要因為發現了之前 plugin 的一個大問題，
是自己沒有測試到的大問題：數字與字串排序行為不同，
這次花了滿多時間去了解數字和字串排序的不同，
舉例來說，1,11,111,2,22,222 這六個排序，
如果是字串，則是：1,11,111,2,22,222，
如果是數字，則是：1,2,11,22,111,222，
在做過修正之後，這次的 plugin 總算是功能正常了，
就連 "1" 這種以字串方式出現的數字，
都能判斷成數字而不是字串，算是一大突破，
唯一還沒辦法做到的，大概 a1,a11 這類型的混合排序，
所以如果要用 a1,a2 這種排序，
可能要先使用 a01,a02 這樣子才能夠正常排序，
才不會出現 a1,a11,a2 的這種狀況，
(不過其實 window 裡面檔名的排序也是上面這種情形...)
除此之外，這次也修正了上次的指示箭頭位置問題，
讓整體點選上更加容易，
同樣的，只有五個屬性需要設定，
不需要圖片或是位置亂掉的話，就把圖片屬性保持空白就可以~
比較重要的設定也是在 html 的 th 標籤內，
需要排序的行，就在他的 th 上加入 sort="true" 的標籤，
該行就會自動加上箭頭以及點選排序的效果了，
不加 sort="true" 的就不會進行排序，
不過中文字因為編碼的關係，無法單純使用js排序~

oxxo_sortTableTd_v2.js 下載 (點選右鍵下載)

屬性設定：
iconImage : "img/sort_arrow.png", //排序icon圖檔
iconWidth : 7,                    //圖檔寬度
iconHeight : 11,                  //圖檔高度
iconPaddingRight : 0,             //圖檔和右邊邊框的距離
iconPAddingTop : 9               //圖檔和上面邊框的

html原始碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jquery oxxo-sortTableTd plugin</title>
 <style>
  body{margin:40px;}
    table,td,th{padding:0; border-spacing:0; border:1px solid #000; border-collapse:collapse; font-size:12px;}
    th{width:70px; height:30px; background-color:#666; color:#fff;}
    td{height:30px; text-align:center;}
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_sortTableTd_v2.js"></script>
   <script>
    $(function(){
     $("#table0").sortTableTd({
      iconImage : "img/sort_arrow.png", //排序icon圖檔
      iconWidth : 7,                    //圖檔寬度
      iconHeight : 11,                  //圖檔高度
      iconPaddingRight : 0,             //圖檔和右邊邊框的距離
      iconPAddingTop : 9               //圖檔和上面邊框的距離
     });
    });
   </script>
</head>

<body>
   <table id="table0">
    <tr><th sort="true" style="width:50px;">數字</th><th sort="true">字母</th><th sort="true" style="width:100px;">日期</th><th>數字不排序</th></tr>
    <tr><td>3</td><td>a</td><td>2012/06/26</td><td>-15</td></tr>
    <tr><td>1</td><td>e</td><td>2011/06/26</td><td>60</td></tr>
    <tr><td>9</td><td>b</td><td>2011/02/26</td><td>-1</td></tr>
    <tr><td>2</td><td>g</td><td>2011/02/20</td><td>-25</td></tr>
    <tr><td>8</td><td>f</td><td>2012/02/26</td><td>10</td></tr>
    <tr><td>4</td><td>c</td><td>2012/04/20</td><td>-30</td></tr>
    <tr><td>5</td><td>i</td><td>2012/04/25</td><td>-90</td></tr>
    <tr><td>7</td><td>d</td><td>2010/04/20</td><td>66</td></tr>
    <tr><td>6</td><td>h</td><td>2012/01/20</td><td>83</td></tr>
   </table>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言