单元格编辑后的SlickGrid样式 [英] SlickGrid styling after cell edit
问题描述
我正在将SlickGrid(2.0)dataView与slick.editors结合使用。在网格中,用户可以编辑任意数量的单元格,然后修改基础网格数据,以便在网格滚动时保留编辑内容。这很好。但我也想为所有编辑提供视觉反馈,因为只有在用户单击保存编辑按钮之前,这些编辑才会保存到数据库中。
I'm using SlickGrid (2.0) dataView with slick.editors. In the Grid, a user can edit any number of cells which then modifies the underlying grid data so that the edits are maintained when the grid scrolls. This works great. But I also want to provide visual feedback for all the edits since these are not saved to the database until user hit "Save Edits" button.
问题是编辑器方法在读回更改的网格数据后会重置单元格。我需要保持背景颜色的更改以表明它已被编辑。有人能做到这一点吗?
Problem is that the editor method resets the cell after it reads back the changed grid data. I need to maintain a background color change to indicate that it's been edited. Has anyone been able to do this?
以下是相关代码(简单的整数编辑器):
Here is the relevent code (simple Integer editor):
function IntegerCellEditor(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function() {
$input = $("<input type=text class='edited' type=text style='font:normal 12px arial; width:95px; text-align:right; border:none;' />");
$input.bind("keydown.nav", function(e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
});
$('#saveChanges').removeAttr("disabled"); // remove disabled attribute from "Save Changes" btn
$input.appendTo(args.container);
$input.focus().select();
};
this.destroy = function() {
$input.remove();
};
this.focus = function() {
$input.focus();
};
this.loadValue = function(item) {
defaultValue = item[args.column.field];
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function() {
return parseInt($input.val(),10) || 0;
};
this.applyValue = function(item,state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';
};
this.validate = function() {
if (isNaN($input.val()))
return {
valid: false,
msg: "Please enter a valid integer"
};
return {
valid: true,
msg: null
};
};
this.init();
}
此行无济于事,我不知道该怎么做:
This line does nothing and I can't figure out how to do this:
document.getElementsByClassName('ui-widget-content slick-row')[row].className += 'edited';
谢谢
推荐答案
我不是SlickGrid方面的专家,但请看一下示例14 ,我认为它具有类似的信息可以为您提供帮助。
I am not an expert in SlickGrid but take a look a Example 14, I think it has similar information that would help you.
我的想法是:
- 订阅grid.onCellChange事件
- 存储对象更改
- 使用grid.setCellCssStyles('highlight' ,更改)以更新CSS或grid.addCellCssStyles
希望至少能有所帮助。
这篇关于单元格编辑后的SlickGrid样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!