今回は w2ui.grid のセルの編集設定の方法について説明します。
セルに対して入力出来る様に編集の種類を設定する場合は、グリッドのカラム宣言である columns プロパティの中の editable プロパティで行います。
■editable の内部プロパティについて
| プロパティ | プロパティ名 | 説明 |
|---|---|---|
| type | 編集タイプ | 宣言できるタイプは以下の通りです。
|
| min | 入力最小値 | 数値項目で有効 |
| max | 入力最大値 | 数値項目で有効 |
| precision | 小数点以下桁数 | precision:NN (NNは小数点以下の桁数) 数値項目で有効 |
| items | 選択肢配列 | items:items_array (items_arrayは静的変数の配列データ) <例> var items_array = [ {id:1, text:"text1"}, {id:2, text:"text2"}, {id:3, text:"text3"} ] list、combo、select で有効 |
| style | セルのスタイル | <td> タグに追加するスタイル |
| format | 日付セルの書式 | <例> format:yyyy.mm.dd |
この editable を使った簡単な例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid - editable</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
<div id="grid" style="width: 600px; height: 240px;"></div>
<br>
<button class="w2ui-btn" onclick="showChanged()">変更データ表示</button>
<script>
// 性別データ
var arrSex = [ {id:1, text:"男性"}, {id:2, text:"女性"} ];
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'recid' , caption: 'ID' , size: '50px' , attr: "align=center", frozen: true },
{ field: 'check' , caption: '対象' , size: '60px' ,
editable: { type:"checkbox" }
},
{ field: 'name' , caption: '名前' , size: '100px' ,
editable: { type:"text" }
},
{ field: 'age' , caption: '年齢' , size: '60px' ,
editable: { type:"int", min: 10, max: 99 }
},
{ field: 'sex' , caption: '性別' , size: '100px' ,
editable: { type:"select", items: arrSex } ,
render: function (record, index, col_index) {
var html = '';
for (var idx in arrSex) {
if (arrSex[idx].id == this.getCellValue(index, col_index)) {
html = arrSex[idx].text;
}
}
return html;
}
},
{ field: 'birth' , caption: '生年月日', size: '100px' , render: 'date:yyyy/mm/dd',
editable: { type:"date", format: "yyyy/mm/dd" }
},
{ field: "height", caption: "身長" , size: "50px" , render : "float:1",
editable: { type:"float", min: 1, max: 999.9 }
},
{ field: "weight", caption: "体重" , size: "50px" , render : "float:1",
editable: { type:"float", min: 1, max: 999.9 }
}
],
records: [
{ recid:1, check:true , name:"田中太郎", age:"35", sex:"1", birth:"1985/03/01", height:"170.1", weight:"48.5" },
{ recid:2, check:true , name:"田中花子", age:"30", sex:"2", birth:"1990/03/12", height:"160.0", weight:"45.0" },
{ recid:3, check:true , name:"山田一郎", age:"20", sex:"1", birth:"2000/03/13", height:"165.1", weight:"58.5" },
{ recid:4, check:false, name:"山田二郎", age:"18", sex:"1", birth:"2002/03/24", height:"172.5", weight:"68.2" },
{ recid:5, check:true , name:"山田良子", age:"25", sex:"2", birth:"1995/03/25", height:"158.0", weight:"47.0" },
{ recid:6, check:false, name:"山本桃子", age:"40", sex:"2", birth:"1980/03/26", height:"162.2", weight:"49.5" },
{ recid:7, check:true , name:"山本次郎", age:"44", sex:"1", birth:"1976/03/27", height:"168.5", weight:"62.1" },
{ recid:8, check:true , name:"阿部博" , age:"48", sex:"1", birth:"1972/03/28", height:"180.4", weight:"75.2" }
]
});
});
function showChanged() {
console.log(w2ui['grid'].getChanges());
w2alert('コンソールに変更データを表示しました');
}
</script>
</body>
</html>
※「生年月日」の render の書式と editable 内の書式（format）を同じにしないと、カレンダーで変更後の表示がおかしくなります。
これを実行させると以下の様な表示になります。 （結構簡単にグリッドによるデータ表示が実現できると思います）
このグリッドの中で６行目の対象チェックボックスと性別、７行目の性別を変更し、変更データをコンソールに表示させてみると以下の様に配列データとして取得できます。 尚、性別データは文字列では無く ID の値が返されるのが分かります。
この性別のセルで注目点は render の関数宣言です。関数の引数としては以下の様になっています。
render: function(record, [index], [column_index]) { } <引数> ・record：対象レコード ・index ：対象レコードのインデックス値 ・column_index：対象レコード内のカラムインデックス値
性別のセルの処理では現在のセルの値が arrSex の配列の中で同じ id のものが見つかった時に対応する text の値を表示させています。
PR
コメント