Ext.grid.EditorGridで表形式編集2
Ｅｘｔ2で試してみました。前の連載よりシンプルにしてあります。
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="adapter/jquery/jquery-plugins.js"></script>
<script type="text/javascript" src="adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<br />
<a href="#" id="recordadd">行追加</a><br />
<a href="#" id="recordput">保存する</a><br />
<br />
<div id="panelgrid"></div>
<script language="JavaScript" type="text/javascript">
var store;
var grid;
$(function(){
//データレコード設定
var record = Ext.data.Record.create([
{name:"data[Doc][id]", type: 'int'},
{name:"data[Article][title]", type: 'string'},
{name:"data[Article][user_id]", type: 'int'},
{name:"data[Article][modified]", type: 'string'}
]);
//サンプルデータ
var myData = [
[1,'title1',10,'2007-1-11 00:01:00'],
[2,'title2',20,'2007-1-12 00:01:00'],
[3,'title3',30,'2007-1-13 00:01:00'],
[4,'title4',40,'2007-1-14 00:01:00'],
[5,'title5',50,'2007-1-15 00:01:00']
];
//データストア
store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, record)
});
/*
//JSONでデータを得る場合
var record = Ext.data.Record.create([
{name:"data[Doc][id]", mapping:'Doc.id', type: 'int'},
{name:"data[Article][title]", mapping:'Article.title', type: 'string'},
{name:"data[Article][user_id]", mapping:'Article.user_id', type: 'int'},
{name:"data[Article][modified]", mapping:'Article.modified', type: 'string'}
]);
store = new Ext.data.JsonStore({
url: '', //<<取得元アドレス設定
root: '',
fields: Record
});
*/
//Grid内列設定
var cm = new Ext.grid.ColumnModel([
{header:"id",width:75,dataIndex:'data[Doc][id]'},
{header:"件名",width:75,dataIndex:'data[Article][title]',
editor: new Ext.form.TextField({allowBlank: false})},
{header:"ユーザ",width:75,dataIndex:'data[Article][user_id]'},
{header:"更新日",width:75,dataIndex:'data[Article][modified]'}
]);
//EditorGrid設定
var grid = new Ext.grid.EditorGridPanel({
height:480,
renderTo: 'panelgrid',
cm: cm,
clicksToEdit:1,
store:store,
stripeRows:true
});
store.loadData(myData);
// store.load(); // JSONでデータを得る場合
//新規行追加
$('#recordadd').click(function(){
var rc = new record({
'data[Article][title]': '',
'data[Article][user_id]': '',
'data[Article][modified]': ''
});
grid.stopEditing();
store.insert(0, rc);
grid.startEditing(0, 0);
});
//保存
$('#recordput').click(function(){
//更新行を取得する
var mrs = store.getModifiedRecords();
//更新レコードをループする
$.each(mrs, function(i) {
//idがある場合、アップデート。ない場合、インサートする
if(this.data['data[Doc][id]']) {
$.post("", this.data); //<<保存先アドレス設定
} else {
$.post("", this.data); //<<保存先アドレス設定
}
});
});
});
</script>
</body>
</html>