使用 angularjs 和剑道网格,我试图在选择网格中的复选框时调用一个函数。但无论我做什么,在 ng-click 中都没有发生任何事情,甚至不会引发错误。我在调用的方法顶部添加了 console.log() ,但没有显示任何内容。我试图在范围内的服务中添加方法,也直接在范围内。
基本上我的问题是如何在剑道网格单元模板中使用 ng-click 复选框?
这是网格绑定代码:
var cols = this.GetGridColumns(uiConfig.GridColumns);
var grid = $("#kGrid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
schema: {
data: "data",
total: "total",
model: {
id: "relatedEntityID"
}
},
pageSize: 10,
transport: {
read: function(options) {
/* read from service */
}
}
},
columns: cols,
scrollable: false,
pageable: { "refresh": true, "pageSizes": true },
sortable: true,
filterable: true,
selectable: "multiple",
change: () => this.onChange()
});
这是定义
GetGridColumns(columns: Array<servicePath.SLF.solutionEngine.Model.Admin.GridColumn>): any
{
var colHeader = new Array();
colHeader.push({
template: '<input type="checkbox" id="cbItem" class="checkbox" ng-click="genericServices.selectRow(\'kGrid\', $event)" />',
headerTemplate: '<input type="checkbox" id="check-all" ng-click="genericServices.ToggleCheckAllInGrid(\'#kGrid\', $event)" />',
width: '30px'});
var column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();
for (var j=0 ; j < columns.length; j++)
{
column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();
column.Field = columns[j].BindingName;
column.Title = columns[j].BindingName;
column.ColumnType = columns[j].GridColumnType;
column.HorizontalAlignment = columns[j].HorizontalAlignment;
column.LocalizedName = columns[j].LocalizedLabel;
colHeader.push({ title: column.Name, field: columns[j].BindingName, template: column.Template } );
}
return colHeader;
}
在上面的代码中,标题模板中的 genericServices.ToggleCheckAllInGrid 工作得很好。
这是 genericServices 的定义。
this.selectRow = function (gridId: string, e: any): void {
gridId = '#' + gridId;
console.log(gridId);
var elem = angular.element(e.currentTarget);
var row = elem.closest("tr");
var checked = elem.prop('checked');
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
};