グリッド直接編集拡張版
グリッド直接編集サンプルは以前ご紹介したけど、今度はもうちょっと高機能なものもできるというサンプルです。
だがその前に！！
実はjqGrid 3.5にはちょっとしたバグがあって上手く動きません。なので、jqGridのソースを修正するところから始まります。(これのおかげで3時間潰れました・・・)
grid.common.js の270行目付近で、リストボックス(selectタグ)を作成してるのですが、ここで、multiselect 属性を付けなければなりません。本家サイトに一応報告してあります。次のバージョンで直ってくれてればいいなぁ。
case "select" :
elem = document.createElement("select");
var msl = options.multiple===true ? true : false;
// 09/09/16 added by shima
if(msl) elem.multiple = true;
んで、これがサンプル
今回はjqGridのソースを修正したので、loader でjqGridのソースを読み込みます。以前、デバッグの方法として紹介したやつですね。
ちなみに、編集用のパーツとしては
- 普通のテキスト
- 改行ありテキスト
- パスワード入力用のテキスト
- 単一選択リストボックス
- 複数選択リストボックス
- 2択として使用するチェックボックス
が用意されてます。ラジオボタンは無いです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拡張編集サンプル</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery.searchFilter.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/grid.loader.js"></script>
<script type="text/javascript">
var last_id = null;
jQuery(document).ready(function()
{
jQuery("#list").jqGrid({
datatype: "local",
colNames:['従業員番号', '名前', 'パスワード', 'メモ', '部署', '趣味', '性別'],
colModel:[
{name:'employee_no', editable:true, edittype:"text"},
{name:'name' , editable:true, edittype:"text"},
{name:'password' , editable:true, edittype:"password"},
{name:'memo' , editable:true, edittype:"textarea", editoptions:{rows:"3",cols:"10"}},
{name:'dept' , editable:true, edittype:"select" , editoptions:{multiple: false, value:"business:営業;development:開発;deskwork:事務"}},
{name:'hobby' , editable:true, edittype:"select" , editoptions:{multiple: true, value:"tennis:テニス;soccer:サッカー;baseball:野球"}},
{name:'sex' , editable:true, edittype:"checkbox", editoptions:{value:"男:女"}},
],
// 行がクリックされたら編集状態にする
onSelectRow: function(id)
{
if(id && id!==last_id)
{
jQuery('#list').saveRow(last_id, function(){alert("更新成功"); return true;}, location.href);
jQuery('#list').editRow(id);
last_id=id;
}
},
caption: '拡張編集オプションを使用する'
});
var mydata = [
{employee_no:"1",name:"test1", password:"pass1", memo:"改行も\nOKです", dept:"営業", hobby:"テニス,サッカー", sex:"男"},
{employee_no:"2",name:"test2", password:"pass2", memo:"改行も\nOKです", dept:"開発", hobby:"野球", sex:"女"},
{employee_no:"3",name:"test3", password:"pass3", memo:"改行も\nOKです", dept:"事務", hobby:"", sex:"男"},
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list").addRowData(undefined,mydata[i]);
});
</script>
</head>
<body>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
</body>
</html>
