データがないことをjqGridに表示する方法は？

Question

jqGridが空の場合、グリッド内にデータがないという情報メッセージが表示されます。これはどのように可能ですか？ありがとう

Answer 1

トリッキーなビットは、メッセージが列に広がって表示されています。私はそれを行う簡単な方法はないと思う。たとえば、最初の列以外のすべての列を非表示にし、最初の列の幅をグリッドに合わせて設定し、メッセージを最初の列に配置する必要があります。それからあなたがリロードするとき、あなたはそのすべてを元に戻す必要があります。それはうまくいくはずですが、それはちょっと面倒です。

しかし、メッセージを最初の列に置き、残りの部分を空のままにしたいとします。基本的には、 "loadComplete"イベント関数を実装し、グリッドの内容を操作します。

はそうのようなあなたのグリッドオブジェクトにプロパティを追加します。

「#grid_idは」あなたのグリッドコンテナのIDです

//Various other grid properties... 
loadComplete: function() { 
    if (jQuery("#grid_id").getGridParam("records")==0) { 
      jQuery("#grid_id").addRowData(
       "blankRow", {"firstCol":"No data was found". "secondCol":"", "thirdCol":"" 
     ); 
    } 
} 

は、「blankRowは、」あなたは、新しい行あなたに与えてくれた任意のIDです。追加され、 "firstCol"、 "secondCol"などは列の名前です。

Answer 2

div：style：hiddenでメッセージをdivに配置します。これをページャーのdivに入れてください。私はこの1つの答えを探していると、次の解決策を考え出したが、私は、サーバーへの話ではないので、私は何かを使用していた

if($('#results').getGridParam("records")==0) { 
$("#noResultsDiv").show(); 
} 

Answer 3

：loadCompleteイベントで

のような何かを行います'loadComplete'イベントの他に私は 'gridComplete'イベントにフックして、レコードがあるかどうかを確認しました。そうでない場合は空のテキストを表示し、そうでない場合は非表示にします。

 
jQuery('#test').jqGrid({ 
     ... // some settings 
     gridComplete: loadCompleteFunction, 
     emptyDataText:'There are no records. If you would like to add one, click the "Add New ..." button below.', // you can name this parameter whatever you want. 
     ... // more settings 

}); 

function LoadComplete() 
{ 
    if ($('test').getGridParam('records') == 0) // are there any records? 
     DisplayEmptyText(true); 
    else 
     DisplayEmptyText(false); 
} 

function DisplayEmptyText(display) 
{ 
    var grid = $('#test'); 
    var emptyText = grid.getGridParam('emptyDataText'); // get the empty text 
    var container = grid.parents('.ui-jqgrid-view'); // find the grid's container 
    if (display) { 
     container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below 
     container.find('.ui-jqgrid-titlebar').after('' + emptyText + ''); // insert the empty data text 
    } 
    else { 
     container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show(); // show the column headers 
     container.find('#EmptyData' + dataObject).remove(); // remove the empty data text 
    } 
} 

Answer 4

私はこれを行うと、グリッドがそれを処理することを可能にするための最良の方法はありません行のデフォルトパラメータを返すことですました。たとえば、私はJSONデータを使用しているので、JSONを返します。

{"d":"{"page":"1","total":"0","records":"0","rows":[]}"} 

Answer 5

次のように（これは私が提供ページャ機能を使用していたという事実に依存しないが）、私はそれを実装しました。レコードが返されないときに表示されるのは、キャプションバーと「表示するレコードなし」を表示するポケットベルバーです。

早期jqGridのデフォルトオプションの設定から自分のコードのスニペット（グリッドの前にも、私のページにロードされます）：私のコードの

// jQuery jqGrid default options 
$.extend($.jgrid.defaults, { 
    pager: '#gridPager', 
    emptyrecords: "No records to view", // Unnecessary (default in grid.locale-en.js) 
    recordpos: 'left', 
    recordtext: "Viewing {0} - {1} of {2}", // Overriding value in grid.locale-en.js 
    viewrecords: true 
}); 

スニペットjqGridロードから：

$('#grid').jqGrid({ 
    loadComplete: function() { 
     // Hide column headers and top pager if no records were returned 
     if ($('#grid').getGridParam('records') === 0) { 
      $('#grid_toppager').hide(); // I used top & bottom pagers, so I hid one 
      $('.ui-jqgrid-htable').hide(); 
     } 
    } 
}); 

EDITを：あなたこの回答をHow can I hide the jqgrid completely when no data returned?とし、2つのうちの1つを行うこともできます。

1）メッセージを1つのdivに、グリッドを別のdivに入れます。グリッドを非表示にしてメッセージを表示します。

2）メッセージをグリッドのすぐ下のdivに入れます。上記の私のアプローチに従いますが、すべてのページャを非表示にします。 divを同じイベントハンドラに表示します。表示されるのは、キャプションバーとメッセージのdivだけです。

Answer 6

1. 設定"行"：JSON配列

2. のため[]が、私はこの質問は少し古いですけど、

   onLoadSuccess: function() { 
       **var rows = $(this).datagrid("getRows");** 
   if(rows.length == 0) 
   { 
   
       $("#errordiv").show(); 
       $(".datagrid-view").append('<div class="errordiv" id="errordiv">Ur Message</div>'); 
   } 
   else 
   $("#errordiv").hide(); 
   
   
   } 
   

Answer 7

として成功した場合にエラー・コンテナを追加します私にとってこれはうまくいった：

$('#tableid').jqGrid({ 
    ... 
    datatype: dataLoad, 
    ... 
}) 

function dataLoad(postdata, sid) { 
    var id = sid.replace('load_', ''); 
    var result = loadDataFromServer('/my/server/url', postdata); 

    if (result) { 
    if (result.records > 0) { 
     var thegrid = $("#"+id)[0]; 
     thegrid.addJSONData(result); 
    } 
    else 
     $("#"+id+" tbody") 
     .empty() 
     .append('<tr><td class="emptyDataMsg">This table is empty</td></tr>'); 
    } 
} 

基本的には、サーバーからデータを読み込み、いくつかのレコードを取得し、テーブル内のすべての行を空白にするだけでなく、カスタムテキストの行を1行だけ追加するかどうかを確認します。いくつかのCSSを使用すると、結果は非常にきれいです。

.emptyDataMsg { 
    background-color: #EEEEEE; 
    border-bottom: 1px solid #CCCCCC; 
    color: #666666; 
    font-size: 1.2em; 
    font-weight: bold; 
    padding: 5px; 
    text-align: center; 
} 

Answer 8

$('#grid').jqGrid({ 
    loadComplete: function() { 
      if ($("#grid").getGridParam("records")==0) { 
       $("#grid").addRowData(
       $("#grid") 
        .empty() 
        .append('<tr class="yourClass"><td>No records to display</td></tr>') 
       ); 
      } 
     } 
});