jQuery

【jQeury】jqGridで空のテーブルを表示する方法

表の領域を確保して、空の表(ヘッダーのみ)を表示したいケースありますよね。

jqGrid.data : nullでいけるかなと思ったら、コンソールに↓のエラーが出ました。

SCRIPT5007: 未定義または NULL 参照のプロパティ 'length' は取得できません

回避方法は3通りあります。

  • dataに空のオブジェクトリテラル「{}」または「[]」を指定する
  • dataにnullではなくundefinedを設定する
  • dataの指定をしない

サンプルソース

空のオブジェクトリテラルを設定するサンプルです。


<script>
    $(document).ready(function () {
        
        // 表示設定
        $("#gridUser").jqGrid({
            data: {}
            , dataType: 'local'
            , colNames: ['ID', '名前', 'パスワード']
            , colModel: [
                { index: 'ID', name: 'ID', width: '50px', align: 'center' }
                , { index: 'NAME', name: 'NAME', width: '100px' }
                , { index: 'PW', name: 'PW', width: '100px', align: 'right' }
            ]
            , multiselect: false
            , height: '200px'
            , caption: 'ユーザ一覧'
        });
    });
</script>

以上、jqGridで空の表(ヘッダーのみ)を表示する方法でした。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です