Hãy nhớ (tồn tại) bộ lọc, thứ tự sắp xếp và trang hiện tại của jqGrid

Question

Người dùng ứng dụng của tôi đã hỏi liệu có thể cho các trang chứa jqGrid để nhớ bộ lọc, thứ tự sắp xếp và trang hiện tại của lưới (vì khi họ nhấp vào mục lưới để thực hiện một nhiệm vụ và sau đó quay trở lại nó mà họ muốn nó được "khi họ rời khỏi nó")

Cookies dường như là con đường phía trước, nhưng làm thế nào để có được trang để tải các số và đặt chúng trong lưới trước nó làm cho yêu cầu dữ liệu đầu tiên của nó vượt xa tôi một chút ở giai đoạn này.

Có ai có kinh nghiệm với loại điều này với jqGrid không? Cảm ơn!

Answer 1

vấn đề giải quyết

tôi cuối cùng đã kết thúc sử dụng cookie trong javascript để lưu trữ các cột sắp xếp, sắp xếp theo thứ tự, số trang, hàng lưới và các chi tiết bộ lọc của lưới điện (sử dụng JSON/Javascript cookies - đối tượng prefs)

Save Preferences - Được gọi là từ $(window).unload(function(){ ... });

var filters = { 
    fromDate: $('#fromDateFilter').val(), 
    toDate: $('#toDateFilter').val(), 
    customer: $('#customerFilter').val() 
}; 

prefs.data = { 
    filter: filters, 
    scol: $('#list').jqGrid('getGridParam', 'sortname'), 
    sord: $('#list').jqGrid('getGridParam', 'sortorder'), 
    page: $('#list').jqGrid('getGridParam', 'page'), 
    rows: $('#list').jqGrid('getGridParam', 'rowNum') 
}; 

prefs.save(); 

tải Preferences - Được gọi là từ $(document).ready(function(){ ... });

var gridprefs = prefs.load(); 

$('#fromDateFilter').val(gridprefs.filter.fromDate); 
$('#toDateFilter').val(gridprefs.filter.toDate); 
$('#customerFilter').val(gridprefs.filter.customer); 

$('#list').jqGrid('setGridParam', { 
    sortname: gridprefs.scol, 
    sortorder: gridprefs.sord, 
    page: gridprefs.page, 
    rowNum: gridprefs.rows 
}); 

// filterGrid method loads the jqGrid postdata with search criteria and re-requests its data 
filterGrid(); 

jqGrid tham khảo: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

Thể theo yêu cầu - THE FILTERGRID MÃ

function filterGrid() { 
     var fields = ""; 
     var dateFrom = $('#dateFrom').val(); 
     var dateTo = $('#dateTo').val(); 

     if (dateFrom != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "ge", dateFrom); 
     if (dateTo != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "le", dateTo); 

     var filters = '"{\"groupOp\":\"AND\",\"rules\":[' + fields + ']}"'; 

     if (fields.length == 0) { 
      $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid"); 
     } else { 
      $("#list").jqGrid('setGridParam', { search: true, postData: { "filters": filters} }).trigger("reloadGrid"); 
     } 

    } 

    function createField(name, op, data) { 
     var field = '{\"field\":\"' + name + '\",\"op\":\"' + op + '\",\"data\":\"' + data + '\"}'; 
     return field; 
    } 

Answer 2

Nếu người dùng đăng nhập, bạn có thể yêu cầu AJAX quay lại máy chủ khi các thông số này thay đổi. Sau đó bạn có thể lưu các thiết lập, hoặc vào cơ sở dữ liệu (để làm cho chúng vĩnh viễn), để phiên (để tạm thời chúng), hoặc cả hai (vì lý do hiệu suất).

Trong mọi trường hợp, với thông số được lưu trữ phía máy chủ, bạn chỉ có thể gửi chúng đến trang khi được yêu cầu.

Answer 3

Tôi là một phần công việc mà bạn cần bạn có thể thực hiện đối với jqGridExport và jqGridImport (xem http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods), nhưng dường như với tôi bạn muốn tồn tại nhiều hơn trong hộp trong jqGrid. Một số tính năng bổ sung mà bạn sẽ phải tự thực hiện.

Answer 4

Tôi đã làm việc trên cùng một điều nhưng cũng cần thiết để lấy và lưu thứ tự cột. Nó không đơn giản như jqGrid.remapColumns là liên quan đến những gì bao giờ các stat hiện tại của lưới điện là ...

Chỉ trong trường hợp có ai tìm thấy này hữu ích (và tôi rất muốn biết nếu có đã là một cái gì đó để làm điều này mà tôi bị mất):

(function($){ 

$.jgrid.extend({ 

    getColumnOrder : function() 
    { 
     var $grid = $(this); 

     var colModel = $grid[0].p.colModel; 

     var names = []; 
     $.each(colModel, function(i,n){ 
      var name = this.name; 
      if (name != "" && name != 'subgrid') 
       names[names.length] = name; 
     }); 

     return names; 
     //return JSON.stringify(names); 
     //$('#dbgout').val(j); 

    }, 


    setColumnOrder : function (new_order) 
    { 
     var $grid = $(this); 

     //var new_order = JSON.parse($('#dbgout').val()); 
     //new_order = ['a', 'c', 'd', 'b', 'e']; 
     //    0 1 2 3 4 

     var new_order_index = {}; 

     $.each(new_order, function(i,n){ 
      new_order_index[n] = i; 
     }); 

     //new_order = ['a', 'c', 'd', 'b', 'e']; 
     //    0 1 2 3 4 
     // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4 

     var colModel = $grid[0].p.colModel; 

     cur = []; 
     $.each(colModel, function(i,n){ 
      var name = this.name; 
      if (name != "" && name != 'subgrid') 
       cur[cur.length] = name; 
     }); 
     //cur = ['a', 'b', 'c', 'd', 'e']; 
     //  0 1 2 3 4 

     cur_index = {}; 
     $.each(cur, function(i,n){ 
      cur_index[n] = i; 
     }); 


     // remapColumns: The indexes of the permutation array are the current order, the values are the new order. 

     // new_order  0=>a 1=>c 2=>d 3=>b 4=>e 
     // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4 

     // cur    0=>a 1=>b 2=>c 3=>d 4=>e 
     // cur_index  a=>0 b=>1 c=>2 d=>3 e=>4 

     // permutati  0 2 3 1 4 
     //     a c d b e 
     var perm = []; 
     $.each(cur, function(i, name){ // 2=>b 

      new_item = new_order[i];  // c goes here 
      new_item_index = cur_index[new_item]; 

      perm[i] = new_item_index; 
     }); 

     if (colModel[0].name == 'subgrid' || colModel[0].name == '') 
     { 
      perm.splice(0, 0, 0); 
      $.each(perm, function(i,n){ 
       ++perm[i] 
      }); 
      perm[0] = 0; 
     } 

     $grid.jqGrid("remapColumns", perm, true, false); 

    }, 



}); 
})(jQuery); 

Answer 5

Hi Bạn có thể thực hiện dễ dàng hơn này (không cần sự phụ thuộc nào khác) trong Pure Js không phải là một plugin jQuery

var prefs = { 

    data: {}, 

    load: function() { 
     var the_cookie = document.cookie.split(';'); 
     if (the_cookie[0]) { 
      this.data = JSON.parse(unescape(the_cookie[0])); 
     } 
     return this.data; 
    }, 

    save: function (expires, path) { 
     var d = expires || new Date(2020, 02, 02); 
     var p = path || '/'; 
     document.cookie = escape(JSON.stringify(this.data)) 
          + ';path=' + p 
          + ';expires=' + d.toUTCString(); 
    } 

} 

Làm thế nào để sử dụng?

to_save = { "size": 40, "color": "green", "products":"jeans"};//and any other data/filters you wanna store here 

prefs.data = to_save; 
prefs.save();//now our json object is saved on the client document cookie 


// delete 
var date_in_the_past = new Date(2000,02,02); 
prefs.save(date_in_the_past); 


// read 
var what = prefs.load(); 
// load populates prefs.data and also returns 
alert(what.color); 
// or ... 
alert(prefs.data.color); 

PS: Tất cả các trình duyệt hiện đại đều hỗ trợ mã hóa/giải mã JSON gốc (Internet Explorer 8+, Firefox 3.1+, Safari 4+ và Chrome 3+). Về cơ bản, JSON.parse (str) read more. PSS: Object tôi đã từng có chỉ là tối ưu hóa và loại bỏ sự phụ thuộc của .toJSONstring ... source

Hãy nhìn vào các plugin jQuery

SỬ DỤNG này không sử dụng các funcation tùy chỉnh trên https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies