- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 kogrid 显示数据,如下所示:
我的 knockout 虚拟机对 MVC Controller 进行 ajax 调用,以检索形状如下的 DTO:
我想将具有验证失败的值的单元格背景涂成红色。例如,数据数组的第一个元素包含值为“False”的“CostCentreIsValid”成员,因此我希望第一行的“Cost Center (Dim1)”列为红色。对于同一数组元素,“AccountIsValid”成员包含值“True”,因此我希望第一行的“GL Account(帐户)”单元格为绿色。
knockout View 模型:
"use strict";
function ViewModel(interchangeId) {
var edited = function (interchangeId, accountIsValid, costCentreIsValid, supplierIsValid, supplierNo, invoiceNo, costCentre, glAccount, amount, invoiceDesc, originalRec) {
var self = this;
// Properties
self.interchangeId = interchangeId;
self.supplierNo = ko.observable(supplierNo);
self.invoiceNo = ko.observable(invoiceNo);
self.costCentre = ko.observable(costCentre);
self.glAccount = ko.observable(glAccount);
self.amount = ko.observable(amount);
self.invoiceDesc = ko.observable(invoiceDesc);
self.originalRec = originalRec;
}
var editBatchVm = function () {
var self = this;
var $loadingIndicator = $('#loading-indicator');
// Properties
self.recs = ko.observableArray([]);
self.selected = ko.observableArray();
var textEditTemplate = '<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[$data.field]" /><span data-bind=\"visible: !$parent.selected(), text: $parent.entity[$data.field]\"></span></div>';
self.columnDefs = [
{ width: 100, field: 'supplierNo', displayName: 'Supplier No', cellTemplate: textEditTemplate },
{ width: 150, field: 'invoiceNo', displayName: 'Invoice No' },
{ width: 150, field: 'costCentre', displayName: 'Cost Centre (Dim1)', cellTemplate: textEditTemplate },
{ width: 200, field: 'glAccount', displayName: 'GL Account (Account)', cellTemplate: textEditTemplate },
{ width: 100, field: 'amount', displayName: 'Amount' },
{ width: 300, field: 'invoiceDesc', displayName: 'Invoice Description' },
];
self.filterOptions = {
filterText: ko.observable(""),
useExternalFilter: false
};
self.pagingOptions = {
currentPage: ko.observable(1),
pageSizes: ko.observableArray([10, 20, 50]),
pageSize: ko.observable(10),
totalServerItems: ko.observable(0)
};
self.sortInfo = ko.observable({ column: { 'field': 'TimeReceived' }, direction: 'desc' });
self.gridOptions = {
data: self.recs,
columnDefs: self.columnDefs,
autogenerateColumns: false,
showGroupPanel: true,
showFilter: true,
filterOptions: self.filterOptions,
enablePaging: true,
pagingOptions: self.pagingOptions,
sortInfo: self.sortInfo,
rowHeight: 35,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
};
self.batchId = ko.observable();
// Methods
self.get = function () {
$loadingIndicator.show();
$.ajax({
url: BASE_URL + 'EditBatch/GetRecords',
type: 'get',
data: {
'interchangeId': interchangeId
},
contentType: 'application/json; charset=utf-8',
success: function (data) {
var recsArray = [];
$.each(data, function (key, value) {
recsArray.push(
new edited(
interchangeId,
value.AccountIsValid,
value.CostCentreIsValid,
value.SupplierIsValid,
value.Transaction.Voucher[0].Transaction[0].ApArInfo.ApArNo,
value.Transaction.Voucher[0].Transaction[0].ApArInfo.InvoiceNo,
value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Dim1,
value.Transaction.Voucher[0].Transaction[0].GLAnalysis.Account,
value.Transaction.Voucher[0].Transaction[0].Amounts.Amount,
value.Transaction.Voucher[0].Transaction[0].Description,
value.Transaction
)
);
});
self.recs(recsArray);
//batch level info
self.pagingOptions.totalServerItems(data.length);
self.batchId(data[0].BatchId);
}
});
$loadingIndicator.hide();
};
self.resubmit = function () {
var data = { Recs: ko.toJS(this.recs) };
$.ajax({
type: "POST",
url: BASE_URL + 'EditBatch/Resubmit',
data: ko.toJSON(data),
contentType: 'application/json',
async: true,
success: function (data) {
window.location = BASE_URL + 'APInvoicesSummary/Index';
},
error: function (data) {
toastrs(false);
}
});
}
// Subscriptions
self.pagingOptions.pageSize.subscribe(function (data) {
self.pagingOptions.currentPage(1);
self.get();
});
self.pagingOptions.currentPage.subscribe(function (data) {
self.get();
});
self.sortInfo.subscribe(function (data) {
self.pagingOptions.currentPage(1);
self.get();
});
//self.gridOptions.selectedItems.subscribe(function (data) {
// if (data.length > 0) {
// self.date(data[0].date);
// self.voucherNo(data[0].voucherNo);
// self.description(data[0].description);
// self.amount(data[0].amount);
// }
//});
}
/////////////////////////////////////////////////////////////////
// Let's kick it all off
var vm = new editBatchVm();
ko.applyBindings(vm, $("#KoSection")[0]);
vm.get();
};
有人遇到过如何执行此操作的示例吗?
最佳答案
您可以bind the style :
<li data-bind="style: { color: !AccountIsValid() ? 'red' }">
或者bind the css :
<li data-bind="css: { failed--account: !AccountIsValid() }">
然后在您的样式表中:
failed--account {
color: red;
}
<小时/>
注释
我假设您的数据位于模型中,并且 AccountIsValid
是可观察的,如果已绑定(bind)但不可观察,只需删除括号 color: !AccountIsValid
。
如果您的数据未绑定(bind),您可以通过data[0].AccountIsValid
访问它...但我建议绑定(bind)它。
关于javascript - KO 网格单元格的条件格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42911134/
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过,似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”?例如,假设表单字段输入了无效值? 最佳答案 使用 CSS3 类似 on this page ,您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包,但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没,您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后,我重新编码我的 CSS 样式,例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div,一个在另一个里面。当我将鼠标悬停 到最外面的那个时,我想改变它的颜色,没问题。但是,当我将鼠标悬停 到内部时,我只想更改它的颜色。这可能吗?换句话说,当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗?我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时,是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )?或者你可以说我想以 Bott
我有以下代码,用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时,它会更改左右图像。 在我测试的所有浏览器中都运行良好,Safari 4 除外。据我收集的信息,Safari 4 支持
我构建了某种 CMS,但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面,其中概述了一个 div,如果用户单击该 div,他们可以从模态中选择图像。该图像被插入到一个
出于某种原因,当我设置一个过渡时,当我的鼠标悬停在一个元素上时,背景会改变颜色,它只适用于一个元素,但它们都共享同一个类?任何帮助我的 CSS .outer_ad { position:rel
好吧,这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它,但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀!