JsGrid -在刷新时保持排序顺序

Question

我在jsGrid中有一个网格，每5秒刷新一次。虽然过滤很好，并且保持刷新状态，但是对表进行排序就不是了。一旦刷新命中表，就会自动返回其未排序、默认的顺序。

有没有办法让JsGrid保持它的排序在刷新？

这是我的密码：

$("#jsGrid").jsGrid({
  height: "300px",
  width: "100%",
  filtering: true,
  sorting: true,
  paging: true,
  autoload: true,
  pageSize: 10,

  controller: {
    loadData: function(filter) {
      var data = $.Deferred();

      $.ajax({
        type: "GET",
        url: BASE_URL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
           //SUCCESS MESSAGE
        },
        error: function(textStatus, errorThrown) {
          //ERROR MESSAGE
        }
      }).then(function(result) {
        result = $.grep(result,
          function(item) {
            return //FILTERED RESULTS;
          });

        data.resolve(result);
      });

      return data.promise();
    }
  },

  //SAMPLE FIELDS
  fields: [{
      name: "Name",
      type: "text",
      width: 150
    },
    {
      name: "Age",
      type: "number",
      width: 50
    },
    {
      name: "Address",
      type: "text",
      width: 200
    },
    {
      name: "Country",
      type: "select",
    }
  ]
});

setInterval(function() {
  //Refreshes grid only after 5 seconds
  $("#jsGrid").jsGrid("loadData");
}, 5000);

Answer 1

找到答案了！昨天在GitHub上发布了一条帖子，是为了寻找和我一样的人：

来源

答案是在我的setInterval函数中调用.done函数并在其中调用jsGrid分类器。：

setInterval(function() {
  //Refreshes grid only after 5 seconds

     $('#jsGrid').jsGrid("loadData").done(function () {
            var sorting = $("#jsGrid").jsGrid("getSorting");
            $("#jsGrid").jsGrid("sort", sorting);

}, 5000);

Answer 2

Below logic of sorting on the basis of number

    $("#Grid2").jsGrid({
        height: "auto",
        width: "100%",
    
        filtering: false,
        editing: false,
        sorting: true,
        paging: true,
        autoload: true,
        inserting: false,
        pageSize: 15,
        pageButtonCount: 5,
    
        controller: {
            loadData: function(filter) {
                var d = $.Deferred();
                $.ajax({
                    cache: false,
                    type: 'GET',
                    url: "http://" + servername + ":" + portnumber + "/api,
                    data: filter,
                    dataType: "json",
                    success: function(data) {
                        filteredData = $.grep(data, function(item) {
                            //filtering logic
                            ;
                        });
                        d.resolve(filteredData);
                        testdata = JSON.stringify(data);
                        $("#Grid2").jsGrid("sort", 1);
                        HistoricData = data;
                    },
                    error: function(e) {
                        console.log(e);
                        console.log(e.responseText);
                        var errorMsg = e.responseText;
                        var msg = errorMsg + " for this particular combination";
                        showError(msg);
                        $("#displayingHistoryValues").hide();
                        $("#ExportGrid2").hide();
                        $("#Grid2").hide();
                        d.resolve();
                    }
                });
    
                return d.promise();
            }
        },
        fields: [{
            title: "Value",
            name: "MeasureValue",
            type: "number",
            width: "5%",
            css: "custom-field",
            sorting: true,
            itemTemplate: function(value, item) {
    
                if (item.MeasureValue != null && item.MeasureValue != '' && item.MeasureValue.trim().length > 0) {
                    var mesval = FormatValeur(item.MeasureUnit, item.MeasureValue);
                    return "<div>" + mesval + "</div>";
                }
    
            }
        }, {
            type: "control",
            editButton: false,
            deleteButton: false,
            width: "5%"
        }]
    })
    

Another way to sort, get the filteredData or loaded  data 
and call onRefresing of JSGrid .

Way to sort JS grid on column after grid load :

onRefreshing: function (args) {
            fundCodeList = [];
            jsonNumLst = [];
            jsonNANLst = [];
            if(this._visibleFieldIndex(this._sortField) == -1 
                    || this._visibleFieldIndex(this._sortField)==1){

                $.each(filteredData, function(inx, obj) {
                    if($.isNumeric(obj.fundCode)){
                        jsonNumLst.push(obj);
                    }else{
                        jsonNANLst.push(obj);
                    }

                });

                if(this._sortOrder == undefined || this._sortOrder == 'asc'){
                    jsonNumLst.sort(sortByNumFCAsc);
                    jsonNANLst.sort(sortByNANFCAsc);
                }else if(this._sortOrder == 'desc'){
                    jsonNANLst.sort(sortByNANFCDesc);
                    jsonNumLst.sort(sortByNumFCDesc);                      
                }

                if(jsonNumLst.length>0 || jsonNANLst.length>0){
                    filteredData = [];
                    if(this._sortOrder == undefined || this._sortOrder == 'asc'){
                        $.each(jsonNumLst, function(inx, obj) {
                            filteredData.push(obj);
                        });
                        if(filteredData.length == jsonNumLst.length){
                            $.each(jsonNANLst, function(inx, obj) {
                                filteredData.push(obj);
                            });
                        }
                    }else if(this._sortOrder == 'desc'){
                        $.each(jsonNANLst, function(inx, obj) {
                            filteredData.push(obj);
                        });

                        if(filteredData.length == jsonNANLst.length){
                            $.each(jsonNumLst, function(inx, obj) {
                                filteredData.push(obj);
                            });
                        }
                    }
                }

                if((filteredData.length>0) && filteredData.length==(jsonNumLst.length+jsonNANLst.length)){
                    $("#measureImportGrid3").data("JSGrid").data = filteredData;
                    //isSortGrid = false;
                    //saveEffectControlData = $('#saveEffectiveControlGrid').jsGrid('option', 'data');
                }
            }


//Ascending order numeric
function sortByNumFCAsc(x,y) {
    return x.fundCode - y.fundCode; 
}

//Ascending order nonnumeric
function sortByNANFCAsc(x,y) {
    return ((x.fundCode == y.fundCode) ? 0 : ((x.fundCode > y.fundCode) ? 1 : -1 ));
}

//Descending order numeric
function sortByNANFCDesc(x,y) {
    return ((x.fundCode == y.fundCode) ? 0 : ((y.fundCode > x.fundCode) ? 1 : -1 ));
}

//Descending order non-numeric
function sortByNumFCDesc(x,y) {
    return y.fundCode - x.fundCode; 
}

        }