2012-01-23 9 views
5

が動作していません http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSearchingToolbar1.htmjqgridトグルフィルタツールバーは、私はここで、冷凍の列とフィルタツールバーでは、次のデモを見てきました

私はそれを試してみましたが、それは動作していない...誰もが凍結された列とトグルフィルタツールバーの両方を持ってデモを作成することができますか?


uは問題が、私は、uは私を示したデモでfixGBoxHeight機能をfrozendivの必要性を全く考えていない固定し、言ったように私は(githubのから最新のjqgridコードをダウンロードしようとしたし、次のようにデモを複製しようとしました以前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);*/ 
}); 

しかし、それはあなたの前のデモであるとしてまだ(http://www.ok-soft-gmbh.com/jqGrid/FrozenColumnsAndFilterToggleコードが仕事に行くされていないとfiltertoolbarが動作していない、すなわち.htm)

答えて

3

まずはI the demoからthe previous answerの代わりに、をthe answerのベースとして使用することをお勧めします。

あなたは正しいです。フリーズした列の現在の実装では、検索ツールバーの動的な表示または非表示に問題があります。私はそれをtoggleToolbarのバグと解釈します。

バグが修正されない限り、グリッドのフリーズした部分にツールバーを手動で表示または非表示にすることをお勧めします。 The demoは、これを実装する方法を示しています。デモのコードの最も重要な部分は、以下にあります。

$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(); 
+0

ありがとうございます。これは私が正確に探しているものです。一つの疑問は、ページ上に複数のグリッドがある場合、すべてのグリッドに対して3つの関数ie resizeColumnHeader, fixPositionsOfFrozenDivs, fixGboxHeightを共通のブロックに移動できることです。 –

+0

@ user109124:はい、もちろん可能です。既に[修正済み]の[バグ](http://www.trirand.com/blog/?page_id=393/bugs/usage-of-toggletoolbar-with-frozen-columns/#p25779)を修正することもできます( https://github.com/tonytomov/jqGrid/commit/f802d0329f4d1740e57bd52cdf251858284a0e8b)をjqGridのメインコードに追加します。 – Oleg

+0

@Oleg私はcolModelでsearch = trueを指定しているので、グリッドの読み込みと同じことが達成できます。 – Vikas

関連する問題