jqGrid thanh công cụ lọc Toggle với cột đông lạnh không hoạt động

Question

Tôi đã thấy bản demo sau đây với cột đông lạnh và lọc thanh công cụ ở đây: http://www.ok-soft-gmbh.com/jqGrid/FrozenColumns.htm

Bây giờ cho các ví dụ tương tự tôi muốn thực hiện tính năng chuyển đổi đó là availbale trong bản demo: http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSearchingToolbar1.htm

Tôi đã thử nó nhưng nó không hoạt động .. ai có thể tạo bản demo có cả cột cố định và thanh công cụ lọc chuyển đổi không?

---

Tôi cố gắng để tải về mã jqGrid mới nhất từ ​​github và cố gắng để tái tạo bản demo như sau (như u nói vấn đề này đã được cố định tôi nghĩ không cần của frozendiv, chức năng fixGBoxHeight trong bản demo u đã cho tôi thấy trước đây tức là http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle.htm)

$grid.jqGrid({ 
     datatype: 'local', 
     data: mydata, 
     colNames: [/*'Id', */'Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], 
     colModel: [ 
      //{name: 'id', index: 'id', width: 45, align: 'center', sorttype: 'int', frozen: true}, 
      {name: 'name', index: 'name', width: 70, editable: true, frozen: true}, 
      {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', 
       formatter: 'date', formatoptions: {newformat: 'm/d/Y'}, datefmt: 'm/d/Y'}, 
      {name: 'amount', index: 'amount', width: 75, formatter: 'number', align: 'right', editable: true}, 
      {name: 'tax', index: 'tax', width: 50, formatter: 'number', 
       formatoptions: {decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'}, 
       align: 'right', editable: true, editoptions: {readonly: true}}, 
      {name: 'total', index: 'total', width: 60, formatter: 'number', align: 'right', editable: true}, 
      {name: 'closed', index: 'closed', width: 70, align: 'center', editable: true, 
       formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}}, 
      {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select', editable: true, 
       edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}}, 
      {name: 'note', index: 'note', width: 70, sortable: false, editable: true} 
     ], 
     rowNum: 10, 
     rowList: [5, 10, 20], 
     pager: '#pager', 
     gridview: true, 
     rownumbers: true, 
     sortname: 'invdate', 
     viewrecords: true, 
     sortorder: 'desc', 
     caption: 'Frozen columns with dynamic shown filter toolbar', 
     height: '100%', 
     shrinkToFit: false, 
     width: 550, 
     resizeStop: function() { 
      /*resizeColumnHeader.call(this); 
      fixPositionsOfFrozenDivs.call(this); 
      fixGboxHeight.call(this);*/ 
     }, 
     loadComplete: function() { 
      //fixPositionsOfFrozenDivs.call(this); 
     } 
    }); 
    $grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {}, 
     {multipleSearch: true, overlay: 0}); 
    $grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'}); 
    $grid.jqGrid('navButtonAdd', '#pager', { 
     caption: "Filter", 
     title: "Toggle Searching Toolbar", 
     buttonicon: 'ui-icon-pin-s', 
     onClickButton: function() { 
      this.toggleToolbar(); 
      /*if ($.isFunction(this.p._complete)) { 
       if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) { 
        $('.ui-search-toolbar', this.grid.fhDiv).show(); 
       } else { 
        $('.ui-search-toolbar', this.grid.fhDiv).hide(); 
       } 
       this.p._complete.call(this); 
       fixPositionsOfFrozenDivs.call(this); 
      }*/ 
     } 
    }); 
    $grid[0].toggleToolbar(); 
    /*$grid.jqGrid('gridResize', { 
     minWidth: 450, 
     stop: function() { 
      fixPositionsOfFrozenDivs.call($grid[0]); 
      fixGboxHeight.call($grid[0]); 
     } 
    }); 
    resizeColumnHeader.call($grid);*/ 
    $grid.jqGrid('setFrozenColumns'); 
    /*$grid.p._complete.call($grid); 
    fixPositionsOfFrozenDivs.call($grid);*/ 
}); 

Nhưng vẫn mã sẽ không làm việc và filtertoolbar không làm việc vì nó là trong bản demo trước đó của bạn (http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggle .htm)

Answer 1

Trước hết tôi khuyên bạn nên sử dụng the demo từ the answer làm cơ sở thay vì the demo từ the previous answer.

Bạn nói đúng. Việc triển khai các cột cố định hiện tại có vấn đề với hiển thị động hoặc ẩn thanh công cụ tìm kiếm. Tôi diễn giải nó như một lỗi trong số toggleToolbar.

Đến khi lỗi không được sửa, tôi khuyên bạn nên hiển thị hoặc ẩn thanh công cụ trong phần được cố định của lưới theo cách thủ công. The demo cho biết cách thực hiện điều này. Phần quan trọng nhất của mã demo bạn tìm thấy bên dưới:

$grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'}); 
$grid.jqGrid('navButtonAdd', '#pager', { 
    caption: "Filter", 
    title: "Toggle Searching Toolbar", 
    buttonicon: 'ui-icon-pin-s', 
    onClickButton: function() { 
     this.toggleToolbar(); 
     if ($.isFunction(this.p._complete)) { 
      if ($('.ui-search-toolbar', this.grid.hDiv).is(':visible')) { 
       $('.ui-search-toolbar', this.grid.fhDiv).show(); 
      } else { 
       $('.ui-search-toolbar', this.grid.fhDiv).hide(); 
      } 
      this.p._complete.call(this); 
      fixPositionsOfFrozenDivs.call(this); 
     } 
    } 
}); 
$grid[0].toggleToolbar();