我有数据,我绑定到wijmogrid。但是我想为wijmogrid添加一个额外的列作为每行的复选框。我的数据对此没有任何价值。我的数据只有3列被绑定到网格。我希望每行都有一个带有复选框的第4列。
我尝试过用过 flex.columns.addnew但没有附加列的属性
我的代码:
Angular JS
function getData() {
return [
{ Col1: 'QA', Col2: 1, Col3: true },
{ Col1: 'Dev', Col2: 0, Col3: true },
{ Col1: 'UAT', Col2: 2, Col3: false },
{ Col1: 'Prod', Col2: 3, Col3: false }
];
}
$scope.data = getData();
// formatter to add checkboxes to boolean columns
$scope.itemFormatter = function (panel, r, c, cell) {
//$scope.itemFormatter = function (args) {
if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
var flex = panel.grid;
var col = flex.columns[c];
// check that this is a boolean column
if (col.dataType == wijmo.DataType.Boolean)
{
// prevent sorting on click
col.allowSorting = false;
// count true values to initialize checkbox
var cnt = 0;
for (var i = 0; i < flex.rows.length; i++) {
if (flex.getCellData(i, c) == true) cnt++;
}
// create and initialize checkbox
cell.innerHTML = '<input type="checkbox"> ' + cell.innerHTML;
var cb = cell.firstChild;
cb.checked = cnt > 0;
cb.indeterminate = cnt > 0 && cnt < flex.rows.length;
// apply checkbox value to cells
cb.addEventListener('click', function (e) {
flex.beginUpdate();
for (var i = 0; i < flex.rows.length; i++) {
flex.setCellData(i, c, cb.checked);
}
flex.endUpdate();
});
}
}
}
HTML
wj-flex-grid items-source="data" item-formatter="itemFormatter">
<wj-flex-grid-column header="Col1" binding="Col1"></wj-flex-grid-column>
<wj-flex-grid-column header="Col2" binding="Col2"></wj-flex-grid-column>
<wj-flex-grid-column header="Col3" binding="Col3"></wj-flex-grid-column>
<wj-flex-grid-column header="Select" dataType="Boolean"></wj-flex-grid-column>
</wj-flex-grid>
答案 0 :(得分:1)
我认为在此链接上回复了同样的内容: http://wijmo.com/topic/add-checkbox-to-flexgrid-where-there-is-no-data-to-bind-using-angular/
如果您有任何其他问题,请告诉我