作成日: 2015/08/03 最終更新日: 2015/08/18
文書種別
使用方法
詳細
ItemFormatterプロパティに設定したJavaScript関数において、セルをカスタマイズすることができます。このサンプルではヘッダにチェックボックスを配置します。このヘッダのチェックボックスをチェックすると同列に配置されているチェックボックスを一括でチェック状態とします。
◎サンプルコード(JavaScript)
◎サンプルコード(ビュー/VB)
◎サンプルコード(ビュー/C#)
◎サンプルコード(JavaScript)
function checkboxFormatter(panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
var flex = panel.grid;
var col = flex.columns[c];
// booleanカラムかどうかを確認します
if (col.dataType == wijmo.DataType.Boolean) {
// クリックによるソートを抑止します
col.allowSorting = false;
// チェックボックスを初期化するためにtrueの値をカウントします
var cnt = 0;
for (var i = 0; i < flex.rows.length; i++) {
if (flex.getCellData(i, c) == true) cnt++;
}
// チェックボックスを作成し、初期化します
cell.innerHTML = '<input type="checkbox"> ' + cell.innerHTML;
var cb = cell.firstChild;
cb.checked = cnt > 0;
cb.indeterminate = cnt > 0 && cnt < flex.rows.length;
// セルにチェックボックスを適用します
cb.addEventListener('click', function (e) {
flex.beginUpdate();
for (var i = 0; i < flex.rows.length; i++) {
flex.setCellData(i, c, cb.checked);
}
flex.endUpdate();
});
}
}
}
if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
var flex = panel.grid;
var col = flex.columns[c];
// booleanカラムかどうかを確認します
if (col.dataType == wijmo.DataType.Boolean) {
// クリックによるソートを抑止します
col.allowSorting = false;
// チェックボックスを初期化するためにtrueの値をカウントします
var cnt = 0;
for (var i = 0; i < flex.rows.length; i++) {
if (flex.getCellData(i, c) == true) cnt++;
}
// チェックボックスを作成し、初期化します
cell.innerHTML = '<input type="checkbox"> ' + cell.innerHTML;
var cb = cell.firstChild;
cb.checked = cnt > 0;
cb.indeterminate = cnt > 0 && cnt < flex.rows.length;
// セルにチェックボックスを適用します
cb.addEventListener('click', function (e) {
flex.beginUpdate();
for (var i = 0; i < flex.rows.length; i++) {
flex.setCellData(i, c, cb.checked);
}
flex.endUpdate();
});
}
}
}
◎サンプルコード(ビュー/VB)
@(Html.C1().FlexGrid(Of Sale)() _
.AutoGenerateColumns(False) _
.Bind(Function(bl) bl.Bind(Model)) _
.Columns(
Function(bl)
bl.Add(Function(cb) cb.Binding("ID"))
bl.Add(Function(cb) cb.Binding("Country"))
bl.Add(Function(cb) cb.Binding("Product"))
bl.Add(Function(cb) cb.Binding("Color"))
bl.Add(Function(cb) cb.Binding("Amount").Format("c"))
bl.Add(Function(cb) cb.Binding("Active"))
End Function
) _
.ItemFormatter("checkboxFormatter")
)
.AutoGenerateColumns(False) _
.Bind(Function(bl) bl.Bind(Model)) _
.Columns(
Function(bl)
bl.Add(Function(cb) cb.Binding("ID"))
bl.Add(Function(cb) cb.Binding("Country"))
bl.Add(Function(cb) cb.Binding("Product"))
bl.Add(Function(cb) cb.Binding("Color"))
bl.Add(Function(cb) cb.Binding("Amount").Format("c"))
bl.Add(Function(cb) cb.Binding("Active"))
End Function
) _
.ItemFormatter("checkboxFormatter")
)
◎サンプルコード(ビュー/C#)
@(Html.C1().FlexGrid<Sale>()
.AutoGenerateColumns(false)
.Bind(bl => bl.Bind(Model))
.Columns(bl =>
{
bl.Add(cb => cb.Binding("ID"));
bl.Add(cb => cb.Binding("Country"));
bl.Add(cb => cb.Binding("Product"));
bl.Add(cb => cb.Binding("Color"));
bl.Add(cb => cb.Binding("Amount").Format("c"));
bl.Add(cb => cb.Binding("Active"));
})
.ItemFormatter("checkboxFormatter")
)
.AutoGenerateColumns(false)
.Bind(bl => bl.Bind(Model))
.Columns(bl =>
{
bl.Add(cb => cb.Binding("ID"));
bl.Add(cb => cb.Binding("Country"));
bl.Add(cb => cb.Binding("Product"));
bl.Add(cb => cb.Binding("Color"));
bl.Add(cb => cb.Binding("Amount").Format("c"));
bl.Add(cb => cb.Binding("Active"));
})
.ItemFormatter("checkboxFormatter")
)
旧文書番号
81414