常連

### 実現したいこと
jqgridのヘッダーを2行にして、一部の列だけ結合したい。

### 発生している問題・分からないこと
jqgridで以下画像の「借用物」の部分のように、ヘッダーの一部分だけ結合したいのですが、可能なのでしょうか？
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-11-21/27d0d066-c488-4d59-9be9-cc2d569fa088.png)



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ヘッダーを2行にした場合に2行とも結合することは可能のようですが、画像のように1行目だけを2列で結合する方法が分かりませんでした。

### 補足
特になし

jqgridのヘッダーを2行にして、一部の列だけ結合

初投稿です、よろしくお願いします。

jQueryのプラグイン「jqgrid」で質問です。
jsonでのデータの出力方法を教えて頂けないでしょうか。

状況
・当方html、cssはWebクリエイター検定レベルの知識はありますがjavascript、jqueryは２，３週間前から触り始めました。
・データが出力されたら拡張子jsonのファイルができると推測してますが、jsファイルしかできないのであればその方法でも構いません。
・現在jqgridを使ってjavascriptに書いたデータをブラウザに表示することはできました。
セルの編集、ブラウザでその情報の保持、getCellメソッドで値の取得はできました。

質問としては良くないかもしれませんが・・・よろしくお願いします。

jQuery"jqGrid"のデータの出力方法

現在jqGridを使ってリッチなテーブルを作成しています。
環境はEclipse,HTML,css,jQueryです。

質問があるのですが、
結論から言うと


**テーブル上に表示される「undefined」の消すにはどうしたらいいでしょうか？**


以下のサイトを見て、
http://acro-engineer.hatenablog.com/entry/20110715/1310683073
jqGridを使ってテーブルを作成したのですが、
テーブルの真ん中に「undefined」という文字が表示されてしまいます。
↓通常時
![通常時][WIDTH:600](1eb1223c1ab1e1fa8d7ab0147e8ac251.jpeg)
↓テーブル折りたたみ時
![テーブル折りたたみ時][WIDTH:600](1c698ff115994a3f6820ce3e375be824.jpeg)

ソースを見たのですが、原因が見つけられませんでした。
```lang-HTML
<!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>
```

もしわかる方がいればよろしくお願いします。

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

サーバーサイドJavascriptで動作するフレームワーク(intramart)で開発をしています。

データベースを検索するアプリで、２つのコンボボックスを連動させるような動作を行っています。
条件選択の画面で、勘定科目のコンボボックスを変更したら、それに対応する補助科目のコンボボックスの中身を変更するような仕組みです。

具体的には、下記のような形で実装して動作するようになりました。

１．条件選択画面を表示させる前に、JavascriptでSQLを発行し、勘定科目と補助科目の組み合わせを配列に取得し、画面上の隠しフィールドに表示。(生成されたソースを見ると、実際にはjqGridが組み込まれています）
２．条件選択画面で、勘定科目のコンボボックスを変更した場合は、jQueryで隠しフィールドを検索して、勘定科目に該当する補助科目でコンボボックスの値をセットし直す。
３．このようにして条件選択画面で選択した結果、実行ボタンを押すと、JavascriptでSQLを発行して、検索結果を配列に取得して検索結果画面に表示。

```html
<script type="text/javascript">

	<form action="app/jrnl_list" name=f1 id="sql_info" method="post" onSubmit="return err_check()">
		<table class="imui-form">
		<tbody>
		<tr>
			<th><label><div id="label1">勘定科目</div></label></th>
			<td><div id="input1">
			<imart type="imuiSelect" list=AcList id="ac" name="ac" onChange="ac_change" style="width: 200px;" /></div></td>
		</tr>
		<tr>
			<th><label><div id="label2">補助科目</div></label></th>
			<td><div id="input2">
			<imart type="imuiSelect" list=SubAcListw1 id="subac" name="subac" style="width: 200px;" /></div></td>
		</tr>
		</tbody>
		</table>
		<div class="imui-operation-parts">
			<imart type="submit" value="実行" id="register-button" class="imui-large-button" />
		</div>
		
		<imart type="imuiListTable" data=SubAcList id="hjlist" hidden="true">
			<pager rowNum="100" rowList="30,50,100"/>
			<cols>
				<col name="account_cd" caption="勘定科目コード" />
				<col name="subsidiary_account_cd" caption="補助科目コード" />
				<col name="subsidiary_account_name" caption="補助科目名" />
			</cols>
		</imart>
		
	</form>
```

ここで、３．の検索結果から前の画面に戻した時の動作でつまづいてます。

最初に選択した勘定科目の値は、元に戻るのですが、
連動させて選択した補助科目の値が、元に戻らず、コンボボックスの中身も空になってしまいます。
勘定科目を別の値に選択し直すと、補助科目も連動して正常に動作しますので、隠しフィールドは元のまま保持されているようです。

検索結果画面の、「戻る」という操作は、下記のように書いているのですが、
「戻る」が使えないとなると、選択した値を元の画面に戻して再表示ということになるので、躊躇しています。

```html
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="imui-toolbar-icon" title="戻る">
```

「戻る」の振る舞いで何か注意点がありましたらアドバイス頂ければ幸いです。
あるいは、「戻る」場合に発効されるイベントはあるのでしょうか？

ブラウザの戻るボタンでコンボボックスの値がクリアされてしまう

Jqgridでデータの入力をさせています。追加、編集、削除は正常に行われるのですが
追加時にデータをソート（id順）してくれません。 ヘッダーの上下ではソートは
できるのですが、なんとか追加時に自動でソートさせたいのです。


    $("#grid01").jqGrid({
        data: dt1,
        editurl: 'clientArray',
        datatype: "local",
        colNames: ['id','日付', '工事区分', '料金種別', '数量', '施工業者', '班数'],
        colModel: [
            { name: 'id', index: 'id', width: 55, editable: false, frozen: true, sorttype: 'text', sortable: true, key: true },
            /* 日付 */
            {
                index: 'Hiduke', name: 'Hiduke', width: '70px', align: 'left', editable: true,
                sortable: true,
                //dateFormat: 'Y/m/d',
                formatter: 'date',

                formatoptions: {
                    //srcformat: 'ISO8601Long',
                    newformat: 'Y/m/d'

                },
                edittype: 'text',
                editoptions: {
                    size: 12,
                    maxlengh: 12,
                    dataInit: function (element) {
                        $(element).datepicker({
                            dateFormat: "yy/m/d",
                            numberOfMonths: 3,     // 3ヶ月分表示
                            showCurrentAtPos: 1,   // 表示位置は左から2番目 (真ん中)
                            stepMonths: 3,         // 月の移動を3ヶ月単位とする
                            showButtonPanel: true, // ボタン領域を表示
                            gotoCurrent: true      // ボタン領域に「今日」ボタンを表示
                        })
                    }
                },
                editrules: {
                    /*required: true, date: true*/
                    date: true
                },
            },
            /* 工事区分 */
            {
                index: 'Gua_Kouji_KubunId', name: 'Gua_Kouji_KubunId', width: '200px', align: 'center', editable: true,
                edittype: "select", // edittype を select とする
                formatter: "select",
                editoptions: { value: kouji_kubun_m },
                sortable: false
            },

            /* 料金種別 */
            {
                index: 'Gua_RyoukinId', name: 'Gua_RyoukinId', width: '150px', align: 'center', editable: true,
                edittype: "select", // edittype を select とする
                formatter: "select",
                editoptions: { value: ryoukin_m },
                sortable: false
            },

            /* 数量 */
            { name: 'Suryou', index: 'Suryou', width: 50,  editable: true },


            /* 施工業者 */
            {
                index: 'Gua_SekousyaId', name: 'Gua_SekousyaId', width: '150px', align: 'center', editable: true,
                edittype: "select", // edittype を select とする
                formatter: "select",
                editoptions: { value: sekousya_m },
                sortable: false
            },

            /* 班数 */
            { name: 'Hansu', index: 'Hansu', width: 50,  editable: true }
        ],
        cellEdit: false,               // false: セルの直接編集はしない
        autoencode: true,             // true: データをエンコード
        rowNum: 10,
        loadonce: true,
        rowList: [10, 20, 30],
        pager: '#pager1',
        cellsubmit: 'clientArray',
        sortname: 'id',
        viewrecords: true,
        sorttable: true,
        sortorder: "asc",
        caption: "",
        shrinkToFit: false,
        height: 300,
        width: 800,
        navOptions: {
            edit: false,
            add: false,
            del: false,
            refresh: false,
            search: false,
        },
        beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
            // クリックされたセルを記録
            savedRow = iRow;
            savedCol = iCol;
        },
    });
    $("#grid01").jqGrid('navGrid', '#pager1', { edit: true, add: true, del: true });
    //列を非表示にする
    //$('#grid01').jqGrid('hideCol', 'sdate');
    $("#grid01").jqGrid('setFrozenColumns');  //固定列表示にする

JQgridの追加時のソート方法について

初質問です。

jqgrid内で文字を入力したいと思っています。

editable属性を使用すれば、実現できることはわかっています。

しかし、その場合クリックしなければセルがテキスト状態に変化しません。

初期表示の段階でテキスト状態で表示するにはどうすればよいか、どなたか実現方法がわかる方がいましたら教えていただけないでしょうか。

jqgrid内で常にテキストボックスを表示する方法

jqGridであるデータを表示しています。
表示したデータの中に編集させたい列があるのですが、その列は別の項目の値によって編集できる、できないを設定したいと思ってます。
〈例〉
項目A   項目B
1           abc       → 編集可能
2           def.       → 編集不可
1           huh.      → 編集可能

この場合、項目Aが1の場合は項目Bを編集可能にする。

ネットでいろいろ調べたのですが、やり方がわからず困っています。

申し訳ないのですがよろしくお願いします。

【Jqgrid】セル単位で編集可否を設定したい

連想配列の使い方、要素の参照方法が良く判らないので教えて下さい。

jQueryのjqGridで作成されている配列オブジェクトの値をCSVに出力するスクリプトです。
先人のソースを参考にして見よう見まねで、何とか動くようになり、結果をExcelで開くことも出来るのですが、
いわゆる標準的なCSVの形式として、文字列をダブルクォーテーションで囲む、という形式にすることが出来ていません。
列の属性を判断するには、sorttypeというプロパティを持っているのでそれを参照して、文字か数字かを判断すればよいと思っています。

連想配列の並び順が確保できなかったので、列の順番を付けるためにkeyOrderという配列を設けています。
この配列に値の順に、colModelの中のsorttypeプロパティが'int'の場合には数値と見なすという判断ができればよいかと思うのですが、
どのように検索、参照すればよいのでしょうか？

もっと簡単な方法でできるというご意見もあろうことは承知しておりますが、当面の課題におきましてアドバイスをいただければ幸いです。

よろしくご指導ください。

```Javascript
var dt = [
   {cd:"A001", name:"鈴木", age:35}
  ,{cd:"A002", name:"佐藤", age:45}
  ,{cd:"A003", name:"田中", age:55}
];

var keyOrder  = [
	"cd",
	"name",
	"age"
];


$("#list").jqGrid({
   data: dt
  ,datatype: "local"
  ,colNames:['CD', '名前', '年齢']
  ,colModel:[
    {index:'cd', name:'cd', width:'50px', align:'center'},
    {index:'name', name:'name', width:'100px', align:'left'},
    {index:'age', name:'age', width:'80px', align:'right', sorttype:'int'},
  ]
  ,height: 150
  ,multiselect: true
  ,caption: '一覧'
  ,rowNum: 5
  ,rowList: [5, 10, 20]
  ,viewrecords: true
  ,pager: 'pg01'
});

var ListToCSV = {
	export: function() {
		var csv_data = "";
		var j;
		var line;
		// 行データを取得する
		var sel_list = $('#list').getGridParam('data');
		j = 0;
		line = "";
		var header_list = $('#list').getGridParam('colNames');
		// 列属性の取得  －－＞　ここから sorttypeプロパティを取り出したい
		var col_list = $('#list').getGridParam('colModel');
		// 見出しの値を取得
		header_list.forEach(function( key ) {
			// chekbox列の除外
			if ( key.indexOf('checkbox') == -1) {
				if ( j != 0 ) line += ",";
				line += key;
				j ++;
			}
		});
		line += '\n';
		csv_data += line;
		// 明細の値を取得
		for (var i = 0; i < sel_list.length; i++) {
			j = 0;
			line = "";
			// 連想配列は並び順が保証されないので定義された順番(keyOrder)に書き出す
			keyOrder.forEach(function( key ) {

				//
				// この部分で、keyの値に対応する列のsorttypeというプロパティを参照
				//
				// col_list[key]['sorttype'] では駄目でした。

				if(sel_list[i][key]){
					var innerValue = sel_list[i][key]===null?'':sel_list[i][key].toString();
				} else {
					var innerValue = '';
				}
				// " を "" に置換
				var result = innerValue.replace(/"/g, '""');
				// , 又は \n　を含んでいる場合は ""で囲う
				if (result.search(/("|,|\n)/g) >= 0)
					result = '"' + result + '"';
				if ( j != 0 ) line += ",";
				line += result;
				j ++;
			//}
			});
			console.log(">" + line);
			line += '\n';
			csv_data += line;
		}
		// 頭にbomコードを付けた
		var csv_data_sjis = "\uFEFF" + csv_data;
		return csv_data_sjis;
	}
}
```