jQuery 테이블 러의 맞춤형 구문 분석기

Question

나는 사용하고있다 jQuery 테이블 orter 구문자가 테이블 열에 적용되는 순서에 문제가 있습니다. 양식 $ -3.33의 통화를 처리하기 위해 사용자 정의 구문자를 추가하고 있습니다.

$.tablesorter.addParser({
    id: "fancyCurrency",
    is: function(s) {
      return /^\$[\-]?[0-9,\.]*$/.test(s);
    },
    format: function(s) {
      s = s.replace(/[$,]/g,'');
      return $.tablesorter.formatFloat( s );
    },
    type: "numeric"
});

문제는 내장 된 통화 파서가 내 커스텀 파서보다 우선하는 것 같습니다. 파서를 테이블 orter 코드 자체 (통화 파서 이전)에 넣을 수 있었지만 제대로 작동하지만 유지 관리가 가능하지 않습니다. 다음과 같은 것을 사용하여 수동으로 분류기를 지정할 수 없습니다.

headers: {
    3: { sorter: "fancyNumber" },
    11: { sorter: "fancyCurrency" }
}

테이블 열은 사용자 입력에서 동적으로 생성되므로. 한 가지 옵션은 CSS 클래스로 사용할 분로를 지정하고 일부 jQuery를 사용하여 분류기를 명시 적으로 지정하는 것입니다. 이 질문 제안하지만 가능하면 동적 탐지를 고수하고 싶습니다.

Answer 1

첫 번째 옵션은 통화 값이있는 열에 추가 클래스 "{ 'Sorter': 'Currency'}"를 제공하는 것입니다. 또한 테이블 러가 지원하는 플러그인 메타 데이터를 포함해야합니다. 이렇게하면 요소당 옵션을 끌어 당기고 테이블 러에게 정렬하는 방법을 명시 적으로 알려줍니다.

<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" />
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.metadata.js"></script>
<script src="/js/jquery.tablesorter.js"></script>

<script>
    $(document).ready(function()
    {
    $("#table").tablesorter();
    }
    );
    </script>
</head>
<table id="table" class="tablesorter">
<thead>
  <tr>
    <th class="{'sorter':'currency'}">Currency</th>
    <th>Integer</th>
    <th>String</th>
  </tr>
</thead>
<tbody>
<tr>
  <td class="{'sorter':'currency'}">$3</td>
  <td>3</td>
  <td>three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">-$3</td>
  <td>-3</td>
  <td>negative three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">$1</td>
  <td>1</td>
  <td>one</td>
</tr>
</tbody>
</table>

또한 화폐를 형식화하는 기능에 버그가 있습니다. 음수를 처리하지 않습니다.

나는 제출했다 벌레, 패치 착륙을 위해 노력하고 있습니다.

두 번째 옵션은이 수정 사항을 테이블 러 사본에 적용하는 것입니다. 수정 사항을 적용하면 TH 또는 TD에 통화 분류기를 지정할 필요가 없습니다 (TD에 지정되는 것은 어쨌든 과잉입니다).

jquery.tablesternor.js의 724 행 편집 :

return $ .tablesorter.formatfloat (s.replace (new regexp (/[^0-9.]/g), "");

로 변경:

return $ .tablesorter.formatfloat (s.replace (new regexp (/[^-0-9.]/g), "");

사례:

• 가치 : $ -3, $ 1, $ 3

• 현재 ASC 주문 : $ 1, $ 3, $ -3

• 예상 ASC 주문 $ -3, $ 1, $ 3

사례:

• 가치 : -$ 3, $ 1, $ 3

• 현재 ASC 주문 : $ 1, $ 3,-$ 3

• 예상 ASC 주문 $ -3, $ 1, $ 3

Answer 2

나는 비슷한 문제가 있었고 발견했다 textExtraction 셀에 마크 업이 포함 된 경우 권장되는 옵션. 그러나, 그것은 사전 형식의 포피터로 완벽하게 작동합니다!

$('table').tablesorter({
  textExtraction: function(s) {
    var text = $(s).text();
    if (text.charAt(0) === '$') {
      return text.replace(/[^0-9-.]/g, '');
    } else {
      return text;
    }
  }
});

Answer 3

나는 이런 것을 사용했고 그것은 나를 위해 일했다.

Header <th class = "{ 'sorter': 'digit'}"> 에서이 클래스를 사용하고 <td class = "{ 'sorter': 'digit'}"> 열에 있습니다.

일단 완료되면 자바 스크립트 코드를 변경하여 숫자 형태로 모든 통화를 얻으십시오.

완료, 정렬을 즐기십시오 !!!

코드는 다음과 같습니다.

헤더 :

  <th style='width: 98px;' class="{'sorter':'digit'}">
            Amount
   </th>

열 (TD) :

 <td align="left" style='width: 98px;' class="{'sorter':'digit'}">
            <%= Convert.ToDouble( a.AMOUNT ?? 0.0).ToString("C3") %>
 </td>

자바 스크립트 :

<script language="javascript" type="text/javascript">
  jQuery("#rewardtable").tablesorter({
    textExtraction: function (data) {
        var text = $(data).text();
        if (text.toString().indexOf("-$") != -1) {
            return ("-" + text.replace(new RegExp(/[^0-9.]/g), ""));
        }
        else if (text.toString().indexOf("$") != -1) {
            return (text.replace(new RegExp(/[^-0-9.]/g), ""));
        }
        else {
            return text;
        }
    }
  });