Question

使用情况我想在客户端处理排序和服务器端的分页，因为记录量太大我不想一次加载所有记录。目前ui显示所以下面的json包含它们以及元数据。 page - 当前页面，总计 - 总页数和记录 - 记录总数。

我检查了jqgrid我不明白为什么这不起作用。

当数据设置为 data：ret 时，ui不显示任何记录，而在localReader中，我将root指定为数据。

当我将数据指定为 data：ret.data 时，ui会显示记录，但是寻呼机（分页下一个上一个显示不起作用）。

我的json数据是这样的：

  var ret={"data":[{"id":"1","firstName":"John","lastName":"Doe"},     
           {"id":"2","firstName":"John","lastName":"Burns"},
           {"id":"3","firstName":"John","lastName":"Newman"},
           {"id":"4","firstName":"Mike","lastName":"Vargas"},               
           {"id":"5","firstName":"David","lastName":"Taylor"}],
   "page":1,"total":3,"records":24}

我的jquery如下：

       grid.jqGrid({
            datatype: "local",
            data: ret,
           // root:"oldcontacts",
            colNames:['ID', 'First Name','Last Name'],
            colModel:[
                {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                {name:'firstName',index:'firstName', width:90},
                {name:'lastName',index:'lastName', width:100}

            ],
            localReader : {
               root :"data",
               page: "page",
               total: "total",
               records :"records"
            },
            search:true,
            pager:'#pager',
            //jsonReader: {cell:""},
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            loadonce:false,
            sortname: 'id',
            sortorder: 'asc',
            viewrecords: true,
            sortable:false,
            cmTemplate: {sortable:true},//change to false if want
            multiselect:true,
            multiboxonly: false,
            height: "100%",
            caption: "Multiple search with local data",
            onSelectAll:function(aRowids,isSelected){
            // this is not used in this sample.. as I removed the check all button
              var i, count, id;
              for (i = 0, count = aRowids.length; i < count; i++) {
                   id = aRowids[i];
                   if(isSelected)
                     {mysel.pushObject(id);}
                     else
                    { mysel.removeObject(id);}

              }

              that.set('selection',mysel);
            },
            gridComplete: function(){

                          },              

            onSelectRow: function (id,isSelected,e) {
            //now lets tell jqgrid not to change to yellow on simple click
                Ember.$('#'+id).attr("aria-selected","false");// override default selection
                Ember.$('#'+id).removeClass("ui-state-highlight");// override default selection

                if (e.ctrlKey){
                if (isSelected){
                   mysel.pushObject(id);
                   Ember.$('#'+id).css('background','red');
                  }
                  else
                  {
                   Ember.$('#'+id).css('background','white');
                   mysel.removeObject(id);
                  }
                 that.set('selection',mysel);
                 }




        },

        });

Answer 1

可能the answer会解决您的问题吗？它使用datatype: "json"和loadonce: true选项。在制作单独的Ajax调用时，我似乎更好。可以通过修复page内的选项records，lastpage和loadComplete以及使用相应参数显式调用updatepager来解决寻呼机的主要问题。

jqgrid localReader无法正常工作

1 个答案: