O DataGrid da Easyui suporta a paginação do lado do servidor, mas há menos informações oficiais. A seguir, resume dois mecanismos de paginação do servidor do DataGrid. Um é o mecanismo padrão do datagrid , e o outro é usar o AJAX para obter dados e preencher o Datagrid , que pode ser usado de acordo com a situação.
1: Use o mecanismo padrão do datagrid
Nos bastidores:
public jsonResult getQuestionUnit () {// easyi Datagrid em si passará linhas e página int PAGESIZE = convert.toint32 (request ["linhas"]); int pagenum = convert.toint32 (solicitação ["página"]); var dal = novo qsQuestionunitdal (); Var Questionunits = dal.getList ("", pagenum -1, PageSize); // O valor retornado ao primeiro plano deve incluir Total e linhas var easyuiPages = novo dicionário <string, object> (); easyuiPages.add ("total", questionunits.firstordefault () == null? 0: questionunits.firstordefault (). reqcount); easyuiPages.add ("linhas", questionunits); retornar json (easyuiPages, jsonRequestBehavior.allowget); } Frontend: (function () {(function () {('#dgd').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", columns: [[ { field: 'Id', title: 'id', width: 100 }, { field: 'Name', title: 'name', width: 100 }, ]], Paginação: Verdadeiro, ROWNumbers: Verdadeiro, Pagelista: [3, 6]}); var p = ('#dgd'). DataGrid ('getPager'); ('#dgd'). DataGrid ('getPager'); (P). {páginas} páginas ', displaymsg:' total {total} dados ',});Você precisa colocar o ('#dgd').
$ (function () {});Se você tentar chamar o método ('#dgd'). DataGrid através de outros métodos JS, não obterá o resultado de paginação correto.
Como você pode ver, o URL da linha no código JS acima foi comentado. Se não precisarmos fazer outras operações e planejamos consultar dados assim que a página for carregada, não podemos comentar o código. No entanto, muitas vezes, às vezes, os parâmetros da URL, como o valor do ARG1, precisam executar determinadas operações na interface e, em seguida, obtê -las através do código JS. Neste momento, o URL deve ser comentado e designado para outros lugares, como:
var step1ok = function () {$ ('#dgd'). datagrid ({url: "@viewbag.domain/paper/getQuestionunit? arg1 = xxx",});};No código acima, podemos assumir que um botão na interface é clicado e o método Step1ok é chamado, os dados serão consultados à URL e apresentados à interface do usuário.
Dois: use Ajax para obter dados e preencher DataGrid
Se quisermos buscar maior flexibilidade, não podemos usar o mecanismo padrão do DataGrid, ou seja, especificar o URL para obter dados, mas use o AJAX para obter dados e preencher o Datagrid. Dessa forma, você ainda precisa colocar o ('#dgd').
$ (function () {});O código de segundo plano permanece inalterado, mas clicando em um botão e chamando o método Step1ok se torna:
var step1ok = function () {.Messager.Progress (Título: 'PleaseWaiting', Msg: ′ LoadingData ... ′, texto: ′ processamento ..... ′); varp = .Messager.Progress (Title: 'Datrp'; $ (P) .Paginação ({OneSelectPage: function (PagenBumber, PageSize) {alert ('OnSelectPage pagenumber:' + pagenumber + ', Pagesize:' + Pagesize); getData (Pagenumber, Pagesize);}}); getdata (1,3);};Quando a primeira chamada for chamada, três dados na primeira página serão obtidos:
getData (1,3);
Então podemos ver que, ao mesmo tempo, também criamos um processador de tempo para o evento OnSelectPage de paginação, de modo que, quando a página for outro dia, iremos para:
getData (PagenBumber, PageSize);
Além disso, como ignoramos o mecanismo original do DataGrid para paginação, adotamos nossa própria capa $ .Messager.progress e depois descobrimos a capa no sucesso do Ajax.
O método getData é o seguinte:
var getData = function (página, linhas) {.ajax ({type: "post", url: "@viewbag.domain/paper/getQuestionunit", dados: "página =" + página + "& linhas =" + linhas, error: function (xmlHtPrEstersterst, a.11; url: "@viewbag.domain/paper/getQuestionunit", dados: "página =" + página + "& linhas =" + linhas, erro: function (xmlhttprequest, textStatus, ertrorthRown) {alert (textstatus); //.each(data,function(i,item)//alert(item) ;//);O exposto acima é a descrição completa dos dois métodos de paginação easyui Paginação apresentada a você pelo editor. Espero que seja útil para você. Se você quiser saber mais, preste atenção no site do Wulin.com!