如何对 Slickgrid 的 TextCellEditor 进行子类化?
如何对 Slickgrid 的 TextCellEditor 进行子类化?
我想使用 统一库 来设置 slickgrid 中使用的编辑器的样式;为此,我需要
$("input, textarea, select, button").uniform();
在生成 html 后调用;换句话说,在调用编辑器对象的 init 函数之后;目前,我只是复制整个编辑器源代码并将该行添加到 init 函数末尾之前。我只是看起来不优雅。
编辑:
为了让不熟悉 slickgrid 的人清楚,这里是代码:
var myTextCellEditor = function(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function() {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.bind("keydown.nav", function(e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
})
.focus()
.select();
$input.uniform();
};
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 $input.val();
};
this.applyValue = function(item,state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function() {
if (args.column.validator) {
var validationResults = args.column.validator($input.val());
if (!validationResults.valid)
return validationResults;
}
return {
valid: true,
msg: null
};
};
this.init();
}
其中 $input.uniform(); 是唯一与默认 TextCellEditor 不同的行。
How do I subclass the TextCellEditor of Slickgrid?
I want to style the editors used in slickgrid using the uniform library; to do so I need to call
$("input, textarea, select, button").uniform();
after the html is generated; in other words after the editor object's init function is called; Currently I just copy the entire editor source code and add that line just before the end of the init function. I just seems non elegant.
edit:
to be clear to people unfamiliar with slickgrid, here is the code:
var myTextCellEditor = function(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function() {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.bind("keydown.nav", function(e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
})
.focus()
.select();
$input.uniform();
};
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 $input.val();
};
this.applyValue = function(item,state) {
item[args.column.field] = state;
};
this.isValueChanged = function() {
return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
};
this.validate = function() {
if (args.column.validator) {
var validationResults = args.column.validator($input.val());
if (!validationResults.valid)
return validationResults;
}
return {
valid: true,
msg: null
};
};
this.init();
}
Where $input.uniform(); is the only line that is different from the default TextCellEditor.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以使用 .live() 将 .ready() 事件绑定到按类生成的 html 内容,因此它适用于所有未来的内容,而不仅仅是初始 DOM 中存在的内容。
所以...
You could bind a .ready() event to the generated html content by class using .live() so it applies to all future content, not just content present in the initial DOM.
So...