2

我在剑道网格中有复选框。一旦我点击复选框，它总是关注 Kendo Grid 中的顶部单元格。下面是剑道网格的代码，我在剑道网格中的复选框单击事件上绑定到复选框值

    $("#contactgrid").on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#contactgrid').data().kendoGrid;
            var rowIdx = $("tr", grid.tbody).index(row);
            var colIdx = $("td", row).index(this);
            // grid.tbody.find("tr").eq(rowIndex).foucs(); This doesn't work
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsSelected', checked);
    });

我可以在单击事件中获取行索引和单元格索引，但我无法弄清楚要关注特定的单元格。谢谢！

4

2 回答 2

1

当您想使用复选框编辑 Grid 时，我建议您使用此代码库中的方法。无论它使用 MVC 扩展打开 Views/Home/Index.cshtml 并查看模板是如何定义的以及初始化网格后使用的 javascript。

这是列模板：

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
            .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);


<script type="text/javascript">
    $(function () {
        $('#persons').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#persons').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsAdmin', checked);
        })
    })

    function checkAll(ele) {
        var state = $(ele).is(':checked');
        var grid = $('#persons').data().kendoGrid;
        $.each(grid.dataSource.view(), function () {
            if (this['IsAdmin'] != state) 
                this.dirty=true;
            this['IsAdmin'] = state;
        });
        grid.refresh();
    }

</script>
于 2013-11-08T16:13:53.243 回答
0

我为此苦苦挣扎。我必须重新调整单元格，如下所示。Kendo 网格客户端 API 有很大的改进空间。希望我下面的辅助方法可以帮助人们。

var $row = getRowForDataItem(this);
var $current = getCurrentCell($row);
var currentCellIndex = $row.find(">td").index($current);

this.set('PriceFromDateTime', resultFromDate);

$row = getRowForDataItem(this);
var grid = getContainingGrid($row);

//select the previously selected cell by it's index(offset) within the td tags
if (currentCellIndex >= 0) {
    grid.current($row.find(">td").eq(currentCellIndex));
}


//Kendo grid helpers
function getColumn(grid, columnName) {
    return $.grep(grid.columns, function (item) {
        return item.field === columnName;
    })[0];
}

function getRowForDataItem(dataItem) {
    return $("tr[data-uid='" + dataItem.uid + "']");
}

function getCurrentCell($elem) {
    return getContainingGrid($elem).current();
}

function getContainingDataItem($elem) {
    return getDataItemForRow(getContainingRow($elem));
}

function getContainingCell($elem) {
    return $elem.closest("td[role='gridcell']");
}

function getContainingRow($elem) {
    return $elem.closest("tr[role='row']");
}

function getContainingGrid($elem) {
    return $elem.closest("div[data-role='grid']").data("kendoGrid");
}

function getGridForDataItem(dataItem) {
    return getContainingGrid(getRowForDataItem(dataItem));
}

function getDataItemForRow($row, $grid) {
    if (!$grid) $grid = getContainingGrid($row);
    return $grid.dataItem($row);
}

function getMasterRow($element) {
    return $element.closest("tr.k-detail-row").prev();
}

function getChildGridForDataItem(dataItem) {
    return getRowForDataItem(dataItem).next().find("div.k-grid").data("kendoGrid");
}

function getMasterRowDataItem($element) {
    var $row = getMasterRow($element);
    return getDataItemForRow($row);
}
于 2013-11-08T20:12:07.553 回答