jqgrid сортировка на стороне клиента с подкачкой на стороне сервера - данные исчезают - PullRequest
Новая
       312

jqgrid сортировка на стороне клиента с подкачкой на стороне сервера - данные исчезают

5 голосов
/ 27 января 2012

в документации jqgrid говорится, что приведенный ниже код должен разрешать локальную сортировку с подкачкой на стороне сервера; данные сетки исчезают при пейджинге; этот вопрос уже задавался без четкого ответа - предложения по использованию loadonce: true означает, что подкачка отключена - мне нужна подкачка

ИЗМЕНЕНО ПОЗЖЕ, ЧТОБЫ ПОКАЗАТЬ ПОЛНУЮ HTML-страницу и ответ json (Сейчас я запускаю это из бэкэнда php / mysql).

Моя полная HTML-страница 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQGrid Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../dojoproject/jquery-ui-1.8.16.custom/css/start/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css">
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 90%;
}
</style>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jqGrid-4.1.2/js/JSON-js/json2.js" ></script>

<script>

 $(function() {
$('#table').jqGrid({
   jsonReader : {
    repeatitems: false,
    cell:"",
    id:"0"
   },   
    height:'auto',
    url:'/jqgrid/orderdetails.php',
    postData:{test:'value'},
    datatype: 'json',
    mtype: 'POST',
    rownumbers:true,
    rownumWidth:35,
    colNames:['OrderID','UnitPrice','Quantity','Discount','ProductName'],
    colModel :[ 
      {name:'OrderID', index:'OrderID',search:false,sorttype:'integer'}, 
      {name:'UnitPrice', index:'UnitPrice',editable:true,sorttype:'float'}, 
      {name:'Quantity', index:'Quantity',sorttype:'int'}, 
      {name:'Discount', index:'Discount',sorttype:'int'},
      {name:'ProductName', index:'ProductName'}   
    ],
    sortname: 'OrderID ',
    rowNum:5,
    sortorder: 'asc',
    width:'100%',
    height:'200',
    viewrecords: true,
    gridview: true,
    caption: 'NorthWind Orders',
    scrollOffset:18,
    multiselect:true,
    pager:'pager'
    ,cellEdit:true,
    cellsubmit:'clientArray',
    afterSaveCell:function(rowid, cellname, value, iRow, iCol){
    },
       onPaging: function() {
        $("#table").setGridParam({datatype:'json'}).trigger("reloadGrid");
        },               
    loadComplete: function (data) {  
        $("#table").setGridParam({datatype:'local'}).trigger("reloadGrid");
        } 
    });
 });

</script>

</head>
<body>

<table id='table'></table>
<div id='pager'></div>
</body>
</html>

ответ на 1-ю нагрузку - 

{"page":"1","total":431,"records":2155,"rows":[{"OrderID":"1024811","UnitPrice":"14.0000","Quantity":"12","Discount":"0"},{"OrderID":"1024842","UnitPrice":"9.8000","Quantity":"10","Discount":"0"},{"OrderID":"1024872","UnitPrice":"34.8000","Quantity":"5","Discount":"0"},{"OrderID":"1024914","UnitPrice":"18.6000","Quantity":"9","Discount":"0"},{"OrderID":"1024951","UnitPrice":"42.4000","Quantity":"40","Discount":"0"}]}

ответ со страницы 2: 

{"page":"2","total":431,"records":2155,"rows":[{"OrderID":"1025041","UnitPrice":"7.7000","Quantity":"10","Discount":"0"},{"OrderID":"1025051","UnitPrice":"42.4000","Quantity":"35","Discount":"0.15"},{"OrderID":"1025065","UnitPrice":"16.8000","Quantity":"15","Discount":"0.15"},{"OrderID":"1025122","UnitPrice":"16.8000","Quantity":"6","Discount":"0.05"},{"OrderID":"1025157","UnitPrice":"15.6000","Quantity":"15","Discount":"0.05"}]}

Ответы [ 2 ]

7 голосов
/ 28 января 2012

Прежде всего я хочу повторить, что я не рекомендую вам использовать локальную сортировку и подкачку на стороне сервера. Я считаю, что пользователь может неправильно интерпретировать результат сортировки.

Тем не менее, если ваш клиент согласен с ограничением, предусматривающим сочетание локальной сортировки и подкачки на стороне сервера, и если вам действительно необходимо реализовать это, я могу предложить вам следующее решение: 

onPaging: function() {
    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
},
loadComplete: function (data) {
    var $this = $(this);
    if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
        // because one use repeatitems: false option and uses no
        // jsonmap in the colModel the setting of data parameter
        // is very easy. We can set data parameter to data.rows:
        $this.jqGrid('setGridParam', {
            datatype: 'local',
            data: data.rows,
            pageServer: data.page,
            recordsServer: data.records,
            lastpageServer: data.total
        });

        // because we changed the value of the data parameter
        // we need update internal _index parameter:
        this.refreshIndex();

        if ($this.jqGrid('getGridParam', 'sortname') !== '') {
            // we need reload grid only if we use sortname parameter,
            // but the server return unsorted data
            $this.triggerHandler('reloadGrid');
        }
    } else {
        $this.jqGrid('setGridParam', {
            page: $this.jqGrid('getGridParam', 'pageServer'),
            records: $this.jqGrid('getGridParam', 'recordsServer'),
            lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
        });
        this.updatepager(false, true);
    }
}

Если вы не используете repeatitems: false, то код, заполняющий параметр data в jqGrid, будет немного длиннее, но он будет работать.

0 голосов
/ 21 ноября 2012

Приведенное выше решение отлично работает, за исключением случая, когда, если мы находимся на последней странице сетки, скажем, у меня есть 3 строки, отображаемые на последней странице, хотя страница может вместить 5 строк.

Теперь, если я попытаюсь выполнить сортировку на стороне клиента, последняя страница будет заполнена 2 дополнительными строками, а всего будет отсортировано 5 строк. Я бы сказал, может быть, последние извлеченные записи хранятся в буфере, так что это происходит. Как исправить это, onPagination, очистите сетку перед созданием сетки как "json", например

clickOnPagination = function() { $(this).jqGrid("clearGridData"); $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); }

и в комментарии исходного кода строки
$t.p.records = 0;$t.p.page=1;$t.p.lastpage=0; в clearGridData функционируют так, чтобы следующая нумерация страниц работала правильно.

...