【发布时间】:2012-12-07 00:52:48
【问题描述】:
handsontable 完成加载/初始化后,我正在尝试进行一些 DOM 操作。
handsontable 是否有一些在它完成自身构建后触发的事件?
【问题讨论】:
标签: jquery events handsontable event-triggers
handsontable 完成加载/初始化后,我正在尝试进行一些 DOM 操作。
handsontable 是否有一些在它完成自身构建后触发的事件?
【问题讨论】:
标签: jquery events handsontable event-triggers
不再需要更改代码,因为有内置事件:
afterInit () - Handsontable 实例启动后触发的回调。
afterLoadData () - 将新数据(通过 loadData 方法)加载到数据源数组后触发回调。
afterRender () - 渲染 Handsontable 表后触发回调。
查看完整活动列表see here
【讨论】:
我在他们的github 上找不到任何此类回调,而且我认为您真的不需要。只需在调用 $("#container").handsontable() 后更改 DOM。如果是因为您使用 ajax 加载它,只需在完成时调用它。只需按照他们的示例 here。if (source === 'loadData') {...}
如果您能应对挑战,并且根据您下载的版本,我们可以深入研究源代码并自己进行一些调整,因为它相当简单。我假设您在handsontable 完成初始化而没有任何ajax 加载后请求回调。
跟我来,让我们潜入水中。
jquery.handsontable.full.js 的变化
对了,就是这样,设置之后,2165 行上面写着:
$.fn.handsontable = function (action) {...};
在那里,我们知道所有内容都已初始化,幸运的是,开发人员很好地对他的东西进行了评论和标记,所以让我们看看里面的行。
在线2182 上面写着:
instance = new Handsontable.Core($this, currentSettings);
那里是他们初始化核心内容的地方,至少我可以从名字中看出这一点,所以在这一行之后添加一个回调应该足以作为 afterInit 回调。
所以,我们需要做的就是在用户提供的设置中添加一个回调检查,然后调用它。我决定在 2184 行之后添加这个回调,因为它是在实例化之后。
你可以争论我把回调放在哪里,它是否应该在 Core 函数中,以及我如何检查是否设置是一个函数等,但这可以完成工作并且这样更容易。
所以,在线2182
[...]
instance = new Handsontable.Core($this, currentSettings); //<---- line 2182
$this.data("handsontable", instance);
instance.init(); //<---- line 2184
if(typeof(currentSettings.afterInit) == "function"){
currentSettings.afterInit();
}
[...]
好了,这就是我们需要做的一切!现在我们可以创建一个带有afterInit 回调函数的handsontable。
$("#container").handsontable({
startRows: 8,
startCols: 6,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
afterInit: function(){
console.log("Handsontable initialized!");
}
});
不要害怕弄乱源代码,你会学到很多东西!
这是从2165 到2203 行的完整更改代码,其中包含$.fn.handsontable 函数:
$.fn.handsontable = function (action) {
var i, ilen, args, output = [], userSettings;
if (typeof action !== 'string') { //init
userSettings = action || {};
return this.each(function () {
var $this = $(this);
if ($this.data("handsontable")) {
instance = $this.data("handsontable");
instance.updateSettings(userSettings);
}
else {
var currentSettings = $.extend(true, {}, settings), instance;
for (i in userSettings) {
if (userSettings.hasOwnProperty(i)) {
currentSettings[i] = userSettings[i];
}
}
instance = new Handsontable.Core($this, currentSettings);
$this.data("handsontable", instance);
instance.init();
if(typeof(currentSettings.afterInit) == "function"){
currentSettings.afterInit();
}
}
});
}
else {
args = [];
if (arguments.length > 1) {
for (i = 1, ilen = arguments.length; i < ilen; i++) {
args.push(arguments[i]);
}
}
this.each(function () {
output = $(this).data("handsontable")[action].apply(this, args);
});
return output;
}
};
【讨论】: