jquery uiタブ内のJqgrid

Question

私のjqgrid用のカスタムボタンがあります。これを押すと別のビューに移動します。 しかし、何らかの理由で、タブ間を移動するときに、そのタブを再度訪れるたびに追加のカスタムボタンが追加されます。このボタンを1回だけ追加する方法はありますか？

この

は、マークアップです：

$('#tabs').tabs({ 
    show: function (event, ui) { 
     if(ui.index == 0) { 
      Show some content on this tab.. Not important. 
     } 

     if(ui.index == 1) { 
      $("#functionslist").jqGrid({ 
       datatype: 'json', 
       url: '/Admin/GetFunctionsList', 
       colNames: ['Namn'], 
       colModel: [ 
          { index: 'FunctionName', 
          name: 'FunctionName', 
          width: 100, 
          sortable: false 
          } 
          ], 
       rowNum: 20, 
       prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null }, 
       hidegrid: false, 
       pager: '#functionspager', 
       autowidth: true, 
       shrinkToFit: true, 
       height: '100%', 
       caption: 'Functions', 
       viewrecords: true, 
       onSelectRow: function (id) { 
         window.location.href = '/Function/Edit/' + id; 
       } 
      }).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false }) 
      .navButtonAdd('#functionspager', { 
       caption: '', 
       title: 'Create new function', 
       buttonicon: 'ui-icon-plus', 
       onClickButton: function() { 
        window.location = '/Function/Add/'; 
       } 
      }); .... and so forth.... 

すべてがうまく動作し、私は私が望む行動を持っていますが、私はより多くのカスタムボタンを追加している2つのタブ間を移動し、いくつかの理由があります。理由は何か、これを解決しようとしたが運がない。

/ダニエル・

Answer 1

なぜボタンがすでにそれを追加する前に存在しているかどうかをチェックしませんか？

if ($('#functionspager :has(".ui-icon-plus")').length == 0) { 
    $("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false }) 
     .navButtonAdd('#functionspager', { 
      ... 
      }); 
} 

Answer 2

コール$("#functionslist").jqGrid({/*parameters*/);はそうでカラム、捕捉、ページャとを有するグリッドに空<table>を変換します。 を一度にして、すべてのタブの有効化でそれを繰り返さないでください。

は全く同じようにする方法 navGridと navButtonAddは一度だけ を呼び出さなければなりません。

したがって、ユーザーがjqGridを持つタブを選択した場合は、何をすべきかを決定する必要があります。あなたは、例えば

$("#functionslist").trigger('reloadGrid', [{current:true}]); 

（詳細はhereを参照）

を呼び出すことができます