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

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

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

• 백업< ;/span>


• 복원
  

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

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

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

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



코드



코드 복사

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

;ItemTemplate>
< ;input id="Radio1" type="radio" name="Restore" value=''/>선택

참고 이벤트에는 페이지가 로드될 때 서버를 요청하고 데이터를 반환하는 함수가 본문에 지정되어 있습니다. ajax 요청입니다

프로토타입은 다음과 같습니다.

코드

코드 복사


코드는 다음과 같습니다.

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 {
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='' 바인딩을 구현하는 방법을 모르겠습니다. 여기에 질문이 있습니다. 아시는 분은 알려주세요.

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

select

코드




코드 복사

코드는 다음과 같습니다.

정적 문자열 sortDirection = "ASC";
protected void Page_Load(객체 전송자, EventArgs e)
{
if (hasKeyName("page"))
{
if (!string.IsNullOrEmpty(Request.QueryString["page") ].ToString()))
{
this.gvRestore.PageIndex = int.Parse(Request.QueryString["page"].ToString());
응답데이터(this.gvRestore);
}
}
else
if (hasKeyName("sortEx"))
{
string sortEx = Request.QueryString["sortEx"].ToString();
string sortDir = Request.QueryString["sortDir"].ToString();
if (string.Compare(sortDir, sortDirection, true) == 0)
{
this.gvRestore.Sort(sortEx, SortDirection.Ascending);
sortDirection = "DSAC";
}
else
{
this.gvRestore.Sort(sortEx, SortDirection.Descending);
sortDirection = "ASC";
}
ResponseData(this.gvRestore);
}
}

private bool hasKeyName(string key)
{
string[]keys = Request.QueryString.AllKeys;
foreach(키의 문자열 str)
{
if(String.Compare(key, str, true) == 0)
return true;
}
false를 반환합니다.
}

private void ResponseData(GridView gv)
{
gv.DataSourceID = this.SqlDataSource1.ID;
System.Globalization.CultureInfo info = new System.Globalization.CultureInfo("ZH-CN", true);
System.IO.StringWriter sWriter = new System.IO.StringWriter(info);
System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(sWriter);
gv.DataBind();
if (gv != null)
{
gv.RenderControl(html);
}
Response.Write(html.InnerWriter);
Response.Write(GetNav(gv.PageCount));
Response.Flush();
응답.끝();
}

공개 문자열 GetNav(int pagesize)
{
string NavStr = @"";
for (int i = 0; i {
NavStr = NavStr @"";
}
NavStr = NavStr @"

" (i 1).ToString() @" | " @"

";
NavStr을 반환합니다.
}

public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(객체 전송자, EventArgs e)
{
this.gvRestore.Visible = false;
}