Kendo UI 网格复选框单击获取数据项答案

【问题标题】：Kendo UI grid Checkbox click get data itemKendo UI 网格复选框单击获取数据项
【发布时间】：2015-07-27 06:57:34
【问题描述】：

我正在使用 Kendo + angularJS，当我单击复选框时，我有带有复选框的网格，我需要获取当前行数据项。问题是当我单击复选框时，我无法自动选择行。 Previoulsy 我使用的是 Kendo UI v2014.1.416。在该版本中，当我单击复选框时，当前行被选中，但升级到 Kendo UI v2015.2.624 后它无法正常工作

<div class="filterProductGridHeight" kendo-grid="filterProductGrid"
                             k-grid-content='{"overflow":scroll}'
                             id="filterProductGrid"
                             k-sortable="true"
                             k-data-source="filterProductDataSource"
                             k-pageable='{  "pageSizes":true }'
                             @*k-filterable="true"*@
                             k-selectable="true"
                             k-columns='filterProductGridColumns'
                             k-on-change="selectedFilterProduct=dataItem"
                             k-on-data-bound="productSearchGridDataBound(kendoEvent)">
                        </div>

在控制器中

$scope.filterProductGridColumns = [
        { field: "ShortDescription", title: "Short Description" },
        { field: "LongDescription", title: "Long Description" },
        { field: "Barcode", title: "Barcode" },
         {
             template: function (dateItem) {
                 return "<span class='fa fa-circle redColorCode' title='Red'>&nbsp;&nbsp;</span><span class='fa fa-circle greenColorCode' title='Green'></span>&nbsp;&nbsp;<span class='fa fa-circle blueColorCode' title='Blue'></span>"
                 //$scope.isChecked ? "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-checked= '" + dateItem.IsProductValid + "&& isChecked'  ng-disabled='" + !dateItem.IsProductValid + "'/>" :
                 //    "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-disabled='" + !dateItem.IsProductValid + "'/>";
             }, title: "Item Order Status"

         },
        {
            template: function (dateItem) {
                return $scope.isChecked ? "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-checked= '" + dateItem.IsProductValid + "&& isChecked'  ng-disabled='" + !dateItem.IsProductValid + "'/>" :
                    "<input type='checkbox' ng-click='chkClick($event, selectedFilterProduct)' id='checkbox' class='checkbox'  ng-disabled='" + !dateItem.IsProductValid + "'/>";
            },
            title: "<input id='checkAllProduct' ng-model='chkAllFilterProductGrid' type='checkbox' class='check-box' ng-change='chkAllProductClick()'/> Select All"
        }];



 $scope.chkClick = function ($event, selectedFilterProduct) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        var selectedIndex = GetArrayIndexByPropertyvalue($scope.filterProductDataSource.data, "Id", selectedFilterProduct.Id);
        if (selectedIndex != -1) {
            var selectedData = $scope.filterProductDataSource.data[selectedIndex];
            updateFilterProductList(action, selectedData);
        }
    };

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

您可以使用 jquery 先选择特定行，然后从所选行中获取值

HTML

<input type="checkbox" id="something" ngclick-'chkClick($event, selectedFilterProduct,this)'

在 Javascript 中：-

$scope.chkClick = function ($event, selectedFilterProduct,checkbox) {
if ($(checkbox).closest("tr").hasClass("k-state-selected")) {
            $(checkbox).closest(tableRow).removeClass("k-state-selected")
        }
        else {
            $(checkbox).closest(tableRow).addClass("k-state-selected")
        }

////code to get the dataItem as the row is already selected now

}

【讨论】：