jQuery를 사용하여 GridView 비동기 정렬 및 페이징 구현 code

jQuery를 사용하여 GridView 비동기 정렬 및 페이징 구현 code_jquery

WBOY

풀어 주다： 2016-05-16 18:35:18

원래의

1349명이 탐색했습니다.

백업 관리 페이지가 요청될 때마다 서버는 모든 백업 및 복원 정보를 클라이언트에 전송하고 ui.tabs는 두 가지 유형의 정보를 접어서 별도로 표시합니다. 다행히 ui.tabs는 ajax를 제공합니다. 기능을 사용하며 각 A 탭은

코드 복사 에 직접 적용될 수 있습니다. > 코드는 다음과 같습니다.

백업< ;/span>

복원< /span>< /li>

그러나 이렇게 하면 Restore.aspx 서버와 상호 작용할 때 서버 측 컨트롤이 있습니다. 예를 들어 GridView에는 정렬 기능이 제공되지만 페이징은 불가능합니다. 상호 작용할 때마다 탭을 처음 로드할 때의 상태만 표시하기 때문입니다(gridView는 항상 표시될 수 있음). 첫 페이지), 때로는 전체 페이지를 채우는 경우도 있습니다.

이 문제를 해결하려면 먼저 Ajax를 사용하여 참조된 모든 페이지가 다시 로드되는 것을 방지하는 것을 생각해 보세요. UpdatePanel을 시도했지만 작동하지 않아서 juery를 생각했습니다.

아래에서는 jquery를 사용하여 GridView의 비동기 정렬 및 페이징을 구현하는 방법을 보여 드리겠습니다.

우선 페이지에 그리드뷰도 넣습니다. 페이지의 실제 표시 부분으로 사용되지 않고 Ajax 요청이 오면 이 GridView를 사용합니다. Render는 Html 출력이고 ajax 콜백 함수가 표시를 완료합니다. GridView를 표시하지 않기 위해 PreRender에서 Visible = false를 설정했습니다. Visible=false를 직접 설정할 수 없습니다. 그렇지 않으면 HTML

코드

코드 복사

코드는 다음과 같습니다. 🎜>

코드 복사

코드는 다음과 같습니다.

 
var getPageData=function(i) 
{ 
$.ajax({ 
url:'Restore.aspx?' new Date() '&page=' i,//페이지 인덱스 지정 
유형:'get', 
성공:함수(data,textStatus) 
{ 
$('#ShowData')[0].innerHTML=data 
}, 
 error:function(XMLHttpRequest,textStatus) 
{ 
//debugger; 
$('#ShowData').text(XMLHttpRequest.responseText) 
}, 
complete:function(XMLHttpRequest) , textStatus) 
{ 
} 
}) 

다음 단계는 get 메소드를 통해 정렬 필드와 정렬 방향을 지정하는 것입니다. 기능은 다음과 같습니다.
코드

코드 복사 코드는 다음과 같습니다.

var sortDataGridView=function( sortExpression,sortDirection)
{
event.returnVaule=false;//제출 서버 방지
$.ajax({
url:'Restore.aspx?' new Date( ) '&sortEx=' sortExpression '&sortDir=' sortDirection,//IE가 캐시되므로 캐싱의 영향을 방지하기 위해 새 Date()를 추가하세요.
type:'get',
success:function(data, textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
$('#ShowData ').text(XMLHttpRequest.responseText)
},
complete:function(XMLHttpRequest,textStatus)
{
}
});

GridView에서 HeadText를 클릭할 때 비동기 정렬을 구현하고 GridView의 원래 생성된 콘텐츠를 보려면 sortDataGridView를 트리거해야 합니다. 이는 실제로 A 마크
이 태그에 onclick 이벤트를 추가하고 서버에 PostBack을 방지하기 위해 href 속성 값을 제거하겠습니다. 따라서 GridView의 RowDataBound 이벤트에서 다음 처리를 수행합니다.

Code

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: protected void gvRestore_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.Header) 
{ 
for (int i = 1; i <= 7; i ) 
{ 
LinkButton lt = (LinkButton)e.Row.Cells[i].Controls[0] 
lt.Attributes["href "] = "#" ; 
lt.OnClientClick = string.Format(" return sortDataGridView('{0}','{1}')", lt.CommandArgument, "ASC"); 
} 
} 
 if (e.Row.RowType == DataControlRowType.Pager) 
{ 
e.Row.Visible = false 
} 
} 

 

여기로 이동 첫 번째 단계에서는 기본적으로 서버측에서 Ajax 요청에 응답하는 것만 남았습니다. RendControl 메서드를 직접 보면 매우 간단합니다. GridView의 html을 출력하기 위해 호출됩니다. 

이제 Gridview의 ajax 정렬 및 페이징을 구현할 수 있습니다. 요약하면 아이디어는 실제로 매우 간단하지만 구현에 여전히 몇 가지 우회가 있기 때문입니다. GridView에 코드 형태의 수동 예제를 사용하고 싶었지만 템플릿 열을 추가했기 때문에 결국 작동하지 않았습니다. 템플릿 열에 입력 유형='Radio'를 추가합니다. 코딩할 때 ITemplate을 상속하지만 value='<%#Eval("operatePath") %>' 바인딩을 구현하는 방법을 모르겠습니다. 여기에 질문이 있습니다. 아시는 분은 알려주세요.

코드 복사 코드는 다음과 같습니다.

select

코드

코드 복사

코드는 다음과 같습니다.