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

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

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

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

以下のサイトを見て、
http://acro-engineer.hatenablog.com/entry/20110715/1310683073
jqGridを使ってテーブルを作成したのですが、
テーブルの真ん中に「undefined」という文字が表示されてしまいます。
↓通常時
![通常時]WIDTH:600
↓テーブル折りたたみ時
![テーブル折りたたみ時]WIDTH:600

ソースを見たのですが、原因が見つけられませんでした。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css"
7	rel="stylesheet" />
8<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css"
9	rel="stylesheet" />
10<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js"></script>
11<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
12<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js"></script>
13
14<script type="text/javascript">
15	$(function() {
16		//列の設定
17		var colModelSettings= [
18		    {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"},
19			{name:"no",index:"no",width:70,align:"center",classes:"no_class"},
20			{name:"name",index:"name",width:200,align:"center",classes:"name_class"},
21			{name:"age",index:"age",width:200,align:"center",classes:"age_class"},
22			{name:"local",index:"local",width:200,align:"center",classes:"local_class"},
23			{name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
24		];
25
26		//列の表示名
27		var colNames = ["","No.","name","age","local","hobby"];
28
29		var date = [
30		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
31		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
32		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
33		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
34		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
35		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
36		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
37		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
38		        	{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"}
39
40		        ];
41
42		//テーブルの作成
43		$("#sample1").jqGrid({
44			data:date,  //表示したいデータ
45			datatype : "local",            //データの種別 他にjsonやxmlも選べます。
46		                                       //しかし、私はlocalが推奨です。
47			colNames : colNames,           //列の表示名
48			colModel : colModelSettings,   //列ごとの設定
49			rowNum : 10,                   //一ページに表示する行数
50			rowList : [1, 10, 20],         //変更可能な1ページ当たりの行数
51			caption : "Sample Display",    //ヘッダーのキャプション
52			height : 200,                  //高さ
53			width : 500,                   //幅
54			pager : 'pager1',              //footerのページャー要素のid
55			shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
56			viewrecords: true              //footerの右下に表示する。
57		});
58	});
59</script>
60</head>
61<body>
62	<table id="sample1"></table>
63	<div id="pager1"></div>
64</body>
65</html>

もしわかる方がいればよろしくお願いします。

行動規範の内容に同意します

回答4件

読み込み中を示す要素が、なぜか消えていないみたいですね。

lang
1        //テーブルの作成
2        $("#sample1").jqGrid({
3            data:date,  //表示したいデータ
4/* 中略 */
5            viewrecords: true              //footerの右下に表示する。
6            ,
7            gridComplete: function () {
8                $("#load_sample1").hide();
9            }
10        });

これでどうでしょう？

投稿2015/05/08 03:44

alg

総合スコア2019

k499778

2015/05/08 04:29

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

alg

2015/05/08 05:41

対症療法的に、#load_sample1を非表示にするつもりのコードを書いてみたものでした。本来なら#load_sample1のstyleは"display: none;"になるはずなのですが……。ちゃんと原因を追求した方がよさそうですね。 #load_sample1の中身がundefinedになっているのが気になります。 grid.locale-ja.js が正しく読み込まれているなら、ここは"読み込み中..."となるはずなのです。 grid.locale-ja.js が壊れていたりしませんか？

alg

2015/05/08 05:43

諸々のファイルが正しく読み込まれれば、undefinedは表示されなくなると思います。サンプル： https://jsfiddle.net/mx22xu06/

k499778

2015/05/08 05:45

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

行動規範の内容に同意します

自己解決

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

lang
1        //テーブルの作成
2		$("#sample1").jqGrid({
3			data:date,  //表示したいデータ
4
5			/* 中略 */
6
7			pager : 'pager1',              //footerのページャー要素のid
8			regional : 'ja',
9			shrinkToFit : true,       //画面サイズに依存せず固定の大きさを表示する設定
10			viewrecords: true             //footerの右下に表示する。
11		});

というのもコンソールにエラーが出ていました。
すいません。報告できていませんでした。(汗)
そのエラー内容が以下です。
![イメージ説明]WIDTH:600

この解決策が以下のサイトに載っており、その通りにすると直りました。
http://www.trirand.com/blog/?p=1467

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

投稿2015/05/08 06:12

k499778

総合スコア599

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

投稿2015/05/08 05:12

k499778

総合スコア599

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