Slickgrid 编辑器完成事件
Slickgrid editor finish event
我已设置Editors.Text
或编辑
{id: "label", name: "name", field: "label",editor: Editors.Text,width: 80},
这允许在浏览器上编辑字段。
但是编辑完成后如何捕捉呢??
我正在检查 slickgrid 的事件 list。
但是找不到合适的事件。
如何在编辑列后捕获事件?
这似乎没有通用事件 - 添加一个可能不是一个坏主意。我怀疑您应该编写自定义编辑器并将事件直接添加到其中,而不是将其添加到网格中。
我假设您想在编辑完成后更新一些相关数据或UI?
[编辑]
编辑器为此封装了事件 - 网格使用带有 loadValue
和 applyValue
到 read/write 数据源的插件模型。我将在此处 post 我的个人文本编辑器示例,因为它可能会有所帮助。请注意,我已经为我的个人网格编写了一个数据提供程序,以允许它连接到多个自定义数据对象 - 这不在您应该使用的标准对象中,即 here.
function TextEditor(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function () {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.on("keydown.nav", function (e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
})
.focus()
.select();
$input.width(args.container.clientWidth); /* mod */
};
this.destroy = function () {
$input.remove();
};
this.focus = function () {
$input.focus();
};
this.getValue = function () {
return $input.val();
};
this.setValue = function (val) {
$input.val(val);
};
this.loadValue = function () {
defaultValue = args.grid.getDataProvider().getValueByColName(args.rowIndex, args.column.field);
defaultValue = defaultValue || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (state) {
args.grid.getDataProvider().setValueByColName(args.rowIndex, 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();
}
我已设置Editors.Text
或编辑
{id: "label", name: "name", field: "label",editor: Editors.Text,width: 80},
这允许在浏览器上编辑字段。
但是编辑完成后如何捕捉呢??
我正在检查 slickgrid 的事件 list。
但是找不到合适的事件。
如何在编辑列后捕获事件?
这似乎没有通用事件 - 添加一个可能不是一个坏主意。我怀疑您应该编写自定义编辑器并将事件直接添加到其中,而不是将其添加到网格中。
我假设您想在编辑完成后更新一些相关数据或UI?
[编辑]
编辑器为此封装了事件 - 网格使用带有 loadValue
和 applyValue
到 read/write 数据源的插件模型。我将在此处 post 我的个人文本编辑器示例,因为它可能会有所帮助。请注意,我已经为我的个人网格编写了一个数据提供程序,以允许它连接到多个自定义数据对象 - 这不在您应该使用的标准对象中,即 here.
function TextEditor(args) {
var $input;
var defaultValue;
var scope = this;
this.init = function () {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.on("keydown.nav", function (e) {
if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
})
.focus()
.select();
$input.width(args.container.clientWidth); /* mod */
};
this.destroy = function () {
$input.remove();
};
this.focus = function () {
$input.focus();
};
this.getValue = function () {
return $input.val();
};
this.setValue = function (val) {
$input.val(val);
};
this.loadValue = function () {
defaultValue = args.grid.getDataProvider().getValueByColName(args.rowIndex, args.column.field);
defaultValue = defaultValue || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
this.serializeValue = function () {
return $input.val();
};
this.applyValue = function (state) {
args.grid.getDataProvider().setValueByColName(args.rowIndex, 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();
}