将列附加为wijmogr​​id的复选框

时间:2015-05-13 10:35:46

标签: angularjs wijmo

我有数据,我绑定到wijmogr​​id。但是我想为wijmogr​​id添加一个额外的列作为每行的复选框。我的数据对此没有任何价值。我的数据只有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>

1 个答案:

答案 0 :(得分:1)

我认为在此链接上回复了同样的内容: http://wijmo.com/topic/add-checkbox-to-flexgrid-where-there-is-no-data-to-bind-using-angular/

如果您有任何其他问题,请告诉我