11

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

4

8 に答える 8

9

これに対する答えを探していて、次の解決策を思いつきましたが、サーバーと話しているわけではないので、「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
    }
}

于 2009-10-07T21:42:07.790 に答える
1 
$('#grid').jqGrid({
     loadComplete: function() {
            if ($("#grid").getGridParam("records")==0) {
                $("#grid").addRowData(
                $("#grid")
                    .empty()
                    .append('<tr class="yourClass"><td>No records to display</td></tr>')
                 );
            }
        }
});
于 2016-09-14T09:26:03.880 に答える
1
  1. json 配列に"rows":[]を設定します

  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();


 }
于 2012-03-12T13:32:06.697 に答える
1

ややこしいのは、メッセージを列全体に広げて表示することです。それを行う簡単な方法はないと思います。たとえば、最初の列を除くすべての列を非表示にし、最初の列の幅をグリッドに合わせて設定し、メッセージを最初の列に配置する必要があります。その後、リロードすると、すべて元に戻す必要があります。うまくいくはずですが、ちょっと面倒です。

ただし、メッセージを最初の列に入れ、残りを空のままにしたいとします。基本的に、「loadComplete」イベント関数を実装し、グリッドのコンテンツを操作します。

次のように、グリッド オブジェクトにプロパティを追加します。

//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":""
          );
     }
}

「#grid_id」はグリッド コンテナーの ID、「blankRow」は追加した新しい行に指定した任意の ID、「firstCol」、「secondCol」などは列の名前です。 .

于 2009-06-19T18:53:35.477 に答える
0

これを実行し、グリッドで処理できるようにする最善の方法は、行のないデフォルトのパラメーターを返すことです。たとえば、JSONデータを使用しているので、これがリターンJSONになります。

{"d":"{"page":"1","total":"0","records":"0","rows":[]}"}
于 2011-01-13T03:59:04.803 に答える
0

私はそれを次のように実装しました（ただし、これは提供されたページャー機能を使用していたという事実に依存します）。レコードが返されない場合に表示されるのは、キャプションバーと「表示するレコードがありません」を表示する1つのページャーバーだけです。

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();
        }
    }
});

編集：この回答を参照することもできますデータが返されないときにjqgridを完全に非表示にするにはどうすればよいですか？そして、次の2つのいずれかを実行します。

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

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

于 2011-08-16T22:54:34.253 に答える
0

メッセージをスタイル付きのdiv内に配置します：非表示。これをポケットベルdiv内に配置します。

loadCompleteイベントで、次のようにします。

if($('#results').getGridParam("records")==0) { 
 $("#noResultsDiv").show();   
}
于 2009-07-22T06:19:20.977 に答える
0

この質問は少し古いことは知っていますが、私にとってはこれでうまくいきました：

$('#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;
}
于 2014-08-13T14:54:25.753 に答える