Angularjs 如何有条件地将样式应用于剑道UI网格';第';行;?
我的角度页面有以下剑道UI网格选项:Angularjs 如何有条件地将样式应用于剑道UI网格';第';行;?,angularjs,kendo-ui,kendo-grid,Angularjs,Kendo Ui,Kendo Grid,我的角度页面有以下剑道UI网格选项: ctrl.gridOptions = { rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\'? \"approved\" : \"unapporved\"#"></tr>', //rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus
ctrl.gridOptions = {
rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\'? \"approved\" : \"unapporved\"#"></tr>',
//rowTemplate: '<tr data-uid="#: uid #" class="#:ApprovalStatus=\'Approved\' ? \'approved\' : \'unapproved\' #"><td>#:ProcessName #</td><td>#:TradeAmount #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>',
dataSource: {
type: 'json',
transport: {
read: function (options) {
DataSvc.getTradesData().then(function (response) {
options.success(response.data);
}, function (response) {
alert('something went wrong')
console.log(status);
});
}
},
schema: {
model: {
fields: {
IsChecked: { type: "boolean" },
ProcessName: { type: "string" },
TradeAmount: { type: "number" },
ApprovalStatus: { type: "string" }
}
}
},
},
selectable: "row",
sortable: true,
columns: [
{ field: "IsChecked", width: "30px", title: " ", template: '<input ng-disabled="dataItem.ApprovalStatus" ng-model="dataItem.IsChecked" type="checkbox" />', filterable: false, headerTemplate: '<input type="checkbox" ng-click="ctrl.checkAllTrades()" ng-model="ctrl.tradesChecked">' },
{ field: "ProcessName", title: "Process Name", width: "190px", filterable: { cell: { showOperators: false, template: processNameDropDownEditor } }, template: '<a style="font-size: x-normal;" href="#=Link#">{{dataItem.ProcessName}}</a>', attributes: { style: "text-align:left;" } },
{ field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } },
{ field: "ApprovalStatus", title: "Approval Status", width: "150px", filterable: { cell: { showOperators: false, template: approvalStatusDropDownEditor } } }
],
filterable: { mode: "row" },
height: 550,
};
所以问题是,当我应用行模板时,网格呈现为空。当我应用注释行模板时,网格将与行一起渲染,但仅应用“approved”样式,如下所示:
如何根据数据绑定字段上的条件将样式应用于每个TR?此外,当应用注释行模板时,列显示不正确,我们如何解决这一问题
更新:
下面的行模板有助于解决背景色问题。但仍然无法修复列对齐问题
rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved: \'#:ApprovalStatus#\' ==\'Approved\', unapproved: \'#:ApprovalStatus#\' ==\'Unapproved\'}"><td>#:ProcessName #</td><td>#:Account #</td><td>#:AQRID #</td><td>#:ApprovalStatus #</td></tr>',
rowTemplate:“#:进程名##:帐户##:AQRID##:批准状态#”,
您需要在此处使用ng class
指令
rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved : #:ApprovalStatus# ==\'Approved\', unapporved: #:ApprovalStatus# !=\'Approved\'></tr>'
rowTemplate:“您可以检查此项,
希望它能帮上忙……谢谢,但我必须对上面的代码进行一些更改才能使其正常工作。我已经用新的代码更新了这个问题。但是,另一个问题是列本身没有与标题对齐。知道如何修复吗?@Lucifer尝试在每个td上应用一些css类。你可能需要修复列的宽度。@@pankajparkar,你是在告诉我取消rowTemplate并在每个列上应用ng类吗??如果有一种直接的方法可以在TR上应用样式,那么就不需要它了。我的实际网格中大约有10列,我必须在每个列上应用ng类。@Lucifer不,我告诉你在每个列上应用css规则。。就像这里你可以做。批准的TR>td,.未批准的TR>td{/*css here*/}
您在每一行上都有控制器,使用已批准的和未批准的使用css规则思考它们。您可以给我一个剑道UI列定义的示例。我确实引用了该链接…但它也需要TD…如果我们在行模板中指定TD,则标题对齐会受到干扰。
rowTemplate: '<tr data-uid="#: uid #" ng-class="{approved : #:ApprovalStatus# ==\'Approved\', unapporved: #:ApprovalStatus# !=\'Approved\'></tr>'