loadonce：true导致jqGrid的分页问题

时间：2013-05-10 11:50:15

标签： jquery-ui jqgrid

我有一个如下所述的jqGrid：

UsersList.aspx 

<div id="users" class="grid-right">
    <h3>Users</h3>
    <table id="client-group-users-list"></table>
    <div id="client-group-users-list-pager"></div>
</div>

userlistgroup.js 

function createUsersGrid(getUsersForClientGroupUrl) {
    $('#client-group-users-list').jqGrid({
        height: "auto",
        width: "590",
        url: getUsersForClientGroupUrl + "?random=" + Math.random(),
        rowNum: 10,
        mtype: 'POST',
        viewrecords: true,
        postData: { clientGroup: getClientGroupId(), active: true },
        datatype: 'json',
        colNames: ['ClientGroupID', 'Login', 'Role'],
        //pgbuttons: false,
        //pgtext: null,
        //viewrecords: false,
        gridview: true,
        colModel: [
            { name: 'ClientGroupID', index: 'ClientGroupID', hidden: true },
            { name: 'Login', index: 'Login', search: false, width: 130, sorttype: "string" },
            { name: 'Role', index: 'Role', search: false, width: 100 }
        ],
        caption: "Users for client group: " + getClientGroupName(),
        pager: '#client-group-users-list-pager',
        ondblClickRow: function (userId) {
            editUser(userId);
        },
        sortname: 'Login',
        sortorder: 'asc',
        loadui: 'enable',
        loadError: function (xhr, status) {
            location.reload();
        }           
    })
    .jqGrid('navGrid', '#client-group-users-list-pager',
        { add: false, del: false, edit: false, search: false, view: false })
}

enter image description here

Login列上的排序无效。但是，如果我放loadonce:true然后它开始工作但是没有反映记录总数，并且分页功能停止工作。

任何人都可以帮助我处理与datatype: 'json'一起处理的排序和分页。

谢谢＆amp;问候， Santosh Kumar Patro

3 个答案:

答案 0 :(得分：5)

您似乎对jqGrid与服务器的交互方式有典型的理解问题。

如果您使用datatype: 'json' 而没有loadonce: true选项，则服务器负责排序，分页和可选地搜索/过滤数据。在对服务器的每个请求包含重要输入参数的情况下，默认值为：page，rows，sidx和sord。还有其他参数_search，nd和其他参数，但在您的情况下并不那么重要。所以在第一次加载网格内容时，jqGrid会发布到网址getUsersForClientGroupUrl这样的内容

page=1&rows=10&sidx=Login&sord=asc

rows，sidx和sord参数的值对应您使用的rowNum，sortname和sortorder选项的值。服务器应提供请求的数据页（第1页数据，页面大小为10行）。可以使用网格的prmNames选项重命名page，rows，sidx和sord参数。

了解当用户点击“下一页”/“上一页”按钮或者用户点击列标题更改排序时，jqGrid会向服务器发出新请求并且服务器应根据输入参数提供数据页面。

另一方面如果您使用loadonce: true选项，则服务器应返回所有数据（所有页面）。加载的数据应该只是排序与sidx和sord选项相对应。加载数据 jqGrid后，将datatype从"json"更改为"local" 。所有下一个排序，分页和过滤（请参阅filterToolbar方法）或排序（请参阅here和here）将由jqGrid在内部（在客户端）实现。

如果您需要从服务器重新加载数据，则应将datatype的值重置为"json"（请参阅the answer）。通常，在navGrid的{​​{3}}回调中执行此操作。因此，如果用户点击导航栏的“刷新”按钮，网格将从服务器重新加载。

我认为您刚刚没有更改服务器代码，并且当您使用loadonce: true选项时，服务器仍会返回一页数据。这是不对的。不要忘记在服务器上对初始数据进行排序。

您发布的代码中的一些常见问题。我建议您从网址中删除"?random=" + Math.random()部分，因为它没有任何意义。这种方法通常用于防止在使用mtype: "GET"（HTTP GET动词）的情况下缓存服务器响应。您使用mtype: 'POST'。所以响应根本不会改变。此外，如果您使用mtype: "GET"，则jqGrid会附加已使用nd参数的URL，该参数与您的random参数具有相同的作用。最好的方法是将服务器响应的Cache-Control HTTP标头设置为private, max-age=0，并使用nd jqGrid选项删除prmNames: { nd: null }。有关缓存的详情，请参阅beforeRefresh和the answer。

另一个问题：您应该了解，您只能致电createUsersGrid功能一次。之后，<table>与id="client-group-users-list"将被修改。 createUsersGrid函数的下一个调用将不会执行任何操作。如果只能调用一次，那么应该考虑是否需要在函数中放置JavaScript片段。或者，可以使用GridUnload方法在下次使用它之前销毁所有现有的jqGrid结构。

如果您希望将发送到服务器的clientGroup: getClientGroupId()参数

答案 1 :(得分：0)

我有类似的问题。对我来说这是服务器代码。我只回到第一页。

rows = model.Select(x => new { x.POID,  
                                         x.HA1.HA1,   
                                         x.PONumber,
                                           status = x.POStatu.Name,
                                         vendor=x.Vendor.Name,  
                                         x.POCreatedDate,
                                         x.POSenttoVendor 
                                       }  
                             ).ToArray().ToPagedList(pageIndex,pageSize).

所以，我删除了     .ToPagedList（PageIndex的，pageSize的）

答案 2 :(得分：0)

只是为了完成一个例子。

大家好，我也遇到了同样的问题，我无法看到这方面的任何例子。所以，我解决了我的问题，我会举个例子。

我有一个名为＆＃34; estado＆＃34;（id，nome，sigla，codigo_ibge）的表。我实施了j​​qGrid Guriddo Responsive以进行所有CRUD操作。

<强> HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../resources/jqGrid/js/i18n/grid.locale-pt-br.js"></script>

    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../resources/jqGrid/js/jquery.jqGrid.min.js"></script>

    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/jqGrid/css/ui.jqgrid-bootstrap.css" />

    <style type="text/css">  
        .ui-jqgrid .ui-jqgrid-bdiv {
              position: relative; 
              margin: 0em; 
              padding:0; 
              /*overflow: auto;*/ 
              overflow-x:hidden; 
              overflow-y:auto; 
              text-align:left;
          } 
         .customelement .radio-inline input {
             margin-left: -40px;
             padding-right: 10px; 
         }
         .typeahead {
             z-index: 10051;
         }
    </style>

    <script type="text/javascript">
        $.jgrid.defaults.width = 850;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';
        $.jgrid.styleUI.Bootstrap.base.rowTable = "table table-bordered table-striped";
        $(document).ready(function () {

            $("#jqGrid").jqGrid({
                url: '../ctrl_gerenciamento/gerenciaEstadoJqGridLoad.php',
                editurl: '../ctrl_gerenciamento/gerenciaEstadoJqGridEdit.php',
                datatype: "json",
                mtype: "GET",
                page: 1,
                jsonReader: {
                    page: "obj.currpage",
                    total: "obj.totalpages",
                    records: "obj.totalrecords",
                    repeatitems: false,
                    root: "obj.rows",
                    cell: "cell",
                    id: "0"
                },
                colModel: [
                    {
                        label: 'ID',
                        name: 'id',
                        width: 20,
                        key: true,
                        editable: false
                    },
                    {
                        label: 'Nome',
                        name: 'nome',
                        width: 145,
                        editable: true,
                        editrules : { required: true },
                        search: true,
                        stype: 'text'
                    },
                    {
                        label: 'Sigla',
                        name: 'sigla',
                        width: 35,
                        editable: true,
                        editrules : { required: true },
                        search: true,
                        stype: 'text'
                    },
                    {
                        label: 'Código IBGE',
                        name: 'codigo_ibge',
                        width: 60,
                        editable: true,
                        editrules : { required: true },
                        search: true,
                        stype: 'text'
                    }
                ],
                sortname: 'nome',
                sortorder : 'asc',
                loadonce: false,
                viewrecords: true,
                width: 785,
                height: 370,
                rowNum: 10,
                pager: "#jqGridPager"
            });

            $('#jqGrid').jqGrid('filterToolbar', {defaultSearch:'cn'});

            $('#jqGrid').jqGrid('navGrid',"#jqGridPager", 
                { 
                    edit: true, 
                    add: true, 
                    del: true, 
                    search: false, 
                    refresh: false, 
                    view: false, 
                    position: "left"
                },
                {
                    editCaption: "Editar",
                    width: "500",
                    height: "auto",
                    top: "120",
                    left: "500",
                    recreateForm: true,
                    closeAfterEdit: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                {
                    editCaption: "Adicionar",
                    width: "500",
                    height: "auto",
                    top: "120",
                    left: "500",
                    closeAfterAdd: true,
                    recreateForm: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                {
                    editCaption: "Apagar",
                    width: "500",
                    height: "auto",
                    top: "120",
                    left: "500",
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                });
        });
    </script>
</head>
<body>
    <br />
    <h4> Gerenciamento de Estados </h4>
    <br />
    <div style="margin-left:10px">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
</body>
</html>

来自服务器的LOAD控制器： 

<?php
    header('Content-Type: application/json; charset=utf-8');
    include_once '../../classes/start.php';
    $json = new JSON();

    $page = $_GET['page'];
    $limit = $_GET['rows'];
    $sidx = $_GET['sidx'];
    $sord = $_GET['sord'];

    $_search = $_GET['_search'];
    $filtro = array();
    $filtro["nome"]         = isset($_GET["nome"]) ? $_GET["nome"] : null;
    $filtro["sigla"]        = isset($_GET["sigla"]) ? $_GET["sigla"] : null;
    $filtro["id"]           = isset($_GET["id"]) ? $_GET["id"] : null;
    $filtro["codigo_ibge"]  = isset($_GET["codigo_ibge"]) ? $_GET["codigo_ibge"] : null;

    try
    {
        if (!$sidx) $sidx = 1;

        $result = Estado::contarTodosRegistros();
        $qtdRegistros = $result[0]['count'];

        if ($qtdRegistros > 0 && $limit > 0) {
            $total_pages = ceil($qtdRegistros / $limit);
        } else {
            $total_pages = 0;
        }

        if ($page > $total_pages) $page = $total_pages;

        $start = $limit*$page - $limit;
        if ($start < 0) $start = 0;

        $result = null;
        $saida = null;

        if ($_search) {
            $result = Estado::consultarTodosRegistros($sidx, $sord, $start, $limit, $filtro);
        }else{
            $result = Estado::consultarTodosRegistros($sidx, $sord, $start, $limit);
        }
        $saida["rows"] = $result;
        $saida["totalrecords"] = "$qtdRegistros";
        $saida["currpage"] = "$page";
        $saida["totalpages"] = "$total_pages";

        $json->setStatus("ok");
        $json->setObjeto( $saida );
    }
    catch (Exception $ex)
    {
        $json->setStatus("erro");
        $json->setMensagem($ex->getMessage());
    }

    $json->imprimirJSON();

适用于搜索的方法： 

public static function consultarTodosRegistros($sidx, $sord, $start, $limit, $filtro='')
    {
        $db = Database::conexao();
        $temp = 'where 1=1';
        if (!empty($filtro)){
            if (!empty($filtro["nome"])) {
                $temp .= " and estado.nome ilike '%". $filtro["nome"]."%'";
            }
            if (!empty($filtro["sigla"])) {
                $temp .= " and estado.sigla ilike '%". $filtro["sigla"]."%'";
            }
            if (!empty($filtro["id"])) {
                $temp .= " and estado.id = ". $filtro["id"];
            }
            if (!empty($filtro["codigo_ibge"])) {
                $temp .= " and estado.codigo_ibge ilike '%". $filtro["codigo_ibge"]."%'";
            }
        }
        $sql = "select *
                from updrs.estado
                $temp
                order by $sidx $sord
                limit $limit offset $start";

        $result = $db->query($sql);
        $result = $result->fetchAll(PDO::FETCH_ASSOC);
        return $result;
    }

EDIT / ADD / DEL运算符 

<?php
include_once '../../classes/start.php';

$operacao = $_POST["oper"];

$id = !empty($_POST['id']) ? $_POST['id'] : null;
$codigoIbge = isset($_POST["codigo_ibge"]) ? $_POST["codigo_ibge"] : null;
$sigla = isset($_POST["sigla"]) ? $_POST["sigla"] : null;
$nome = isset($_POST["nome"]) ? $_POST["nome"] : null;

if ($operacao == 'add')
{
    try
    {
        $idResult = Estado::insert($codigoIbge, $sigla, $nome);
        echo "registro atualizado: " . $idResult;
    }
    catch (Exception $e)
    {
        echo $e->getMessage();
    }
}

if ($operacao == 'edit')
{
    try
    {
        $count = Estado::update($codigoIbge, $sigla, $nome, $id);
        echo $count . " registro atualizado.";
    }
    catch (Exception $e)
    {
        echo "Erro: Dados informados são inválidos";
    }

}

if ($operacao == 'del')
{
    try
    {
        $count = Estado::delete($id);
        echo $count . " registro apagado.";
    }
    catch (Exception $e)
    {
        echo "Erro: Remoção do registro não permitida";
    }
}

我希望帮助一个真实的例子。享受。

相关问题
最新问题