質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

jqGridのテーブル上に表示される「undefined」の消し方について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,303

score 578

現在jqGridを使ってリッチなテーブルを作成しています。
環境はEclipse,HTML,css,jQueryです。

質問があるのですが、
結論から言うと


テーブル上に表示される「undefined」の消すにはどうしたらいいでしょうか?


以下のサイトを見て、
http://acro-engineer.hatenablog.com/entry/20110715/1310683073
jqGridを使ってテーブルを作成したのですが、
テーブルの真ん中に「undefined」という文字が表示されてしまいます。
↓通常時
通常時↓テーブル折りたたみ時
テーブル折りたたみ時
ソースを見たのですが、原因が見つけられませんでした。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css"
    rel="stylesheet" />
<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css"
    rel="stylesheet" />
<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js"></script>

<script type="text/javascript">
    $(function() {
        //列の設定
        var colModelSettings= [
            {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"},
            {name:"no",index:"no",width:70,align:"center",classes:"no_class"},
            {name:"name",index:"name",width:200,align:"center",classes:"name_class"},
            {name:"age",index:"age",width:200,align:"center",classes:"age_class"},
            {name:"local",index:"local",width:200,align:"center",classes:"local_class"},
            {name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
        ];

        //列の表示名
        var colNames = ["","No.","name","age","local","hobby"];

        var date = [
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
                    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"}

                ];

        //テーブルの作成
        $("#sample1").jqGrid({
            data:date,  //表示したいデータ
            datatype : "local",            //データの種別 他にjsonやxmlも選べます。
                                               //しかし、私はlocalが推奨です。
            colNames : colNames,           //列の表示名
            colModel : colModelSettings,   //列ごとの設定
            rowNum : 10,                   //一ページに表示する行数
            rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
            caption : "Sample Display",    //ヘッダーのキャプション
            height : 200,                  //高さ
            width : 500,                   //幅
            pager : 'pager1',              //footerのページャー要素のid
            shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
            viewrecords: true              //footerの右下に表示する。
        });
    });
</script>
</head>
<body>
    <table id="sample1"></table>
    <div id="pager1"></div>
</body>
</html>

もしわかる方がいればよろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

読み込み中を示す要素が、なぜか消えていないみたいですね。
        //テーブルの作成
        $("#sample1").jqGrid({
            data:date,  //表示したいデータ
/* 中略 */
            viewrecords: true              //footerの右下に表示する。
            ,
            gridComplete: function () {
                $("#load_sample1").hide();
            }
        });
これでどうでしょう?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/08 13:29

    algさん、回答ありがとうございます!
    コードを載せるのでコメ外に書きます。

    キャンセル

  • 2015/05/08 14:41

    対症療法的に、#load_sample1を非表示にするつもりのコードを書いてみたものでした。
    本来なら#load_sample1のstyleは"display: none;"になるはずなのですが……。
    ちゃんと原因を追求した方がよさそうですね。

    #load_sample1の中身がundefinedになっているのが気になります。
    grid.locale-ja.js が正しく読み込まれているなら、ここは"読み込み中..."となるはずなのです。
    grid.locale-ja.js が壊れていたりしませんか?

    キャンセル

  • 2015/05/08 14:43

    諸々のファイルが正しく読み込まれれば、undefinedは表示されなくなると思います。

    サンプル:
    https://jsfiddle.net/mx22xu06/

    キャンセル

  • 2015/05/08 14:45

    algさん返答ありがとうございます!
    いろいろやった結果
    **できました!**
    長くなるのでコメ外に載せます。

    キャンセル

check解決した方法

0

解決しました!
結論から言うと、「regional : 'ja',」の記述をを追加するとバグが直りました。

        //テーブルの作成
        $("#sample1").jqGrid({
            data:date,  //表示したいデータ

            /* 中略 */

            pager : 'pager1',              //footerのページャー要素のid
            regional : 'ja',
            shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
            viewrecords: true             //footerの右下に表示する。
        });

というのもコンソールにエラーが出ていました。
すいません。報告できていませんでした。(汗)
そのエラー内容が以下です。
イメージ説明
この解決策が以下のサイトに載っており、その通りにすると直りました。
http://www.trirand.com/blog/?p=1467

algさん、ご協力下さりありがとうございます。
無事解決することができました。感謝しています!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

    //テーブルの作成
        $("#sample1").jqGrid({
            data:date,  //表示したいデータ
            datatype : "local",            //データの種別 他にjsonやxmlも選べます。
                                               //しかし、私はlocalが推奨です。
            colNames : colNames,           //列の表示名
            colModel : colModelSettings,   //列ごとの設定
            rowNum : 10,                   //一ページに表示する行数
            rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
            caption : "Sample Display",    //ヘッダーのキャプション
            height : 200,                  //高さ
            width : 500,                   //幅
            pager : 'pager1',              //footerのページャー要素のid
            shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
            viewrecords: true,             //footerの右下に表示する。
      gridComplete: function () {
      $("#load_sample1").hide();
      }
        });

algさんに言われたとおりこのように書いたのですが、真ん中の「undefined」は消えませんでした。
#load_sample1を#sample1に書きかえてもダメでした。load_sample1IDはちなみにどこから来ているのでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

デベロッパーツールで見てみると
確かにalgさんの言うとおり#load_sample1がありますね。この1行が「undefined」の箇所でした。
これを消す処理をするってことですね。それが投稿して下さったコードだと。なるほど。
もう少し調べてみます。
イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る