jqGrid Trạng thái nhóm khi lọc

Question

Tôi đang sử dụng bộ lọc cho lưới jqGrid của mình và dữ liệu nằm trong nhóm, mặc định trạng thái thu gọn đầu tiên. Nếu người dùng mở một nhóm hoặc 2 (mở rộng nhóm), thì bộ lọc, lưới sẽ tải lại dữ liệu, lọc nó một cách chính xác, nhưng sau đó tôi mất trạng thái mở rộng của các nhóm mà người dùng đã mở. Có cách nào để không có nó, chuyển về trạng thái mặc định bị sập khi thực hiện một bộ lọc?

Cảm ơn trước.

Answer 1

Tôi thấy câu hỏi của bạn thú vị. Vì vậy, +1 từ tôi. Tôi đã tạo một bản trình diễn thể hiện cách thực hiện các yêu cầu của bạn.

Ý tưởng chính của việc triển khai cũng giống như trong the answer. Tôi đề nghị chỉ giữ trạng thái của các nhóm mở rộng trong một mảng expandedGroups. Tôi sử dụng gọi lại onClickGroup trong jqGrid 4.0.0 (xem here). Bên trong của loadComplete gọi lại Tôi cố gắng mở rộng tất cả các mục từ mảng expandedGroups.

Lợi thế của việc triển khai là trạng thái mở rộng không biến mất trong khi phân trang, sắp xếp và lọc.

Bản trình diễn bạn có thể thấy here. Dưới đây trong các mã từ bản demo:

var $grid = $("#list"), expandedGroups = []; 

$grid.jqGrid({ 
    // ... some jqGrid parameters 
    grouping: true, 
    groupingView: { 
     groupField: ['name'], 
     groupCollapse: true, 
     groupDataSorted: true 
    }, 
    onClickGroup: function (hid, collapsed) { 
     var idPrefix = this.id + "ghead_", id, groupItem, i; 
     if (hid.length > idPrefix.length && hid.substr(0, idPrefix.length) === idPrefix) { 
      id = hid.substr(idPrefix.length); 
      groupItem = this.p.groupingView.sortnames[0][id]; 
      if (typeof (groupItem) !== "undefined") { 
       i = $.inArray(expandedGroups[i], groups); 
       if (!collapsed && i < 0) { 
        expandedGroups.push(groupItem); 
       } else if (collapsed && i >= 0) { 
        expandedGroups.splice(i, 1); // remove groupItem from the list 
       } 
      } 
     } 
    }, 
    loadComplete: function() { 
     var $this = $(this), i, l, index, groups = this.p.groupingView.sortnames[0]; 
     for (i = 0, l = expandedGroups.length; i < l; i++) { 
      index = groups.indexOf(expandedGroups[i]); 
      if (i >= 0) { 
       $this.jqGrid('groupingToggle', this.id + 'ghead_' + index); 
      } 
     } 
    } 
}); 
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {}, 
    {multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, 
     closeAfterSearch: true}); 

CẬP NHẬT: Nhóm các mô-đun của jqGrid được thay đổi ở nhiều nơi kể từ khi câu trả lời ban đầu của tôi. Bản trình diễn được sửa đổi có thể tìm thấy here. Phần quan trọng nhất của mã được sử dụng có thể thấy bên dưới

grouping: true, 
groupingView: { 
    groupField: ["invdate"], 
    groupCollapse: true, 
    groupDataSorted: true 
}, 
onClickGroup: function (hid, collapsed) { 
    var idPrefix = this.id + "ghead_", i, groupid, 
     $this = $(this), 
     groups = $(this).jqGrid("getGridParam", "groupingView").groups, 
     l = groups.length; 

    if (!inOnClickGroup) { 
     inOnClickGroup = true; // set to skip recursion 
     for (i = 0; i < l; i++) { 
      groupid = idPrefix + groups[i].idx + "_" + i; 
      if (groupid !== hid) { 
       $this.jqGrid("groupingToggle", groupid); 
      } 
     } 
     inOnClickGroup = false; 
    } 
} 

Biến số inOnClickGroup được xác định trong phạm vi bên ngoài.