jQuery tablesterter- <입력> 요소가있는 열별로 정렬

StackOverflow https://stackoverflow.com/questions/1912957

문제

나는 다음과 같은 테이블이 있습니다.

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        |

업데이트 열에 확인란이 포함되어 있습니다 <input type='checkbox' />.

체크 박스 초기 상태는 테이블을 렌더링하기 전에 결정되지만 행이 데이터베이스에서 가져온 후 (서버 측에서 조건 세트를 기준으로 함).

체크 박스는 기본적으로 체크인하거나 기본적으로 확인하지 않거나 비활성화 할 수 있습니다 (disabled='disabled' ~처럼 input 기인하다).

사용 중입니다 jQuery 's Tablesterter 내 테이블을 정렬합니다. 그리고 확인란이 포함 된 열로 정렬 할 수 있기를 원합니다. 어떻게 가능한가? input 요소가 도움이된다면 ...)?
그것을 처리하기 위해 나만의 파서를 작성해야합니까?

도움이 되었습니까?

해결책

입력 직전에 숨겨진 스팬을 추가하고 일부 텍스트 (열을 정렬하는 데 사용됨)에 포함시킵니다. 같은 것 :

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

필요한 경우 확인란에 이벤트를 첨부하여 확인/확인하지 않았을 때 이전 형제 (스팬)의 내용을 수정할 수 있습니다.

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

참고 : 코드를 확인하지 않았으므로 오류가있을 수 있습니다.

다른 팁

이것은 Haart의 대답의보다 완전한/올바른 버전입니다. 

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

});

새로운 기능을 갖춘 지원/포크 jQuery Tablesorter 라이브러리를 사용하고 있기 때문에이 응답을 추가하고 있습니다. 입력/선택 필드를위한 옵션 파서 라이브러리가 포함되어 있습니다.

http://mottie.github.io/tablester/docs/

예는 다음과 같습니다.http://mottie.github.io/tablesterter/docs/example-widget-grouping.html또한 입력/선택 파서 라이브러리 "Parser Input-Select.js"를 포함하고 헤더 개체를 추가하고 열 및 구문 분석 유형을 선언하여 수행됩니다.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

추가 파서는 다음과 같습니다. 날짜 구문 분석 (w/sugar & datejs), ISO8601 날짜, 달, 2 자리, 주중, 거리 (피트/인치 및 메트릭) 및 제목 형식 ( "A"& "the")이 포함됩니다.

테이블 러 jQuery 플러그인을 사용하고 모든 확인란 열을 정렬 할 수있는 사용자 정의 구문 프로그램을 추가 할 수 있습니다.

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

테이블 러에 커스텀 파서를 추가 할 수 있습니다.

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});

그런 다음 테이블에 사용하십시오 

$("table").tablesorter(headers:{0:{sorter:input}});

Aaron의 답변을 완료하고 스택 오버플로 오류를 피하기 위해 최종 터치 한 번만 만 있습니다. 따라서 사용하는 것 외에도 $.tablesorter.parser() 위에서 설명한 기능을 사용하면 런타임에 업데이트 된 확인란 값으로 작동하도록 내 페이지에 다음을 추가해야했습니다.

    var checkboxCahnged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });


    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

다른 답변에서 다중 접근 방식을 시도했지만 Salgiza의 수락 된 답변을 사용하여 테이블 모델 업데이트에 대한 Martin의 의견을 사용했습니다. 그러나 처음 구현했을 때 제시된 문구와 마찬가지로 Checkbox OnChange 트리거 내부의 업데이트 라인을 설정했습니다. 이로 인해 체크 확인/선택 해제 체크 박스에 대한 행이 재정렬되어 매우 혼란 스러웠습니다. 라인은 클릭으로 뛸 수있었습니다. 대신 업데이트 기능을 실제 Checkbox 열 헤더에 바인딩하여 정렬 업데이트를 클릭 할 때만 회선이 재 배열되도록합니다. 원하는대로 작동합니다.

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top