[英]How to wrap jQuery (default) handsontable inside directive AngularJS?
在这里,我可以在非AngularJS应用程序中进行动手操作,并且正在开发广泛使用AngularJS(SPA)的软件的新版本。
我会知道:有没有办法在不重写所有内容的情况下将现有的handontable实现包装到AngularJS指令中?
先感谢您!
var hot = new Handsontable(container, {
colHeaders: configTable.columnsHeader,
columns: configTable.columnsConfig,
colWidths: configTable.colWidths,
rowHeight: 5,
data: configTable.data,
minSpareRows: 0,
rowHeaders: false,
contextMenu: false,
currentRowClassName: 'row_selected',
height: parentWindowHeight,
width: parentWindowWidth,
multiSelect: false,
autoWrapRow: true,
autoWrapCol: true,
fillHandle: false,
afterOnCellMouseOver: function (event, coords, cell) {
// Long Implementation...
},
afterOnCellMouseDown: function (r, p, r2, p2) { //(r: Number, p: Number, r2: Number, p2: Number)
// Long Implementation...
},
beforeKeyDown: function (event) { // event: Object
},
beforeChange: function (changes, source) { //(changes: Array, source: String)
// Long Implementation...
},
afterChange: function (changes, source) { // (changes: Array, source: String)
// Long Implementation...
},
beforeValidate: function (value, row, prop, source) { // value: Mixed, row: Number, prop: String, source: String
valorMaximo = numeral($(hot.getColHeader()[prop]).data('valor')).value();
},
cells: function (row, col, prop) {
var cellProperties = {};
var sit = $(this.instance.getData()[row][0])[0];
if (sit !== undefined) {
sit = sit.value;
if (sit != "1" && sit != "+" && sit != "-" && sit != "*") {
cellProperties.readOnly = true;
cellProperties.renderer = disabledRowRenderer;
}
}
return cellProperties;
},
onSelection: function (r, c, r2, c2) { // readOnly cannot be selected
var sit = $(this.getData()[r][0])[0];
var meta = this.getCellMeta(r, c);
if (sit !== undefined) {
sit = sit.value;
if (sit != "1" && sit != "+" && sit != "-" && sit != "*") {
this.deselectCell();
}
}
if (meta.readOnly) {
this.deselectCell();
}
}
});
是的,您当然可以。 最简单的方法是创建一个简单的指令,将所有现有逻辑放入链接函数中。 您可能需要稍微调整一下代码,以便正确引用要使用的元素。 看到:
myApp.directive('handsOnTable', function(){
return {
link: function(scope, element){
// Your code here, using the element attribute.
}
};
});
但是...因为您要切换到AngularJS,所以我强烈建议您重写代码。 可能没有那么困难,也没有太多工作。 不过,它将为您提供更多面向未来的代码,并且您可能会摆脱jQuery(实际上应该这样做)。 在您的情况下,这可能意味着大多数选项(如autoWrapRow和autoWrapCol)将成为指令的属性,而诸如beforeValidate之类的方法将最终出现在控制器中。 就像是:
myApp.directive('handsOnTable', function(){
return {
scope: {
autoWrapRow: '=',
autoWrapCol: '='
},
controller: function($element){
var vm = this;
vm.beforeValidate = beforeValidate;
function beforeValidate(){
// Do stuff. You can use the $element to do DOM manupulation
// but you should keep that to a minimum and try to think the
// Angular way of doing things.
}
},
controllerAs: 'table',
bindToController: true
};
});
希望这个对你有帮助。 当然,这很大程度上取决于您对Angular的满意程度。
您是否尝试过不需要jQuery的ngHandsontable库?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.