jQuery- 클릭을 켜기는 방법을 필터링하는 방법?
-
18-09-2019 - |
문제
버튼을 클릭 할 때 행 클래스를 기반으로 테이블을 필터링하는 방법을 알아 내려고합니다. 나는 다양한 jQuery 플러그인을보고 있었지만 그중 어느 것도 내가해야 할 일을하는 것 같지 않습니다. 일부는 필터를 필터링하는 텍스트 상자를 가지고 있으며 코드를 조정하려고 시도했지만 솔직히 큰 혼란을 일으킨다. 다음과 같은 테이블이 있습니다.
<table>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="mr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="dr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
<tr class="sr"><td>data</td></tr>
</table>
그리고 나는 세 개의 버튼이 있습니다.
<input type="button" name="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" name="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" name="filtermr" /> <!-- clicking this will only show rows with mr class -->
해결책
각 버튼 클릭마다 아래에서 각각과 같은 작업을 수행 할 수 있습니다.
$("tr:not(.dr)").hide();
$("tr.dr").show();
즉:
$(document).ready(function(){
$(":button[name='filterdr']").click(function(){
$("tr:not(.dr)").hide();
$("tr.dr").show();
});
});
다른 팁
이와 같은 일이 트릭을 수행 할 수 있습니다.
$('input[type=button]').click(function()
{
$('tr').hide()
.filter('.' + this.name.replace(/filter/, '')).show();
});
테이블에 ID를 추가하는 것이 좋습니다.
<input type="button" id="filterdr" /> <!-- clicking this will only show rows with dr class -->
<input type="button" id="filtersr" /> <!-- clicking this will only show rows with sr class -->
<input type="button" id="filtermr" /> <!-- clicking this will only show rows with mr class -->
jQuery :
$('#filterdr').click(function() {
$('table tr').hide();
$('table tr.dr').show();
});
그리고 다른 버튼에 대해서도 똑같이합니다.
데이터 가능 필요한 것을 정확히 수행합니다.
- 열 또는 행 필터링
- ON ROW CREATION의 이벤트 처리
- 단일 검색 텍스트 상자의 모든 열에 대한 필터링
- 멀티 컬럼 정렬
- 편집 가능한 행
나는 이것을 생산 프로젝트에 사용했으며 일부 사례는 Telerik Radgrad를 통해 Datatables를 사용하기로 선택했습니다. RIA에게는 매우 유연하고 좋습니다.
제휴하지 않습니다 StackOverflow