ng-dap
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.
235 lines • 20.3 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
var NgTreeComponent = /** @class */ (function () {
function NgTreeComponent() {
var _this = this;
/**
* 用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作,设置此项会覆盖treeSetting.callback.beforeClick，
* 参数为当前点击节点
*/
this.beforeClick = new EventEmitter();
/**
* 用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选,设置此项会覆盖treeSetting.callback.beforeCheck，
* 参数为当前勾选 或 取消勾选的节点
*/
this.beforeCheck = new EventEmitter();
/**
* 用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作,设置此项会覆盖treeSetting.callback.beforeRemove，
* 参数为当前要删除的节点
*/
this.beforeRemove = new EventEmitter();
/**
* 用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作,设置此项会覆盖treeSetting.callback.beforeRename，
* 参数为当前要更名的节点
*/
this.beforeRename = new EventEmitter();
/**
* 用于捕获节点被点击的事件回调函数，设置此项会覆盖treeSetting.callback.onClick
*/
this.onClick = new EventEmitter();
/**
* 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数，设置此项会覆盖treeSetting.callback.onCheck
*/
this.onCheck = new EventEmitter();
/**
* 用于捕获删除节点之后的事件回调函数。设置此项会覆盖treeSetting.callback.onRemove
*/
this.onRemove = new EventEmitter();
/**
* 用于捕获节点编辑名称结束之后的事件回调函数，设置此项会覆盖treeSetting.callback.onRename
*/
this.onRename = new EventEmitter();
/**
* 用于当鼠标移动到节点上时，点击用户自定义控件时触发的事件，参数为addHoverDom内的元素{key: string, value: string}
*/
this.onHoverDomClick = new EventEmitter();
this.hoverDomFunction = function (treeId, treeNode) {
if ($('#diyBtn_' + treeNode.tId).length > 0) {
return;
}
var hoverButton = $('#' + treeNode.tId + '_a');
var editStr = '<span class="dropdown button" id="diyBtn_' + treeNode.tId + '" title="操作"></span>';
hoverButton.append(editStr);
var btn = $('#diyBtn_' + treeNode.tId);
var dropDom = '<ul class="copy-movelist">';
for (var i = 0; i < _this.addHoverDom.length; i++) {
dropDom += '<li id="' + _this.addHoverDom[i].key + '">' + _this.addHoverDom[i].value + '</li>';
}
dropDom += '</ul>';
if (btn) {
btn.on('click', function () {
btn.html(dropDom);
$('body').off('click').on('click', function (ev) {
if (!($(ev.target).hasClass('dropdown') || $(ev.target).parents('.dropdown').length > 0)) {
btn.empty();
}
});
btn.find('ul').on('click', function (ev) {
_this.onHoverDomClick.emit(ev);
});
return false;
});
}
};
this.removeHoverDomFunction = function (treeId, treeNode) {
$('#diyBtn_' + treeNode.tId).unbind().remove();
};
}
Object.defineProperty(NgTreeComponent.prototype, "treeNodes", {
get: function () {
return this._treeNodes;
},
/**
* 树数据，结构同ztree
*/
set: function (value) {
this._treeNodes = value;
this.initTree();
},
enumerable: true,
configurable: true
});
NgTreeComponent.prototype.ngOnInit = function () {
var _this = this;
var treeSetting = {};
if (this.checkAble !== undefined) {
treeSetting.check = {
enable: this.checkAble,
chkStyle: this.checkStyle ? this.checkStyle : 'checkbox'
};
}
if (this.simpleData) {
treeSetting.data = {
simpleData: this.simpleData
};
}
if (this.selectedMulti !== undefined) {
treeSetting.view = {
selectedMulti: this.selectedMulti
};
}
if (this.showIcon !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.showIcon = this.showIcon;
}
if (this.showLine !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.showLine = this.showLine;
}
if (this.dblClickExpand !== undefined) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.dblClickExpand = this.dblClickExpand;
}
if (this.addDiyDom && this.addDiyDom.length > 1) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
}
if (this.addHoverDom) {
treeSetting.view = treeSetting.view ? treeSetting.view : {};
treeSetting.view.addHoverDom = this.hoverDomFunction;
treeSetting.view.removeHoverDom = this.removeHoverDomFunction;
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeClick)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeClick = function (treeId, node) {
_this.beforeClick.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeCheck)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeCheck = function (treeId, node) {
_this.beforeCheck.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeRemove)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeRemove = function (treeId, node) {
_this.beforeRemove.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.beforeRename)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.beforeRename = function (treeId, node) {
_this.beforeRename.emit(node);
return true;
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onClick)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onClick = function (event, treeId, node) {
_this.onClick.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onCheck)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onCheck = function (event, treeId, node) {
_this.onCheck.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onRemove)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onRemove = function (event, treeId, node) {
_this.onRemove.emit(node);
};
}
if (!(this.treeSetting && this.treeSetting.callback && this.treeSetting.callback.onRename)) {
treeSetting.callback = treeSetting.callback ? treeSetting.callback : {};
treeSetting.callback.onRename = function (event, treeId, node) {
_this.onRename.emit(node);
};
}
this.treeSetting = Object.assign({}, this.treeSetting, treeSetting);
// this.treeObject = $.fn.zTree.init($('#' + this.id), treeSetting, this.treeNodes);
};
NgTreeComponent.prototype.ngAfterViewInit = function () {
this.treeObject = $.fn.zTree.init($('#' + this.id), this.treeSetting, this._treeNodes);
};
NgTreeComponent.prototype.ngOnDestroy = function () {
this.treeObject.destroy();
};
NgTreeComponent.prototype.getTreeObj = function () {
return this.treeObject;
};
NgTreeComponent.prototype.initTree = function () {
if (this.treeObject) {
this.treeObject.destroy();
}
this.treeObject = $.fn.zTree.init($('#' + this.id), this.treeSetting, this._treeNodes);
};
NgTreeComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-tree',
template: "<div [id]=\"id\" class=\"ztree\" [class.hoverBar]=\"!!addHoverDom\"></div> ",
styles: [".ztree * { padding: 0; margin: 0; font-size: 12px; font-family: inherit; } .ztree { margin: 0; padding: 0; color: #333; font-size: 12px; } :host ::ng-deep .ztree li { padding: 0; margin: 0; list-style: none; line-height: 14px; text-align: left; white-space: nowrap; outline: 0; } :host ::ng-deep .ztree li ul { margin: 0; padding: 0 0 0 18px; } :host ::ng-deep .ztree li a { padding: 0; margin: 0; cursor: pointer; width: 100%; height: 30px; color: #333; background-color: transparent; text-decoration: none; vertical-align: top; display: inline-block; line-height: 30px; } :host ::ng-deep .ztree li a:hover { color: #000; } :host ::ng-deep .ztree li a.curSelectedNode span { color: #4c7daa; } :host ::ng-deep .ztree.hoverBar li a:hover:before { width: 100%; height: 30px; left: 0; position: absolute; content: ''; z-index: -1; background: #e4e4e4; } :host ::ng-deep .ztree.hoverBar li a.curSelectedNode:before { width: 100%; height: 30px; left: 0; position: absolute; content: ''; z-index: -1; background: #e4e4e4; } :host ::ng-deep .ztree.hoverBar li a.curSelectedNode span { color: #000; } :host ::ng-deep .ztree.hoverBar li a .dropdown { position: absolute; right: 0; width: 14px; height: 14px; margin-top: 8px; margin-right: 2px; background: url(assets/ng-tree/img/dropdown-hover.svg) no-repeat; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist { position: absolute; z-index: 99999; right: 0; top: 18px; background-color: #fff; border: 1px solid #e5e5e5; box-shadow: 0 0 5px rgba(165, 165, 165, 0.1); padding: 0; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist li { display: block; padding: 0 12px; font-weight: 400; cursor: pointer; height: 30px; line-height: 30px; text-align: center; } :host ::ng-deep .ztree.hoverBar li a .copy-movelist li:hover { background: #f5f5f5; } :host ::ng-deep .ztree .switch + a { width: calc(100% - 30px); } :host ::ng-deep .ztree .switch.chk + a { width: calc(100% - 60px); } :host ::ng-deep .ztree li a.curSelectedNode_Edit { padding-top: 0; background-color: #ffe6b0; color: black; height: 14px; border: 1px #ffb951 solid; opacity: 0.8; } :host ::ng-deep .ztree li a.tmpTargetNode_inner { padding-top: 0px; background-color: #316ac5; color: white; height: 14px; border: 1px #316ac5 solid; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep .ztree li a input.rename { height: 14px; width: 80px; padding: 0; margin: 0; font-size: 12px; border: 1px #7ec4cc solid; *border: 0px; } :host ::ng-deep .ztree li span { line-height: 14px; margin-right: 2px; } :host ::ng-deep .ztree li span.button { line-height: 0; margin: 0; width: 14px; height: 14px; display: inline-block; vertical-align: middle; border: 0 none; cursor: pointer; outline: none; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; } :host ::ng-deep .ztree li span.button.chk { width: 14px; height: 14px; margin: 8px 12px 0 0; cursor: auto; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_full { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_full_focus { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_part { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_part_focus { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_false_disable { background: url(assets/ng-tree/img/check-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_full { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_full_focus { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_part { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_part_focus { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.checkbox_true_disable { background: url(assets/ng-tree/img/check-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_full { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_full_focus { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_part { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_part_focus { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_false_disable { background: url(assets/ng-tree/img/radio-normal.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_full { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_full_focus { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_part { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_part_focus { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.chk.radio_true_disable { background: url(assets/ng-tree/img/radio-active.svg) no-repeat; } :host ::ng-deep .ztree li span.button.switch { width: 14px; height: 14px; margin-top: 8px; margin-right: 4px; } :host ::ng-deep .ztree li span.button.root_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.root_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.roots_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.roots_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.center_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.center_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.bottom_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.bottom_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.noline_open { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.noline_close { background: url(assets/ng-tree/img/treeRight-icon.svg) no-repeat center left; } :host ::ng-deep .ztree li span.button.root_docu { background: none; } :host ::ng-deep .ztree li span.button.roots_docu { background: url(assets/ng-tree/img/table.svg) no-repeat; } :host ::ng-deep .ztree li span.button.center_docu { background: none; } :host ::ng-deep .ztree li span.button.bottom_docu { background: none; } :host ::ng-deep .ztree li span.button.noline_docu { background: none; } :host ::ng-deep .ztree li span.button.ico_open { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/08-14-14.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_close { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/08-14-14.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_docu { margin-top: 8px; margin-right: 12px; background: url(assets/ng-tree/img/table.svg) no-repeat; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.edit { margin-right: 2px; background-position: -110px -48px; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.remove { margin-right: 2px; background-position: -110px -64px; vertical-align: top; *vertical-align: middle; } :host ::ng-deep .ztree li span.button.ico_loading { margin-right: 2px; /*background: url(./img/loading.gif) no-repeat scroll 0 0 transparent;*/ vertical-align: top; *vertical-align: middle; } :host ::ng-deep ul.tmpTargetzTree { background-color: #ffe6b0; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep span.tmpzTreeMove_arrow { width: 14px; height: 14px; display: inline-block; padding: 0; margin: 2px 0 0 1px; border: 0 none; position: absolute; background-color: transparent; background-repeat: no-repeat; background-attachment: scroll; background-position: -110px -80px; /*background-image: url(\"./img/zTreeStandard.png\");*/ /**background-image: url(\"./img/zTreeStandard.gif\")*/ } :host ::ng-deep ul.ztree.zTreeDragUL { margin: 0; padding: 0; position: absolute; width: auto; height: auto; overflow: hidden; background-color: #cfcfcf; border: 1px #00b83f dotted; opacity: 0.8; filter: alpha(opacity=80); } :host ::ng-deep .zTreeMask { z-index: 10000; background-color: #cfcfcf; opacity: 0.0; filter: alpha(opacity=0); position: absolute; } "]
},] },
];
/** @nocollapse */
NgTreeComponent.ctorParameters = function () { return []; };
NgTreeComponent.propDecorators = {
id: [{ type: Input }],
treeNodes: [{ type: Input }],
treeSetting: [{ type: Input }],
checkAble: [{ type: Input }],
checkStyle: [{ type: Input }],
simpleData: [{ type: Input }],
selectedMulti: [{ type: Input }],
showIcon: [{ type: Input }],
showLine: [{ type: Input }],
addDiyDom: [{ type: Input }],
addHoverDom: [{ type: Input }],
dblClickExpand: [{ type: Input }],
beforeClick: [{ type: Output }],
beforeCheck: [{ type: Output }],
beforeRemove: [{ type: Output }],
beforeRename: [{ type: Output }],
onClick: [{ type: Output }],
onCheck: [{ type: Output }],
onRemove: [{ type: Output }],
onRename: [{ type: Output }],
onHoverDomClick: [{ type: Output }]
};
return NgTreeComponent;
}());
export { NgTreeComponent };
//# sourceMappingURL=ng-tree.component.js.map