问题描述
dhtml语法帮助 这是使用的语法
"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.解决方法
<dhx-grid
dhx-obj="grid.obj"
style="height: 100%"
dhx-data="gridData"
dhx-col-sorting="'str,str,int'"
dhx-header="'Title,Author,Copies sold'"
dhx-context-menu="contextMenu"
dhx-handlers="grid.handlers"></dhx-grid>,
angular.module('myApp')
.controller('GridController',['$scope',function ($scope) {
$scope.grid = {
obj: {},handlers: [
{type: "onRowSelect",handler: function (id) {
$scope.grid.obj.deleteRow(id);
}}
]
};
$scope.alert = function alert(event_name) {
switch (event_name) {
case "refreshsize":
$scope.grid.obj.setSizes();
}
};
$scope.contextMenu = {};
$scope.gridData = {
rows:[
{ id:1,data: ["Click a row","John Grasham","100"]},{ id:2,data: ["to have it","Stephen Pink","2000"]},{ id:3,data: ["deleted","Terry Brattchet","3000"]},{ id:4,data: ["La la la","Isaac Zimov","4000"]},{ id:5,"Sax Pear","5000"]}
]
};
}]);,
"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
};
}]);