html - 如何添加 AngularJS DHTML 指令?
问题描述
dhtml 语法帮助 这是使用的语法
- 我没有在这里用尽完整的 dhtmlXGrid API...
- 然而 configure 和 dataLoaded 回调让用户
- 添加他们想要的任何其他配置
"use strict";
angular.module('dhxDirectives')
.directive('dhxGrid', function factory(DhxUtils) {
return {
restrict: 'E',
require: 'dhxGrid',
controller: function () {
},
scope: {
/**
* Grid will be accessible in controller via this scope entry
* after it's initialized.
* NOTE: For better design and testability you should use instead the
* configure and dataLoaded callbacks.
*/
dhxObj: '=',
/** Mandatory in current implementation! */
dhxMaxHeight: '=',
/** Optional. Default is 100%. */
dhxMaxWidth: '=',
/**
* Data is given here as an object. Not a filename! Must conform to the
* specified or default dataFormat
*/
dhxData: '=',
/**
* View possible formats here: http://docs.dhtmlx.com/grid__data_formats.html
* Currently supported:
* ['Basic JSON', 'Native JSON'] // 'Basic JSON' is default value
*/
dhxDataFormat: '=',
/** Optional! Recommended! http://docs.dhtmlx.com/api__dhtmlxgrid_setheader.html */
dhxHeader: '=',
/** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcoltypes.html */
dhxColTypes: '=',
/** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcolsorting.html */
dhxColSorting: '=',
/** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setcolalign.html */
dhxColAlign: '=',
/** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setinitwidthsp.html */
dhxInitWidths: '=',
/** Optional! http://docs.dhtmlx.com/api__dhtmlxgrid_setinitwidths.html */
dhxInitWidthsP: '=',
/**
* preLoad and postLoad callbacks to controller for additional
* customization power.
*/
dhxConfigureFunc: '=',
dhxOnDataLoaded: '=',
/**
* [{type: <handlerType>, handler: <handlerFunc>}]
* where type is 'onSomeEvent'
* Events can be seen at: http://docs.dhtmlx.com/api__refs__dhtmlxgrid_events.html
* Optional
*/
dhxHandlers: '=',
dhxVersionId: '=',
dhxContextMenu: '='
},
compile: function compile(/*tElement, tAttrs, transclude*/) {
return function (scope, element/*, attrs*/) {
var loadStructure = function () {
$(element).empty();
$('<div></div>').appendTo(element[0]);
var rootElem = element.children().first();
var width = scope.dhxMaxWidth ? (scope.dhxMaxWidth + 'px') : '100%';
var height = scope.dhxMaxHeight ? (scope.dhxMaxHeight + 'px') : '100%';
rootElem.css('width', width);
rootElem.css('height', height);
//noinspection JSPotentiallyInvalidConstructorUsage
if (scope.dhxObj) {
DhxUtils.dhxDestroy(scope.dhxObj);
}
scope.dhxObj = new dhtmlXGridObject(rootElem[0]);
var grid = scope.dhxObj;
grid.setImagePath(DhxUtils.getImagePath());
grid.enableAutoHeight(!!scope.dhxMaxHeight, scope.dhxMaxHeight, true);
grid.enableAutoWidth(!!scope.dhxMaxWidth, scope.dhxMaxWidth, true);
scope.dhxContextMenu ? grid.enableContextMenu(scope.dhxContextMenu) : '';
scope.$watch(
"dhxContextMenu",
function handle( newValue, oldValue ) {
grid.enableContextMenu(newValue);
}
);
scope.dhxHeader ? grid.setHeader(scope.dhxHeader): '';
scope.dhxColTypes ? grid.setColTypes(scope.dhxColTypes): '';
scope.dhxColSorting ? grid.setColSorting(scope.dhxColSorting): '';
scope.dhxColAlign ? grid.setColAlign(scope.dhxColAlign): '';
scope.dhxInitWidths ? grid.setInitWidths(scope.dhxInitWidths): '';
scope.dhxInitWidthsP ? grid.setInitWidthsP(scope.dhxInitWidthsP): '';
// Letting controller add configurations before data is parsed
if (scope.dhxConfigureFunc) {
scope.dhxConfigureFunc(grid);
}
grid.init();
// Finally parsing data
var dhxDataFormat = scope.dhxDataFormat || 'Basic JSON';
switch (dhxDataFormat) {
case 'Basic JSON':
grid.parse(scope.dhxData, 'json');
break;
case 'Native JSON':
grid.load(scope.dhxData, 'js');
break;
}
// Letting controller do data manipulation after data has been loaded
if (scope.dhxOnDataLoaded) {
scope.dhxOnDataLoaded(grid);
}
DhxUtils.attachDhxHandlers(grid, scope.dhxHandlers);
DhxUtils.dhxUnloadOnScopeDestroy(scope, grid);
};
scope.$watch('dhxVersionId', function (/*newVal, oldVal*/) {
console.log('rebuilding...');
loadStructure();
});
}
}
};
});
© 2020 GitHub, Inc.
- 我没有在这里用尽完整的 dhtmlXGrid API...
- 然而 configure 和 dataLoaded 回调让用户
- 添加他们想要的任何其他配置
解决方案
"use strict";
/**
* Created by Emanuil on 01/02/2016.
*/
angular.module('dhxDirectives')
.factory('DhxUtils', [function () {
var _imgPath = "bower_components/dhtmlx/imgs/";
/**
* @param dhxObject
* @param dhxHandlers
*/
var attachDhxHandlers = function (dhxObject, dhxHandlers) {
(dhxHandlers || [])
.forEach(function (info) {
dhxObject.attachEvent(info.type, info.handler);
});
};
var getImagePath = function () {
return _imgPath;
};
var setImagePath = function (imgPath) {
_imgPath = imgPath;
};
/**
* I hope to never resort to using that
*/
var createCounter = function () {
var current = -1;
return function () {
current++;
return current;
};
};
var removeUndefinedProps = function(obj) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop) && obj[prop] === undefined) {
delete obj[prop];
}
}
};
var dhxDestroy = function (dhxObj) {
var destructorName =
'destructor' in dhxObj
? 'destructor'
:
('unload' in dhxObj
? 'unload'
: null);
if (destructorName === null) {
console.error('Dhtmlx object does not have a destructor or unload method! Failed to register with scope destructor!');
return;
}
dhxObj[destructorName]();
};
var dhxUnloadOnScopeDestroy = function (scope, dhxObj) {
var destructorName =
'destructor' in dhxObj
? 'destructor'
:
('unload' in dhxObj
? 'unload'
: null);
if (destructorName === null) {
console.error('Dhtmlx object does not have a destructor or unload method! Failed to register with scope destructor!');
return;
}
scope.$on(
"$destroy",
function (/*event*/) {
dhxObj[destructorName]();
}
);
};
return {
attachDhxHandlers: attachDhxHandlers,
getImagePath: getImagePath,
setImagePath: setImagePath,
createCounter: createCounter,
removeUndefinedProps: removeUndefinedProps,
dhxUnloadOnScopeDestroy: dhxUnloadOnScopeDestroy,
dhxDestroy: dhxDestroy
};
}]);
推荐阅读
- java - 如何使用 nginx 代理更改主机 URL
- flutter - Flutter mobile_number 包中的异常
- react-native - tfjs-models 通用句子编码器的 embed() 仅在物理设备上中断
- here-api - 无法使用 HERE 网络定位 v2 API(当 v1 工作时)
- reactjs - 当我使用 ReactQuery useMutation 创建新组时如何更新组数组
- javascript - 从孩子改变父母的状态,但孩子的道具不更新
- javascript - mongoose 中的自定义验证器由于某种原因未申请
- jekyll - Jekylls 相同日期的默认帖子顺序是什么?
- refactoring - clion在提取方法时可以使用箭头(->)而不是点(。)来访问结构成员吗?
- javascript - 如何通过 React JS 向 sweetalert2 的对话框添加加载方法?