EasyUi의 DataGrid는 서버 측 페이지 매김을 지원하지만 공식 정보는 적습니다. 다음은 DataGrid의 두 가지 서버 측면 페이지 화 메커니즘을 요약합니다. 하나는 Datagrid 기본 메커니즘 이고, 다른 하나는 AJAX를 사용하여 데이터를 얻고 상황에 따라 사용할 수있는 Datagrid를 채우는 것 입니다.
1 : Datagrid 기본 메커니즘을 사용하십시오
무대 뒤에서:
public jsonresult getquestionUnit () {// easyi datagrid 자체는 행을 전달하고 page int pagesize = convert.toint32 (요청 [ "행"]); int pagenum = convert.toint32 (요청 [ "page"]); var dal = 새로운 qsquestionUnitdal (); var QuestionUnits = dal.getList ( "", pagenum -1, pagesize); // 전경으로 반환 된 값에는 총 및 행이 포함되어야합니다. var var easyUipages = new Dictionary <String, Object> (); easyUipages.add ( "Total", QuestionUnits.firstorDefault () == null? 0 : QuestionUnits.FirstOrdEfault (). reqCount); easyUipages.add ( "행", 질문 단위); Return JSON (EasyUipages, JsonRequestBehavior.allowget); } frontend : (function () {(function () {( '#dgd'). DataGrid ({pagenumber : 1, // url : "@viewbag.domain/paper/getquestionUnit? arg1 = xxx", 열 : [{field : 'id', 'id', 'id', width : 100}, '이름', 제목 ', 100 :] Pagination : True, Rownumbers : True, PageList : [3, 6]}); var p = ( '#dgd'). datagrid ( 'getPager'); ( '##dgd'). DataGrid ( 'getPager'); (p) .Pagination ({pageText : 'Pagest of the 텍스트 상자 :' pages ', displaymsg :'Total {Total} data ',});( '#dgd'). datagrid 메소드를 배치해야합니다
$ (function () {});다른 JS 메소드를 통해 ( '#dgd')를 호출하려고하면 올바른 페이징 결과를 얻지 못합니다.
보시다시피, 위의 JS 코드의 라인 URL에 주석을 달았습니다. 다른 작업을 수행 할 필요가없고 페이지가로드 되 자마자 데이터를 쿼리 할 계획이라면 코드를 댓글을 달 수 없습니다. 그러나 종종 Arg1의 값과 같은 URL 매개 변수는 인터페이스에서 특정 작업을 수행 한 다음 JS 코드를 통해 얻어야합니다. 이 시점에서 URL은 다음과 같은 다른 장소에 댓글을 달아야합니다.
var step1ok = function () {$ ( '#dgd'). datagrid ({url : "@viewbag.domain/paper/getquestionUnit? arg1 = xxx",});};위의 코드에서는 인터페이스의 버튼이 클릭되고 step1oK 메소드가 호출된다고 가정 할 수 있습니다. 그러면 데이터가 URL에 쿼리되어 UI에 제시됩니다.
둘 : Ajax를 사용하여 데이터를 얻고 Datagrid를 채우십시오
더 큰 유연성을 추구하려면 DataGrid의 기본 메커니즘을 사용할 수 없습니다. 즉, 데이터를 얻기 위해 URL을 지정하지만 AJAX를 사용하여 데이터를 얻고 Datagrid를 채우십시오. 이런 식으로, 당신은 여전히 ( '#dgd')를 배치해야합니다.
$ (function () {});배경 코드는 변경되지 않지만 버튼을 클릭하고 Step1oK 메소드를 호출하면 다음이됩니다.
var step1ok = function () {.messager.progress (제목 :‘pleasewaiting ′, msg :‘loadingdata ... ′, 텍스트 :’); varp = .messager.progress (제목 :‘pleasewaiting ′, msg : ′ hoadingdata ... ′, text :’); varp = (#dggd '). $ (p) .pagination ({onselectpage : function (pagenumber, pagesize) {alert ( 'onselectpage pagenumb :' + pagenumber + ', pagesize :' + pagesize); getData (pagenumber, pagesize);}); getData (1,3);};첫 번째 호출이 호출되면 첫 페이지의 3 가지 데이터가 얻어집니다.
getData (1,3);
그런 다음 동시에 Pagination의 OnSelectPage 이벤트에 대한 시간 프로세서를 만들어 페이지가 다른 날이되면 다음을 수행 할 것임을 알 수 있습니다.
getData (pagenumber, pagesize);
또한, 우리는 Pagination을위한 Datagrid의 원래 메커니즘을 우회했기 때문에 우리 자신의 표지 $ .messager.progress를 채택한 다음 Ajax 성공의 표지를 발견했습니다.
getData 메소드는 다음과 같습니다.
var getData = function (page, rows) {.ajax ({type : "post", url : "@viewbag.domain/paper/getquestionUnit", data : "page =" + page + "& rows, error : function (xmlhttprequest, textstatus, errorthrown) {ajax (ajax) : ajax :" "@viewbag.domain/paper/getquestionUnit", data : "page =" + page + "& rows =" + rows, error : function (xmlhtttprequest, textstatus, errorthrown); //.Each(Data,Function(i,Item) ;/ aLert(// //) ;.Each(data,Fillection(I,Item) ;//messager.progress ( '#dgd');};위의 것은 편집자가 소개 한 EasyUi Pagination Paging의 두 가지 방법에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 더 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!