From 752f1475791cdc7cabee18e76c58848da771c040 Mon Sep 17 00:00:00 2001 From: zsmj Date: Wed, 11 Jan 2023 15:17:51 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-14066=20feat:=20case/tree=E5=92=8Cca?= =?UTF-8?q?se/ztree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/index.js | 6 + src/case/tree/index.js | 3 + src/case/tree/tree.level.js | 141 ++- src/case/tree/treeexpander/tree.expander.js | 142 +-- .../tree/treeexpander/tree.expander.popup.js | 117 +- .../ztree/{1.asynctree.js => asynctree.js} | 228 ++-- src/case/ztree/index.js | 14 + src/case/ztree/jquery.ztree.core-3.5.js | 1 + src/case/ztree/jquery.ztree.excheck-3.5.js | 1087 +++++++++-------- src/case/ztree/list/0.listtreeview.js | 118 -- src/case/ztree/list/1.listasynctree.js | 123 -- src/case/ztree/list/listasynctree.js | 122 ++ src/case/ztree/list/listparttree.js | 76 +- src/case/ztree/list/listtreeview.js | 121 ++ src/case/ztree/parttree.js | 173 +-- src/case/ztree/tree.display.js | 67 +- src/case/ztree/tree.list.display.js | 84 +- src/case/ztree/tree.simple.js | 132 +- src/case/ztree/treerender.page.service.js | 72 ++ src/case/ztree/treerender.scroll.service.js | 219 ++-- src/case/ztree/treetrender.page.service.js | 76 -- src/case/ztree/{0.treeview.js => treeview.js} | 442 +++---- .../platform/web/jquery/jquery.mousewheel.js | 111 +- 23 files changed, 1882 insertions(+), 1793 deletions(-) create mode 100644 src/case/tree/index.js rename src/case/ztree/{1.asynctree.js => asynctree.js} (61%) create mode 100644 src/case/ztree/index.js delete mode 100644 src/case/ztree/list/0.listtreeview.js delete mode 100644 src/case/ztree/list/1.listasynctree.js create mode 100644 src/case/ztree/list/listasynctree.js create mode 100644 src/case/ztree/list/listtreeview.js create mode 100644 src/case/ztree/treerender.page.service.js delete mode 100644 src/case/ztree/treetrender.page.service.js rename src/case/ztree/{0.treeview.js => treeview.js} (58%) diff --git a/src/case/index.js b/src/case/index.js index 1b8b33c0b..2c9d4cafc 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -2,16 +2,22 @@ import * as button from "./button"; import * as calendarItem from "./calendar"; import * as pager from "./pager"; import * as editor from "./editor"; +import * as tree from "./tree"; +import * as ztree from "./ztree"; Object.assign(BI, { ...button, ...calendarItem, ...pager, ...editor, + ...ztree, + ...tree, }); export * from "./button"; export * from "./calendar"; export * from "./pager"; export * from "./editor"; +export * from "./tree"; +export * from "./ztree"; diff --git a/src/case/tree/index.js b/src/case/tree/index.js new file mode 100644 index 000000000..2e24e6651 --- /dev/null +++ b/src/case/tree/index.js @@ -0,0 +1,3 @@ +export * from "./tree.level"; +export * from "./treeexpander/tree.expander"; +export * from "./treeexpander/tree.expander.popup"; diff --git a/src/case/tree/tree.level.js b/src/case/tree/tree.level.js index 81609217e..bd522ce3a 100644 --- a/src/case/tree/tree.level.js +++ b/src/case/tree/tree.level.js @@ -1,130 +1,127 @@ -/** - * guy - * 二级树 - * @class BI.LevelTree - * @extends BI.Single - */ -BI.LevelTree = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.LevelTree.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-level-tree", - el: { - chooseType: 0 - }, - expander: {}, - items: [], - value: "" - }); - }, +import { shortcut, Widget, extend, isKey, each, UUID, defaults, isNotEmptyArray, Tree, createWidget } from "@/core"; + +@shortcut() +export class LevelTree extends Widget { + static xtype = "bi.level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + props = { + baseCls: "bi-level-tree", + el: { + chooseType: 0, + }, + expander: {}, + items: [], + value: "", + }; - _init: function () { - BI.LevelTree.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); this.initTree(this.options.items); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this; - BI.each(nodes, function (i, node) { - var extend = { - layer: layer, + _formatItems(nodes, layer, pNode) { + const self = this; + each(nodes, (i, node) => { + const extend = { + layer, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, isFirstNode: i === 0, isLastNode: i === nodes.length - 1, }; - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + if (!isKey(node.id)) { + node.id = UUID(); } extend.pNode = pNode; - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { + if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { extend.type = "bi.tree_node"; extend.selectable = false; - BI.defaults(node, extend); + defaults(node, extend); self._formatItems(node.children, layer + 1, node); } else { extend.type = "bi.tree_item"; - BI.defaults(node, extend); + defaults(node, extend); } }); + return nodes; - }, + } - _assertId: function (sNodes) { - BI.each(sNodes, function (i, node) { - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + _assertId(sNodes) { + each(sNodes, (i, node) => { + if (!isKey(node.id)) { + node.id = UUID(); } }); - }, + } - // 构造树结构， - initTree: function (nodes) { - var self = this, o = this.options; + initTree(nodes) { + const self = this, o = this.options; this.empty(); this._assertId(nodes); - this.tree = BI.createWidget({ + this.tree = createWidget({ type: "bi.custom_tree", element: this, - expander: BI.extend({ + expander: extend({ type: "bi.tree_expander", el: {}, isDefaultInit: false, selectable: false, popup: { - type: "bi.custom_tree" - } + type: "bi.custom_tree", + }, }, o.expander), - items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), + items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - el: BI.extend({ + el: extend({ type: "bi.button_tree", chooseType: 0, - layouts: [{ - type: "bi.vertical" - }] - }, o.el) + layouts: [ + { + type: "bi.vertical", + } + ], + }, o.el), }); this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); if (type === BI.Events.CLICK) { - self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob); + self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); self.setValue(value); } }); - }, + } - // 生成树方法 - stroke: function (nodes) { - this.tree.stroke.apply(this.tree, arguments); - }, + stroke(nodes) { + this.tree.stroke(nodes); + } - populate: function (items, keyword) { - items = this._formatItems(BI.Tree.transformToTreeFormat(items), 0); + populate(items, keyword) { + items = this._formatItems(Tree.transformToTreeFormat(items), 0); this.tree.populate(items, keyword); - }, + } - setValue: function (v) { + setValue(v) { this.tree.setValue(v); - }, + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - getAllLeaves: function () { + getAllLeaves() { return this.tree.getAllLeaves(); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.tree.getNodeById(id); - }, + } - getNodeByValue: function (id) { + getNodeByValue(id) { return this.tree.getNodeByValue(id); } -}); -BI.LevelTree.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.level_tree", BI.LevelTree); +} diff --git a/src/case/tree/treeexpander/tree.expander.js b/src/case/tree/treeexpander/tree.expander.js index 8dde0807b..c9e8185f5 100644 --- a/src/case/tree/treeexpander/tree.expander.js +++ b/src/case/tree/treeexpander/tree.expander.js @@ -1,80 +1,82 @@ -!(function () { - var Widget = BI.inherit(BI.Widget, { - props: { - baseCls: "bi-tree-expander", - layer: 0, // 第几层级 - isLastNode: false, // 是不是最后一个 - isFirstNode: false, // 是不是第一个 - selectable: false, - showLine: true, - }, +import { contains, Controller, createWidget, isArray, shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class TreeExpander extends Widget { + static xtype = "bi.tree_expander"; - var self = this; - var o = this.options; + props = { + baseCls: "bi-tree-expander", + layer: 0, // 第几层级 + isLastNode: false, // 是不是最后一个 + isFirstNode: false, // 是不是第一个 + selectable: false, + showLine: true, + }; - this.trigger = BI.createWidget(o.el, { - forceNotSelected: !o.selectable, - }); - this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { - o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); + render() { + const self = this; + const o = this.options; - return { - type: "bi.expander", - ref: function (_ref) { - self.expander = _ref; - }, - trigger: o.selectable ? "" : "click", - el: this.trigger, - isDefaultInit: o.isDefaultInit, - popup: { - type: "bi.tree_expander.popup", - layer: o.layer || o.el.layer, - isLastNode: o.isLastNode || o.el.isLastNode, - isFirstNode: o.isFirstNode || o.el.isFirstNode, - showLine: o.showLine, - el: o.popup, - }, - value: o.value, - listeners: [ - { - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }, - }, - ], - }; - }, + this.trigger = createWidget(o.el, { + forceNotSelected: !o.selectable, + }); + this.trigger.on(Controller.EVENT_CHANGE, function (type) { + o.selectable && self.fireEvent(Controller.EVENT_CHANGE, arguments); + }); - setValue: function (v) { - if (BI.contains(v, this.trigger.getValue())) { - this.trigger.setSelected(true); - this.expander.setValue([]); - } else { - this.trigger.setSelected(false); - this.expander.setValue(v); - } - }, + return { + type: "bi.expander", + ref(_ref) { + self.expander = _ref; + }, + trigger: o.selectable ? "" : "click", + el: this.trigger, + isDefaultInit: o.isDefaultInit, + popup: { + type: "bi.tree_expander.popup", + layer: o.layer || o.el.layer, + isLastNode: o.isLastNode || o.el.isLastNode, + isFirstNode: o.isFirstNode || o.el.isFirstNode, + showLine: o.showLine, + el: o.popup, + }, + value: o.value, + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + }, + } + ], + }; + } - getValue: function () { - if (this.trigger.isSelected()) { - var value = this.trigger.getValue(); - return BI.isArray(value) ? value : [value]; - } - return this.expander.getValue(); - }, + setValue(v) { + if (contains(v, this.trigger.getValue())) { + this.trigger.setSelected(true); + this.expander.setValue([]); + } else { + this.trigger.setSelected(false); + this.expander.setValue(v); + } + } - populate: function (items) { - this.expander.populate(items); - }, + getValue() { + if (this.trigger.isSelected()) { + const value = this.trigger.getValue(); - getAllLeaves: function () { - return this.expander && this.expander.getAllLeaves(); + return isArray(value) ? value : [value]; } - }); - BI.shortcut("bi.tree_expander", Widget); -}()); + return this.expander.getValue(); + } + + populate(items) { + this.expander.populate(items); + } + + getAllLeaves() { + return this.expander && this.expander.getAllLeaves(); + } +} diff --git a/src/case/tree/treeexpander/tree.expander.popup.js b/src/case/tree/treeexpander/tree.expander.popup.js index ada979b0e..ac12b708c 100644 --- a/src/case/tree/treeexpander/tree.expander.popup.js +++ b/src/case/tree/treeexpander/tree.expander.popup.js @@ -1,60 +1,61 @@ -!(function () { - var Widget = BI.inherit(BI.Widget, { - props: function () { - return { - baseCls: "bi-tree-expander-popup", - layer: 0, // 第几层级 - el: {}, - isLastNode: false, - showLine: true, - }; - }, - - render: function () { - - var self = this; - var o = this.options; - var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; - - this.popupView = BI.createWidget(BI.extend(o.el, { - value: o.value - }), this); - - this.popupView.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - if (o.showLine) { - this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1))); - this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1))); - } - - return { - type: "bi.vertical", - cls: (o.showLine && !o.isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", - scrolly: null, - items: [ - this.popupView, - ], - }; - }, - - setValue: function (v) { - this.popupView.setValue(v); - }, - - getValue: function () { - return this.popupView.getValue(); - }, - - populate: function (items) { - this.popupView.populate(items); - }, - - getAllLeaves: function () { - return this.popupView && this.popupView.getAllLeaves(); +import { Controller, createWidget, pixFormat, shortcut, Widget } from "@/core"; + +@shortcut() +export class TreeExpanderPopup extends Widget { + static xtype = "bi.tree_expander.popup"; + + props() { + return { + baseCls: "bi-tree-expander-popup", + layer: 0, // 第几层级 + el: {}, + isLastNode: false, + showLine: true, + }; + } + + render() { + const self = this; + const { el, value, layer, showLine, isLastNode } = this.options; + const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; + + this.popupView = createWidget({ + ...el, + value, + }, this); + + this.popupView.on(Controller.EVENT_CHANGE, function () { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }); + + if (showLine) { + this.popupView.element.css("margin-left", pixFormat(-offset * (layer + 1))); + this.element.css("margin-left", pixFormat(offset * (layer + 1))); } - }); - BI.shortcut("bi.tree_expander.popup", Widget); -}()); + return { + type: "bi.vertical", + cls: (showLine && !isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", + scrolly: null, + items: [ + this.popupView + ], + }; + } + + setValue(v) { + this.popupView.setValue(v); + } + + getValue() { + return this.popupView.getValue(); + } + + populate(items) { + this.popupView.populate(items); + } + + getAllLeaves() { + return this.popupView && this.popupView.getAllLeaves(); + } +} diff --git a/src/case/ztree/1.asynctree.js b/src/case/ztree/asynctree.js similarity index 61% rename from src/case/ztree/1.asynctree.js rename to src/case/ztree/asynctree.js index ef44f50d3..d8d7028c6 100644 --- a/src/case/ztree/1.asynctree.js +++ b/src/case/ztree/asynctree.js @@ -1,77 +1,43 @@ -/** - * guy - * 异步树 - * @class BI.AsyncTree - * @extends BI.TreeView - */ -BI.AsyncTree = BI.inherit(BI.TreeView, { - _defaultConfig: function () { - return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), { +import { cjkEncodeDO, deepClone, each, extend, isEmpty, isNotNull, isNull, shortcut } from "@/core"; +import { TreeView } from "./treeview"; +import { TreeRenderPageService } from "./treerender.page.service"; + +@shortcut() +export class Asynctree extends TreeView { + static xtype = "bi.async_tree"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { showIcon: false, showLine: true, }); - }, - _init: function () { - BI.AsyncTree.superclass._init.apply(this, arguments); - var self = this; - this.service = new BI.TreeRenderPageService({ - subNodeListGetter: function (tId) { + } + + _init() { + super._init(...arguments); + const self = this; + this.service = new TreeRenderPageService({ + subNodeListGetter(tId) { // 获取待检测的子节点列表, ztree并没有获取节点列表dom的API, 此处使用BI.$获取 - return BI.$("#" + self.id + " #" + tId + "_ul"); - } + return BI.$(`#${self.id} #${tId}_ul`); + }, }); - }, + } // 配置属性 - _configSetting: function () { - var o = this.options; - var paras = this.options.paras; - var self = this; - var setting = { - async: { - enable: false, // 很明显这棵树把异步请求关掉了，所有的异步请求都是手动控制的 - otherParam: BI.cjkEncodeDO(paras) - }, - check: { - enable: true - }, - data: { - key: { - title: "title", - name: "text" - }, - simpleData: { - enable: true - } - }, - view: { - showIcon: o.showIcon, - expandSpeed: "", - nameIsHTML: true, - dblClickExpand: false, - showLine: o.showLine, - nodeClasses: function (treeId, treeNode) { - return { add: [treeNode.iconCls || ""] }; - } - }, - callback: { - beforeCheck: beforeCheck, - onCheck: onCheck, - beforeExpand: beforeExpand, - onExpand: onExpand, - onCollapse: onCollapse, - onClick: onClick, - } - }; + _configSetting() { + const o = this.options; + const paras = this.options.paras; + const self = this; function onClick(event, treeId, treeNode) { if (treeNode.disabled) { return false; } - var zTree = BI.$.fn.zTree.getZTreeObj(treeId); + const zTree = BI.$.fn.zTree.getZTreeObj(treeId); // 当前点击节点的状态是半选，且为true_part, 则将其改为false_part,使得点击半选后切换到的是全选 - var checked = treeNode.checked; - var status = treeNode.getCheckStatus(); + let checked = treeNode.checked; + const status = treeNode.getCheckStatus(); if (status.half === true && status.checked === true) { checked = false; } @@ -83,13 +49,13 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { return false; } // 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck，改之前就获取一下 - var status = treeNode.getCheckStatus(); + const status = treeNode.getCheckStatus(); treeNode.halfCheck = false; if (treeNode.checked === true) { // 将展开的节点halfCheck设为false，解决展开节点存在halfCheck=true的情况 guy // 所有的半选状态都需要取消halfCheck=true的情况 function track(children) { - BI.each(children, function (i, ch) { + each(children, (i, ch) => { ch.halfCheck = false; track(ch.children); }); @@ -97,9 +63,9 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { track(treeNode.children); - var treeObj = BI.$.fn.zTree.getZTreeObj(treeId); - var nodes = treeObj.getSelectedNodes(); - BI.each(nodes, function (index, node) { + const treeObj = BI.$.fn.zTree.getZTreeObj(treeId); + const nodes = treeObj.getSelectedNodes(); + each(nodes, (index, node) => { node.halfCheck = false; }); } @@ -128,24 +94,59 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { treeNode.halfCheck = false; } - return setting; - }, + return { + async: { + enable: false, // 很明显这棵树把异步请求关掉了，所有的异步请求都是手动控制的 + otherParam: cjkEncodeDO(paras), + }, + check: { + enable: true, + }, + data: { + key: { + title: "title", + name: "text", + }, + simpleData: { + enable: true, + }, + }, + view: { + showIcon: o.showIcon, + expandSpeed: "", + nameIsHTML: true, + dblClickExpand: false, + showLine: o.showLine, + nodeClasses(treeId, treeNode) { + return { add: [treeNode.iconCls || ""] }; + }, + }, + callback: { + beforeCheck, + onCheck, + beforeExpand, + onExpand, + onCollapse, + onClick, + }, + }; + } // 用来更新this.options.paras.selectedValues, 和ztree内部无关 - _selectTreeNode: function (treeId, treeNode) { - var self = this, o = this.options; - var parentValues = BI.deepClone(treeNode.parentValues || self._getParentValues(treeNode)); - var name = this._getNodeValue(treeNode); + _selectTreeNode(treeId, treeNode) { + const self = this; + let parentValues = deepClone(treeNode.parentValues || self._getParentValues(treeNode)); + let name = this._getNodeValue(treeNode); // var values = parentValues.concat([name]); if (treeNode.checked === true) { this._addTreeNode(this.options.paras.selectedValues, parentValues, name, {}); } else { - var tNode = treeNode; - var pNode = this._getTree(this.options.paras.selectedValues, parentValues); - if (BI.isNotNull(pNode[name])) { + let tNode = treeNode; + let pNode = this._getTree(this.options.paras.selectedValues, parentValues); + if (isNotNull(pNode[name])) { delete pNode[name]; } - while (tNode != null && BI.isEmpty(pNode)) { + while (tNode != null && isEmpty(pNode)) { parentValues = parentValues.slice(0, parentValues.length - 1); tNode = tNode.getParentNode(); if (tNode != null) { @@ -156,14 +157,15 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { } this.options.paras.selectedValues = this._getJoinValue(); } - BI.AsyncTree.superclass._selectTreeNode.apply(self, arguments); - }, + super._selectTreeNode(...arguments); + } // 展开节点 - _beforeExpandNode: function (treeId, treeNode) { - var self = this, o = this.options; - var complete = function (d) { - var nodes = d.items || []; + _beforeExpandNode(treeId, treeNode) { + const self = this, o = this.options; + + function complete(d) { + const nodes = d.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes), !!d.hasNext); } @@ -176,49 +178,48 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { } else { self.service.removeNodeList(treeNode.tId); } - } function getNodes(options) { // console.log(times); options = options || {}; - var parentValues = treeNode.parentValues || self._getParentValues(treeNode); - var op = BI.extend({}, o.paras, { + const parentValues = treeNode.parentValues || self._getParentValues(treeNode); + const op = extend({}, o.paras, { id: treeNode.id, times: options.times, parentValues: parentValues.concat(self._getNodeValue(treeNode)), - checkState: treeNode.getCheckStatus() + checkState: treeNode.getCheckStatus(), }, options); o.itemsCreator(op, complete); } // 展开节点会将halfCheck置为false以开启自动计算半选, 所以第一次展开节点的时候需要在置为false之前获取配置 - var checkState = treeNode.getCheckStatus(); + const checkState = treeNode.getCheckStatus(); if (!treeNode.children && !treeNode.requested) { treeNode.requested = true; - setTimeout(function () { + setTimeout(() => { getNodes({ times: 1, - checkState: checkState + checkState, }); }, 17); } - }, + } // a,b 两棵树 // a->b b->a 做两次校验, 构造一个校验后的map // e.g. 以a为基准，如果b没有此节点，则在map中添加。 如b有,且是全选的, 则在map中构造全选（为什么不添加a的值呢？ 因为这次是取并集）, 如果b中也有和a一样的存值，就递归 - _join: function (valueA, valueB) { - var self = this; - var map = {}; + _join(valueA, valueB) { + const self = this; + const map = {}; track([], valueA, valueB); track([], valueB, valueA); function track(parent, node, compare) { - BI.each(node, function (n, item) { - if (BI.isNull(compare[n])) { + each(node, (n, item) => { + if (isNull(compare[n])) { self._addTreeNode(map, parent, n, item); - } else if (BI.isEmpty(compare[n])) { + } else if (isEmpty(compare[n])) { self._addTreeNode(map, parent, n, item); } else { track(parent.concat([n]), node[n], compare[n]); @@ -227,38 +228,37 @@ BI.AsyncTree = BI.inherit(BI.TreeView, { } return map; - }, + } - hasChecked: function () { - return !BI.isEmpty(this.options.paras.selectedValues) || BI.AsyncTree.superclass.hasChecked.apply(this, arguments); - }, + hasChecked() { + return !isEmpty(this.options.paras.selectedValues) || super.hasChecked(...arguments); + } - _getJoinValue: function () { + _getJoinValue() { if (!this.nodes) { return this.options.paras.selectedValues || {}; } - var checkedValues = this._getSelectedValues(); - if (BI.isEmpty(checkedValues)) { - return BI.deepClone(this.options.paras.selectedValues); + const checkedValues = this._getSelectedValues(); + if (isEmpty(checkedValues)) { + return deepClone(this.options.paras.selectedValues); } - if (BI.isEmpty(this.options.paras.selectedValues)) { + if (isEmpty(this.options.paras.selectedValues)) { return checkedValues; } + return this._join(checkedValues, this.options.paras.selectedValues); - }, + } - getValue: function () { + getValue() { return this._getJoinValue(); - }, + } // 生成树方法 - stroke: function (config) { + stroke(config) { delete this.options.keyword; this.service.clear(); - BI.extend(this.options.paras, config); - var setting = this._configSetting(); + extend(this.options.paras, config); + const setting = this._configSetting(); this._initTree(setting); } -}); - -BI.shortcut("bi.async_tree", BI.AsyncTree); +} diff --git a/src/case/ztree/index.js b/src/case/ztree/index.js new file mode 100644 index 000000000..d5cbfc63a --- /dev/null +++ b/src/case/ztree/index.js @@ -0,0 +1,14 @@ +import "./jquery.ztree.core-3.5"; +import "./jquery.ztree.excheck-3.5"; + +export * from "./treeview"; +export * from "./asynctree"; +export * from "./parttree"; +export * from "./tree.display"; +export * from "./tree.list.display"; +export * from "./tree.simple"; +export * from "./treerender.scroll.service"; +export * from "./treerender.page.service"; +export * from "./list/listtreeview"; +export * from "./list/listasynctree"; +export * from "./list/listparttree"; diff --git a/src/case/ztree/jquery.ztree.core-3.5.js b/src/case/ztree/jquery.ztree.core-3.5.js index 875f33e67..f4e899044 100644 --- a/src/case/ztree/jquery.ztree.core-3.5.js +++ b/src/case/ztree/jquery.ztree.core-3.5.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /* * JQuery zTree core * v3.5.48 diff --git a/src/case/ztree/jquery.ztree.excheck-3.5.js b/src/case/ztree/jquery.ztree.excheck-3.5.js index e28915a6f..ea1f6a945 100644 --- a/src/case/ztree/jquery.ztree.excheck-3.5.js +++ b/src/case/ztree/jquery.ztree.excheck-3.5.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /* * JQuery zTree excheck v3.5.18 * http://zTree.me/ @@ -10,602 +11,606 @@ * email: hunter.z@263.net * Date: 2015-06-18 */ -(function($){ +(function ($) { //default consts of excheck var _consts = { - event: { - CHECK: "ztree_check" + event: { + CHECK: "ztree_check" + }, + id: { + CHECK: "_check" + }, + checkbox: { + STYLE: "checkbox", + DEFAULT: "chk", + DISABLED: "disable", + FALSE: "false", + TRUE: "true", + FULL: "full", + PART: "part", + FOCUS: "focus" + }, + radio: { + STYLE: "radio", + TYPE_ALL: "all", + TYPE_LEVEL: "level" + } }, - id: { - CHECK: "_check" + //default setting of excheck + _setting = { + check: { + enable: false, + autoCheckTrigger: false, + chkStyle: _consts.checkbox.STYLE, + nocheckInherit: false, + chkDisabledInherit: false, + radioType: _consts.radio.TYPE_LEVEL, + chkboxType: { + "Y": "ps", + "N": "ps" + } + }, + data: { + key: { + checked: "checked" + } + }, + callback: { + beforeCheck: null, + onCheck: null + } }, - checkbox: { - STYLE: "checkbox", - DEFAULT: "chk", - DISABLED: "disable", - FALSE: "false", - TRUE: "true", - FULL: "full", - PART: "part", - FOCUS: "focus" + //default root of excheck + _initRoot = function (setting) { + var r = data.getRoot(setting); + r.radioCheckedList = []; }, - radio: { - STYLE: "radio", - TYPE_ALL: "all", - TYPE_LEVEL: "level" - } - }, - //default setting of excheck - _setting = { - check: { - enable: false, - autoCheckTrigger: false, - chkStyle: _consts.checkbox.STYLE, - nocheckInherit: false, - chkDisabledInherit: false, - radioType: _consts.radio.TYPE_LEVEL, - chkboxType: { - "Y": "ps", - "N": "ps" - } + //default cache of excheck + _initCache = function (treeId) { }, - data: { - key: { - checked: "checked" - } + //default bind event of excheck + _bindEvent = function (setting) { + var o = setting.treeObj, + c = consts.event; + o.bind(c.CHECK, function (event, srcEvent, treeId, node) { + event.srcEvent = srcEvent; + tools.apply(setting.callback.onCheck, [event, treeId, node]); + }); }, - callback: { - beforeCheck:null, - onCheck:null - } - }, - //default root of excheck - _initRoot = function (setting) { - var r = data.getRoot(setting); - r.radioCheckedList = []; - }, - //default cache of excheck - _initCache = function(treeId) {}, - //default bind event of excheck - _bindEvent = function(setting) { - var o = setting.treeObj, - c = consts.event; - o.bind(c.CHECK, function (event, srcEvent, treeId, node) { - event.srcEvent = srcEvent; - tools.apply(setting.callback.onCheck, [event, treeId, node]); - }); - }, - _unbindEvent = function(setting) { - var o = setting.treeObj, - c = consts.event; - o.unbind(c.CHECK); - }, - //default event proxy of excheck - _eventProxy = function(e) { - var target = e.target, - setting = data.getSetting(e.data.treeId), - tId = "", node = null, - nodeEventType = "", treeEventType = "", - nodeEventCallback = null, treeEventCallback = null; + _unbindEvent = function (setting) { + var o = setting.treeObj, + c = consts.event; + o.unbind(c.CHECK); + }, + //default event proxy of excheck + _eventProxy = function (e) { + var target = e.target, + setting = data.getSetting(e.data.treeId), + tId = "", node = null, + nodeEventType = "", treeEventType = "", + nodeEventCallback = null, treeEventCallback = null; - if (tools.eqs(e.type, "mouseover")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode"+ consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "mouseoverCheck"; - } - } else if (tools.eqs(e.type, "mouseout")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode"+ consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "mouseoutCheck"; - } - } else if (tools.eqs(e.type, "click")) { - if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode"+ consts.id.CHECK) !== null) { - tId = tools.getNodeMainDom(target).id; - nodeEventType = "checkNode"; + if (tools.eqs(e.type, "mouseover")) { + if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "mouseoverCheck"; + } + } else if (tools.eqs(e.type, "mouseout")) { + if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "mouseoutCheck"; + } + } else if (tools.eqs(e.type, "click")) { + if (setting.check.enable && tools.eqs(target.tagName, "span") && target.getAttribute("treeNode" + consts.id.CHECK) !== null) { + tId = tools.getNodeMainDom(target).id; + nodeEventType = "checkNode"; + } } - } - if (tId.length>0) { - node = data.getNodeCache(setting, tId); - switch (nodeEventType) { - case "checkNode" : - nodeEventCallback = _handler.onCheckNode; - break; - case "mouseoverCheck" : - nodeEventCallback = _handler.onMouseoverCheck; - break; - case "mouseoutCheck" : - nodeEventCallback = _handler.onMouseoutCheck; - break; + if (tId.length > 0) { + node = data.getNodeCache(setting, tId); + switch (nodeEventType) { + case "checkNode" : + nodeEventCallback = _handler.onCheckNode; + break; + case "mouseoverCheck" : + nodeEventCallback = _handler.onMouseoverCheck; + break; + case "mouseoutCheck" : + nodeEventCallback = _handler.onMouseoutCheck; + break; + } } - } - var proxyResult = { - stop: nodeEventType === "checkNode", - node: node, - nodeEventType: nodeEventType, - nodeEventCallback: nodeEventCallback, - treeEventType: treeEventType, - treeEventCallback: treeEventCallback - }; - return proxyResult - }, - //default init node of excheck - _initNode = function(setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { - if (!n) return; - var checkedKey = setting.data.key.checked; - if (typeof n[checkedKey] == "string") n[checkedKey] = tools.eqs(n[checkedKey], "true"); - n[checkedKey] = !!n[checkedKey]; - n.checkedOld = n[checkedKey]; - if (typeof n.nocheck == "string") n.nocheck = tools.eqs(n.nocheck, "true"); - n.nocheck = !!n.nocheck || (setting.check.nocheckInherit && parentNode && !!parentNode.nocheck); - if (typeof n.chkDisabled == "string") n.chkDisabled = tools.eqs(n.chkDisabled, "true"); - n.chkDisabled = !!n.chkDisabled || (setting.check.chkDisabledInherit && parentNode && !!parentNode.chkDisabled); - if (typeof n.halfCheck == "string") n.halfCheck = tools.eqs(n.halfCheck, "true"); - n.halfCheck = !!n.halfCheck; - n.check_Child_State = -1; - n.check_Focus = false; - n.getCheckStatus = function() {return data.getCheckStatus(setting, n);}; + var proxyResult = { + stop: nodeEventType === "checkNode", + node: node, + nodeEventType: nodeEventType, + nodeEventCallback: nodeEventCallback, + treeEventType: treeEventType, + treeEventCallback: treeEventCallback + }; + return proxyResult; + }, + //default init node of excheck + _initNode = function (setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { + if (!n) return; + var checkedKey = setting.data.key.checked; + if (typeof n[checkedKey] == "string") n[checkedKey] = tools.eqs(n[checkedKey], "true"); + n[checkedKey] = !!n[checkedKey]; + n.checkedOld = n[checkedKey]; + if (typeof n.nocheck == "string") n.nocheck = tools.eqs(n.nocheck, "true"); + n.nocheck = !!n.nocheck || (setting.check.nocheckInherit && parentNode && !!parentNode.nocheck); + if (typeof n.chkDisabled == "string") n.chkDisabled = tools.eqs(n.chkDisabled, "true"); + n.chkDisabled = !!n.chkDisabled || (setting.check.chkDisabledInherit && parentNode && !!parentNode.chkDisabled); + if (typeof n.halfCheck == "string") n.halfCheck = tools.eqs(n.halfCheck, "true"); + n.halfCheck = !!n.halfCheck; + n.check_Child_State = -1; + n.check_Focus = false; + n.getCheckStatus = function () { + return data.getCheckStatus(setting, n); + }; - if (setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL && n[checkedKey] ) { - var r = data.getRoot(setting); - r.radioCheckedList.push(n); - } - }, - //add dom for check - _beforeA = function(setting, node, html) { - var checkedKey = setting.data.key.checked; - if (setting.check.enable) { - data.makeChkFlag(setting, node); - html.push(""); - } - }, - //update zTreeObj, add method of check - _zTreeTools = function(setting, zTreeTools) { - zTreeTools.checkNode = function(node, checked, checkTypeFlag, callbackFlag) { - var checkedKey = this.setting.data.key.checked; - if (node.chkDisabled === true) return; - if (checked !== true && checked !== false) { - checked = !node[checkedKey]; + if (setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL && n[checkedKey]) { + var r = data.getRoot(setting); + r.radioCheckedList.push(n); } - callbackFlag = !!callbackFlag; - - if (node[checkedKey] === checked && !checkTypeFlag) { - return; - } else if (callbackFlag && tools.apply(this.setting.callback.beforeCheck, [this.setting.treeId, node], true) == false) { - return; + }, + //add dom for check + _beforeA = function (setting, node, html) { + var checkedKey = setting.data.key.checked; + if (setting.check.enable) { + data.makeChkFlag(setting, node); + html.push(""); } - if (tools.uCanDo(this.setting) && this.setting.check.enable && node.nocheck !== true) { - node[checkedKey] = checked; - var checkObj = $$(node, consts.id.CHECK, this.setting); - if (checkTypeFlag || this.setting.check.chkStyle === consts.radio.STYLE) view.checkNodeRelation(this.setting, node); - view.setChkClass(this.setting, checkObj, node); - view.repairParentChkClassWithSelf(this.setting, node); - if (callbackFlag) { - this.setting.treeObj.trigger(consts.event.CHECK, [null, this.setting.treeId, node]); + }, + //update zTreeObj, add method of check + _zTreeTools = function (setting, zTreeTools) { + zTreeTools.checkNode = function (node, checked, checkTypeFlag, callbackFlag) { + var checkedKey = this.setting.data.key.checked; + if (node.chkDisabled === true) return; + if (checked !== true && checked !== false) { + checked = !node[checkedKey]; } - } - } + callbackFlag = !!callbackFlag; - zTreeTools.checkAllNodes = function(checked) { - view.repairAllChk(this.setting, !!checked); - } + if (node[checkedKey] === checked && !checkTypeFlag) { + return; + } else if (callbackFlag && tools.apply(this.setting.callback.beforeCheck, [this.setting.treeId, node], true) == false) { + return; + } + if (tools.uCanDo(this.setting) && this.setting.check.enable && node.nocheck !== true) { + node[checkedKey] = checked; + var checkObj = $$(node, consts.id.CHECK, this.setting); + if (checkTypeFlag || this.setting.check.chkStyle === consts.radio.STYLE) view.checkNodeRelation(this.setting, node); + view.setChkClass(this.setting, checkObj, node); + view.repairParentChkClassWithSelf(this.setting, node); + if (callbackFlag) { + this.setting.treeObj.trigger(consts.event.CHECK, [null, this.setting.treeId, node]); + } + } + }; - zTreeTools.getCheckedNodes = function(checked) { - var childKey = this.setting.data.key.children; - checked = (checked !== false); - return data.getTreeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey], checked); - } + zTreeTools.checkAllNodes = function (checked) { + view.repairAllChk(this.setting, !!checked); + }; - zTreeTools.getChangeCheckedNodes = function() { - var childKey = this.setting.data.key.children; - return data.getTreeChangeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey]); - } + zTreeTools.getCheckedNodes = function (checked) { + var childKey = this.setting.data.key.children; + checked = (checked !== false); + return data.getTreeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey], checked); + }; - zTreeTools.setChkDisabled = function(node, disabled, inheritParent, inheritChildren) { - disabled = !!disabled; - inheritParent = !!inheritParent; - inheritChildren = !!inheritChildren; - view.repairSonChkDisabled(this.setting, node, disabled, inheritChildren); - view.repairParentChkDisabled(this.setting, node.getParentNode(), disabled, inheritParent); - } + zTreeTools.getChangeCheckedNodes = function () { + var childKey = this.setting.data.key.children; + return data.getTreeChangeCheckedNodes(this.setting, data.getRoot(this.setting)[childKey]); + }; - var _updateNode = zTreeTools.updateNode; - zTreeTools.updateNode = function(node, checkTypeFlag) { - if (_updateNode) _updateNode.apply(zTreeTools, arguments); - if (!node || !this.setting.check.enable) return; - var nObj = $$(node, this.setting); - if (nObj.get(0) && tools.uCanDo(this.setting)) { - var checkObj = $$(node, consts.id.CHECK, this.setting); - if (checkTypeFlag == true || this.setting.check.chkStyle === consts.radio.STYLE) view.checkNodeRelation(this.setting, node); - view.setChkClass(this.setting, checkObj, node); - view.repairParentChkClassWithSelf(this.setting, node); - } - } - }, - //method of operate data - _data = { - getRadioCheckedList: function(setting) { - var checkedList = data.getRoot(setting).radioCheckedList; - for (var i=0, j=checkedList.length; i -1 && node.check_Child_State < 2) : (node.check_Child_State > 0))) }; - return r; }, - getTreeCheckedNodes: function(setting, nodes, checked, results) { - if (!nodes) return []; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - onlyOne = (checked && setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL); - results = !results ? [] : results; - for (var i = 0, l = nodes.length; i < l; i++) { - if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] == checked) { - results.push(nodes[i]); - if(onlyOne) { - break; + //method of operate data + _data = { + getRadioCheckedList: function (setting) { + var checkedList = data.getRoot(setting).radioCheckedList; + for (var i = 0, j = checkedList.length; i < j; i++) { + if (!data.getNodeCache(setting, checkedList[i].tId)) { + checkedList.splice(i, 1); + i--; + j--; } } - data.getTreeCheckedNodes(setting, nodes[i][childKey], checked, results); - if(onlyOne && results.length > 0) { - break; + return checkedList; + }, + getCheckStatus: function (setting, node) { + if (!setting.check.enable || node.nocheck || node.chkDisabled) return null; + var checkedKey = setting.data.key.checked, + r = { + checked: node[checkedKey], + half: node.halfCheck ? node.halfCheck : (setting.check.chkStyle == consts.radio.STYLE ? (node.check_Child_State === 2) : (node[checkedKey] ? (node.check_Child_State > -1 && node.check_Child_State < 2) : (node.check_Child_State > 0))) + }; + return r; + }, + getTreeCheckedNodes: function (setting, nodes, checked, results) { + if (!nodes) return []; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + onlyOne = (checked && setting.check.chkStyle == consts.radio.STYLE && setting.check.radioType == consts.radio.TYPE_ALL); + results = !results ? [] : results; + for (var i = 0, l = nodes.length; i < l; i++) { + if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] == checked) { + results.push(nodes[i]); + if (onlyOne) { + break; + } + } + data.getTreeCheckedNodes(setting, nodes[i][childKey], checked, results); + if (onlyOne && results.length > 0) { + break; + } } - } - return results; - }, - getTreeChangeCheckedNodes: function(setting, nodes, results) { - if (!nodes) return []; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked; - results = !results ? [] : results; - for (var i = 0, l = nodes.length; i < l; i++) { - if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] != nodes[i].checkedOld) { - results.push(nodes[i]); + return results; + }, + getTreeChangeCheckedNodes: function (setting, nodes, results) { + if (!nodes) return []; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked; + results = !results ? [] : results; + for (var i = 0, l = nodes.length; i < l; i++) { + if (nodes[i].nocheck !== true && nodes[i].chkDisabled !== true && nodes[i][checkedKey] != nodes[i].checkedOld) { + results.push(nodes[i]); + } + data.getTreeChangeCheckedNodes(setting, nodes[i][childKey], results); } - data.getTreeChangeCheckedNodes(setting, nodes[i][childKey], results); - } - return results; - }, - makeChkFlag: function(setting, node) { - if (!node) return; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - chkFlag = -1; - if (node[childKey]) { - for (var i = 0, l = node[childKey].length; i < l; i++) { - var cNode = node[childKey][i]; - var tmp = -1; - if (setting.check.chkStyle == consts.radio.STYLE) { - if (cNode.nocheck === true || cNode.chkDisabled === true) { - tmp = cNode.check_Child_State; - } else if (cNode.halfCheck === true) { - tmp = 2; - } else if (cNode[checkedKey]) { - tmp = 2; - } else { - tmp = cNode.check_Child_State > 0 ? 2:0; - } - if (tmp == 2) { - chkFlag = 2; break; - } else if (tmp == 0){ - chkFlag = 0; - } - } else if (setting.check.chkStyle == consts.checkbox.STYLE) { - if (cNode.nocheck === true || cNode.chkDisabled === true) { - tmp = cNode.check_Child_State; - } else if (cNode.halfCheck === true) { - tmp = 1; - } else if (cNode[checkedKey] ) { - tmp = (cNode.check_Child_State === -1 || cNode.check_Child_State === 2) ? 2 : 1; - } else { - tmp = (cNode.check_Child_State > 0) ? 1 : 0; - } - if (tmp === 1) { - chkFlag = 1; break; - } else if (tmp === 2 && chkFlag > -1 && i > 0 && tmp !== chkFlag) { - chkFlag = 1; break; - } else if (chkFlag === 2 && tmp > -1 && tmp < 2) { - chkFlag = 1; break; - } else if (tmp > -1) { - chkFlag = tmp; + return results; + }, + makeChkFlag: function (setting, node) { + if (!node) return; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + chkFlag = -1; + if (node[childKey]) { + for (var i = 0, l = node[childKey].length; i < l; i++) { + var cNode = node[childKey][i]; + var tmp = -1; + if (setting.check.chkStyle == consts.radio.STYLE) { + if (cNode.nocheck === true || cNode.chkDisabled === true) { + tmp = cNode.check_Child_State; + } else if (cNode.halfCheck === true) { + tmp = 2; + } else if (cNode[checkedKey]) { + tmp = 2; + } else { + tmp = cNode.check_Child_State > 0 ? 2 : 0; + } + if (tmp == 2) { + chkFlag = 2; + break; + } else if (tmp == 0) { + chkFlag = 0; + } + } else if (setting.check.chkStyle == consts.checkbox.STYLE) { + if (cNode.nocheck === true || cNode.chkDisabled === true) { + tmp = cNode.check_Child_State; + } else if (cNode.halfCheck === true) { + tmp = 1; + } else if (cNode[checkedKey]) { + tmp = (cNode.check_Child_State === -1 || cNode.check_Child_State === 2) ? 2 : 1; + } else { + tmp = (cNode.check_Child_State > 0) ? 1 : 0; + } + if (tmp === 1) { + chkFlag = 1; + break; + } else if (tmp === 2 && chkFlag > -1 && i > 0 && tmp !== chkFlag) { + chkFlag = 1; + break; + } else if (chkFlag === 2 && tmp > -1 && tmp < 2) { + chkFlag = 1; + break; + } else if (tmp > -1) { + chkFlag = tmp; + } } } } + node.check_Child_State = chkFlag; } - node.check_Child_State = chkFlag; - } - }, - //method of event proxy - _event = { - - }, - //method of event handler - _handler = { - onCheckNode: function (event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkedKey = setting.data.key.checked; - if (tools.apply(setting.callback.beforeCheck, [setting.treeId, node], true) == false) return true; - node[checkedKey] = !node[checkedKey]; - view.checkNodeRelation(setting, node); - var checkObj = $$(node, consts.id.CHECK, setting); - view.setChkClass(setting, checkObj, node); - view.repairParentChkClassWithSelf(setting, node); - setting.treeObj.trigger(consts.event.CHECK, [event, setting.treeId, node]); - return true; }, - onMouseoverCheck: function(event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkObj = $$(node, consts.id.CHECK, setting); - node.check_Focus = true; - view.setChkClass(setting, checkObj, node); - return true; + //method of event proxy + _event = {}, + //method of event handler + _handler = { + onCheckNode: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkedKey = setting.data.key.checked; + if (tools.apply(setting.callback.beforeCheck, [setting.treeId, node], true) == false) return true; + node[checkedKey] = !node[checkedKey]; + view.checkNodeRelation(setting, node); + var checkObj = $$(node, consts.id.CHECK, setting); + view.setChkClass(setting, checkObj, node); + view.repairParentChkClassWithSelf(setting, node); + setting.treeObj.trigger(consts.event.CHECK, [event, setting.treeId, node]); + return true; + }, + onMouseoverCheck: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkObj = $$(node, consts.id.CHECK, setting); + node.check_Focus = true; + view.setChkClass(setting, checkObj, node); + return true; + }, + onMouseoutCheck: function (event, node) { + if (node.chkDisabled === true) return false; + var setting = data.getSetting(event.data.treeId), + checkObj = $$(node, consts.id.CHECK, setting); + node.check_Focus = false; + view.setChkClass(setting, checkObj, node); + return true; + } }, - onMouseoutCheck: function(event, node) { - if (node.chkDisabled === true) return false; - var setting = data.getSetting(event.data.treeId), - checkObj = $$(node, consts.id.CHECK, setting); - node.check_Focus = false; - view.setChkClass(setting, checkObj, node); - return true; - } - }, - //method of tools for zTree - _tools = { - - }, - //method of operate ztree dom - _view = { - checkNodeRelation: function(setting, node) { - var pNode, i, l, - childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - r = consts.radio; - if (setting.check.chkStyle == r.STYLE) { - var checkedList = data.getRadioCheckedList(setting); - if (node[checkedKey]) { - if (setting.check.radioType == r.TYPE_ALL) { - for (i = checkedList.length-1; i >= 0; i--) { - pNode = checkedList[i]; - if (pNode[checkedKey] && pNode != node) { - pNode[checkedKey] = false; - checkedList.splice(i, 1); + //method of tools for zTree + _tools = {}, + //method of operate ztree dom + _view = { + checkNodeRelation: function (setting, node) { + var pNode, i, l, + childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + r = consts.radio; + if (setting.check.chkStyle == r.STYLE) { + var checkedList = data.getRadioCheckedList(setting); + if (node[checkedKey]) { + if (setting.check.radioType == r.TYPE_ALL) { + for (i = checkedList.length - 1; i >= 0; i--) { + pNode = checkedList[i]; + if (pNode[checkedKey] && pNode != node) { + pNode[checkedKey] = false; + checkedList.splice(i, 1); - view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); - if (pNode.parentTId != node.parentTId) { - view.repairParentChkClassWithSelf(setting, pNode); + view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); + if (pNode.parentTId != node.parentTId) { + view.repairParentChkClassWithSelf(setting, pNode); + } + } + } + checkedList.push(node); + } else { + var parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting); + for (i = 0, l = parentNode[childKey].length; i < l; i++) { + pNode = parentNode[childKey][i]; + if (pNode[checkedKey] && pNode != node) { + pNode[checkedKey] = false; + view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); } } } - checkedList.push(node); - } else { - var parentNode = (node.parentTId) ? node.getParentNode() : data.getRoot(setting); - for (i = 0, l = parentNode[childKey].length; i < l; i++) { - pNode = parentNode[childKey][i]; - if (pNode[checkedKey] && pNode != node) { - pNode[checkedKey] = false; - view.setChkClass(setting, $$(pNode, consts.id.CHECK, setting), pNode); + } else if (setting.check.radioType == r.TYPE_ALL) { + for (i = 0, l = checkedList.length; i < l; i++) { + if (node == checkedList[i]) { + checkedList.splice(i, 1); + break; } } } - } else if (setting.check.radioType == r.TYPE_ALL) { - for (i = 0, l = checkedList.length; i < l; i++) { - if (node == checkedList[i]) { - checkedList.splice(i, 1); - break; - } + + } else { + if (node[checkedKey] && (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.Y.indexOf("s") > -1)) { + view.setSonNodeCheckBox(setting, node, true); + } + if (!node[checkedKey] && (!node[childKey] || node[childKey].length == 0 || setting.check.chkboxType.N.indexOf("s") > -1)) { + view.setSonNodeCheckBox(setting, node, false); + } + if (node[checkedKey] && setting.check.chkboxType.Y.indexOf("p") > -1) { + view.setParentNodeCheckBox(setting, node, true); + } + if (!node[checkedKey] && setting.check.chkboxType.N.indexOf("p") > -1) { + view.setParentNodeCheckBox(setting, node, false); } } - - } else { - if (node[checkedKey] && (!node[childKey] || node[childKey].length==0 || setting.check.chkboxType.Y.indexOf("s") > -1)) { - view.setSonNodeCheckBox(setting, node, true); + }, + makeChkClass: function (setting, node) { + var checkedKey = setting.data.key.checked, + c = consts.checkbox, r = consts.radio, + checkboxType = setting.check.chkboxType; + var notEffectByOtherNode = (checkboxType.Y === "" && checkboxType.N === ""); + fullStyle = ""; + if (node.chkDisabled === true) { + fullStyle = c.DISABLED; + } else if (node.halfCheck) { + fullStyle = c.PART; + } else if (setting.check.chkStyle == r.STYLE) { + fullStyle = (node.check_Child_State < 1) ? c.FULL : c.PART; + } else { + fullStyle = node[checkedKey] ? ((node.check_Child_State === 2 || node.check_Child_State === -1) || notEffectByOtherNode ? c.FULL : c.PART) : ((node.check_Child_State < 1 || notEffectByOtherNode) ? c.FULL : c.PART); } - if (!node[checkedKey] && (!node[childKey] || node[childKey].length==0 || setting.check.chkboxType.N.indexOf("s") > -1)) { - view.setSonNodeCheckBox(setting, node, false); + var chkName = setting.check.chkStyle + "_" + (node[checkedKey] ? c.TRUE : c.FALSE) + "_" + fullStyle; + chkName = (node.check_Focus && node.chkDisabled !== true) ? chkName + "_" + c.FOCUS : chkName; + var chClass = consts.className.BUTTON + " " + c.DEFAULT + " " + chkName; + switch (chkName) { + case 'checkbox_true_part': + case 'checkbox_true_part_focus': + chClass += ' bi-half-button bi-high-light-border'; + break; + case 'checkbox_true_full': + case 'checkbox_true_full_focus': + chClass += ' bi-checkbox checkbox-content bi-high-light-background active'; + break; + case 'checkbox_false_full': + case 'checkbox_false_full_focus': + default: + chClass += ' bi-checkbox checkbox-content'; + break; } - if (node[checkedKey] && setting.check.chkboxType.Y.indexOf("p") > -1) { - view.setParentNodeCheckBox(setting, node, true); + return chClass + (node.disabled ? " disabled" : ""); + }, + repairAllChk: function (setting, checked) { + if (setting.check.enable && setting.check.chkStyle === consts.checkbox.STYLE) { + var checkedKey = setting.data.key.checked, + childKey = setting.data.key.children, + root = data.getRoot(setting); + for (var i = 0, l = root[childKey].length; i < l; i++) { + var node = root[childKey][i]; + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = checked; + } + view.setSonNodeCheckBox(setting, node, checked); + } } - if (!node[checkedKey] && setting.check.chkboxType.N.indexOf("p") > -1) { - view.setParentNodeCheckBox(setting, node, false); + }, + repairChkClass: function (setting, node) { + if (!node) return; + data.makeChkFlag(setting, node); + if (node.nocheck !== true) { + var checkObj = $$(node, consts.id.CHECK, setting); + view.setChkClass(setting, checkObj, node); } - } - }, - makeChkClass: function(setting, node) { - var checkedKey = setting.data.key.checked, - c = consts.checkbox, r = consts.radio, - checkboxType = setting.check.chkboxType; - var notEffectByOtherNode = (checkboxType.Y === "" && checkboxType.N === ""); - fullStyle = ""; - if (node.chkDisabled === true) { - fullStyle = c.DISABLED; - } else if (node.halfCheck) { - fullStyle = c.PART; - } else if (setting.check.chkStyle == r.STYLE) { - fullStyle = (node.check_Child_State < 1)? c.FULL:c.PART; - } else { - fullStyle = node[checkedKey] ? ((node.check_Child_State === 2 || node.check_Child_State === -1) || notEffectByOtherNode ? c.FULL:c.PART) : ((node.check_Child_State < 1 || notEffectByOtherNode)? c.FULL:c.PART); - } - var chkName = setting.check.chkStyle + "_" + (node[checkedKey] ? c.TRUE : c.FALSE) + "_" + fullStyle; - chkName = (node.check_Focus && node.chkDisabled !== true) ? chkName + "_" + c.FOCUS : chkName; - var chClass = consts.className.BUTTON + " " + c.DEFAULT + " " + chkName; - switch (chkName) { - case 'checkbox_true_part': - case 'checkbox_true_part_focus': - chClass += ' bi-half-button bi-high-light-border'; - break; - case 'checkbox_true_full': - case 'checkbox_true_full_focus': - chClass += ' bi-checkbox checkbox-content bi-high-light-background active'; - break; - case 'checkbox_false_full': - case 'checkbox_false_full_focus': - default: - chClass += ' bi-checkbox checkbox-content'; - break; - } - return chClass + (node.disabled ? " disabled" : ""); - }, - repairAllChk: function(setting, checked) { - if (setting.check.enable && setting.check.chkStyle === consts.checkbox.STYLE) { - var checkedKey = setting.data.key.checked, - childKey = setting.data.key.children, - root = data.getRoot(setting); - for (var i = 0, l = root[childKey].length; i 0) { + view.repairParentChkClass(setting, node[childKey][0]); + } else { + view.repairParentChkClass(setting, node); + } + }, + repairSonChkDisabled: function (setting, node, chkDisabled, inherit) { + if (!node) return; + var childKey = setting.data.key.children; + if (node.chkDisabled != chkDisabled) { + node.chkDisabled = chkDisabled; + } + view.repairChkClass(setting, node); + if (node[childKey] && inherit) { + for (var i = 0, l = node[childKey].length; i < l; i++) { + var sNode = node[childKey][i]; + view.repairSonChkDisabled(setting, sNode, chkDisabled, inherit); } - view.setSonNodeCheckBox(setting, node, checked); } - } - }, - repairChkClass: function(setting, node) { - if (!node) return; - data.makeChkFlag(setting, node); - if (node.nocheck !== true) { - var checkObj = $$(node, consts.id.CHECK, setting); - view.setChkClass(setting, checkObj, node); - } - }, - repairParentChkClass: function(setting, node) { - if (!node || !node.parentTId) return; - var pNode = node.getParentNode(); - view.repairChkClass(setting, pNode); - view.repairParentChkClass(setting, pNode); - }, - repairParentChkClassWithSelf: function(setting, node) { - if (!node) return; - var childKey = setting.data.key.children; - if (node[childKey] && node[childKey].length > 0) { - view.repairParentChkClass(setting, node[childKey][0]); - } else { - view.repairParentChkClass(setting, node); - } - }, - repairSonChkDisabled: function(setting, node, chkDisabled, inherit) { - if (!node) return; - var childKey = setting.data.key.children; - if (node.chkDisabled != chkDisabled) { - node.chkDisabled = chkDisabled; - } - view.repairChkClass(setting, node); - if (node[childKey] && inherit) { - for (var i = 0, l = node[childKey].length; i < l; i++) { - var sNode = node[childKey][i]; - view.repairSonChkDisabled(setting, sNode, chkDisabled, inherit); + }, + repairParentChkDisabled: function (setting, node, chkDisabled, inherit) { + if (!node) return; + if (node.chkDisabled != chkDisabled && inherit) { + node.chkDisabled = chkDisabled; } - } - }, - repairParentChkDisabled: function(setting, node, chkDisabled, inherit) { - if (!node) return; - if (node.chkDisabled != chkDisabled && inherit) { - node.chkDisabled = chkDisabled; - } - view.repairChkClass(setting, node); - view.repairParentChkDisabled(setting, node.getParentNode(), chkDisabled, inherit); - }, - setChkClass: function(setting, obj, node) { - if (!obj) return; - if (node.nocheck === true) { - obj.hide(); - } else { - obj.show(); - } - obj.attr('class', view.makeChkClass(setting, node)); - }, - setParentNodeCheckBox: function(setting, node, value, srcNode) { - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - checkObj = $$(node, consts.id.CHECK, setting); - if (!srcNode) srcNode = node; - data.makeChkFlag(setting, node); - if (node.nocheck !== true && node.chkDisabled !== true) { - node[checkedKey] = value; - view.setChkClass(setting, checkObj, node); - if (setting.check.autoCheckTrigger && node != srcNode) { - setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); + view.repairChkClass(setting, node); + view.repairParentChkDisabled(setting, node.getParentNode(), chkDisabled, inherit); + }, + setChkClass: function (setting, obj, node) { + if (!obj) return; + if (node.nocheck === true) { + obj.hide(); + } else { + obj.show(); } - } - if (node.parentTId) { - var pSign = true; - if (!value) { - var pNodes = node.getParentNode()[childKey]; - for (var i = 0, l = pNodes.length; i < l; i++) { - if ((pNodes[i].nocheck !== true && pNodes[i].chkDisabled !== true && pNodes[i][checkedKey]) - || ((pNodes[i].nocheck === true || pNodes[i].chkDisabled === true) && pNodes[i].check_Child_State > 0)) { - pSign = false; - break; - } + obj.attr('class', view.makeChkClass(setting, node)); + }, + setParentNodeCheckBox: function (setting, node, value, srcNode) { + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + checkObj = $$(node, consts.id.CHECK, setting); + if (!srcNode) srcNode = node; + data.makeChkFlag(setting, node); + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = value; + view.setChkClass(setting, checkObj, node); + if (setting.check.autoCheckTrigger && node != srcNode) { + setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); } } - if (pSign) { - view.setParentNodeCheckBox(setting, node.getParentNode(), value, srcNode); + if (node.parentTId) { + var pSign = true; + if (!value) { + var pNodes = node.getParentNode()[childKey]; + for (var i = 0, l = pNodes.length; i < l; i++) { + if ((pNodes[i].nocheck !== true && pNodes[i].chkDisabled !== true && pNodes[i][checkedKey]) + || ((pNodes[i].nocheck === true || pNodes[i].chkDisabled === true) && pNodes[i].check_Child_State > 0)) { + pSign = false; + break; + } + } + } + if (pSign) { + view.setParentNodeCheckBox(setting, node.getParentNode(), value, srcNode); + } } - } - }, - setSonNodeCheckBox: function(setting, node, value, srcNode) { - if (!node) return; - var childKey = setting.data.key.children, - checkedKey = setting.data.key.checked, - checkObj = $$(node, consts.id.CHECK, setting); - if (!srcNode) srcNode = node; + }, + setSonNodeCheckBox: function (setting, node, value, srcNode) { + if (!node) return; + var childKey = setting.data.key.children, + checkedKey = setting.data.key.checked, + checkObj = $$(node, consts.id.CHECK, setting); + if (!srcNode) srcNode = node; - var hasDisable = false; - if (node[childKey]) { - for (var i = 0, l = node[childKey].length; i < l && node.chkDisabled !== true; i++) { - var sNode = node[childKey][i]; - view.setSonNodeCheckBox(setting, sNode, value, srcNode); - if (sNode.chkDisabled === true) hasDisable = true; + var hasDisable = false; + if (node[childKey]) { + for (var i = 0, l = node[childKey].length; i < l && node.chkDisabled !== true; i++) { + var sNode = node[childKey][i]; + view.setSonNodeCheckBox(setting, sNode, value, srcNode); + if (sNode.chkDisabled === true) hasDisable = true; + } } - } - if (node != data.getRoot(setting) && node.chkDisabled !== true) { - if (hasDisable && node.nocheck !== true) { - data.makeChkFlag(setting, node); - } - if (node.nocheck !== true && node.chkDisabled !== true) { - node[checkedKey] = value; - if (!hasDisable) node.check_Child_State = (node[childKey] && node[childKey].length > 0) ? (value ? 2 : 0) : -1; - } else { - node.check_Child_State = -1; - } - view.setChkClass(setting, checkObj, node); - if (setting.check.autoCheckTrigger && node != srcNode && node.nocheck !== true && node.chkDisabled !== true) { - setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); + if (node != data.getRoot(setting) && node.chkDisabled !== true) { + if (hasDisable && node.nocheck !== true) { + data.makeChkFlag(setting, node); + } + if (node.nocheck !== true && node.chkDisabled !== true) { + node[checkedKey] = value; + if (!hasDisable) node.check_Child_State = (node[childKey] && node[childKey].length > 0) ? (value ? 2 : 0) : -1; + } else { + node.check_Child_State = -1; + } + view.setChkClass(setting, checkObj, node); + if (setting.check.autoCheckTrigger && node != srcNode && node.nocheck !== true && node.chkDisabled !== true) { + setting.treeObj.trigger(consts.event.CHECK, [null, setting.treeId, node]); + } } - } - } - }, + } + }, - _z = { - tools: _tools, - view: _view, - event: _event, - data: _data - }; + _z = { + tools: _tools, + view: _view, + event: _event, + data: _data + }; $.extend(true, $.fn.zTree.consts, _consts); $.extend(true, $.fn.zTree._z, _z); var zt = $.fn.zTree, - tools = zt._z.tools, - consts = zt.consts, - view = zt._z.view, - data = zt._z.data, - event = zt._z.event, - $$ = tools.$; + tools = zt._z.tools, + consts = zt.consts, + view = zt._z.view, + data = zt._z.data, + event = zt._z.event, + $$ = tools.$; data.exSetting(_setting); data.addInitBind(_bindEvent); @@ -618,22 +623,22 @@ data.addZTreeTools(_zTreeTools); var _createNodes = view.createNodes; - view.createNodes = function(setting, level, nodes, parentNode) { + view.createNodes = function (setting, level, nodes, parentNode) { if (_createNodes) _createNodes.apply(view, arguments); if (!nodes) return; view.repairParentChkClassWithSelf(setting, parentNode); - } + }; var _removeNode = view.removeNode; - view.removeNode = function(setting, node) { + view.removeNode = function (setting, node) { var parentNode = node.getParentNode(); if (_removeNode) _removeNode.apply(view, arguments); if (!node || !parentNode) return; view.repairChkClass(setting, parentNode); view.repairParentChkClass(setting, parentNode); - } + }; var _appendNodes = view.appendNodes; - view.appendNodes = function(setting, level, nodes, parentNode, initFlag, openFlag) { + view.appendNodes = function (setting, level, nodes, parentNode, initFlag, openFlag) { var html = ""; if (_appendNodes) { html = _appendNodes.apply(view, arguments); @@ -642,5 +647,5 @@ data.makeChkFlag(setting, parentNode); } return html; - } -})(BI.jQuery); \ No newline at end of file + }; +})(BI.jQuery); diff --git a/src/case/ztree/list/0.listtreeview.js b/src/case/ztree/list/0.listtreeview.js deleted file mode 100644 index dd9a1f8c8..000000000 --- a/src/case/ztree/list/0.listtreeview.js +++ /dev/null @@ -1,118 +0,0 @@ -/** - * author: windy - * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 - * 返回value格式为[["A"], ["A", "a"]]表示勾选了A且勾选了a - * @class BI.ListTreeView - * @extends BI.TreeView - */ -BI.ListTreeView = BI.inherit(BI.TreeView, { - - _constants: { - SPLIT: "<|>" - }, - - _defaultConfig: function () { - return BI.extend(BI.ListTreeView.superclass._defaultConfig.apply(this, arguments), { - value: {} - }); - }, - _init: function () { - BI.ListTreeView.superclass._init.apply(this, arguments); - var o = this.options; - if(BI.isNotNull(o.value)) { - this.setSelectedValue(o.value); - } - }, - - // 配置属性 - _configSetting: function () { - var paras = this.options.paras; - var self = this; - var setting = { - async: { - enable: false - }, - check: { - enable: true, - chkboxType: {Y: "", N: ""} - }, - data: { - key: { - title: "title", - name: "text" - }, - simpleData: { - enable: true - } - }, - view: { - showIcon: false, - expandSpeed: "", - nameIsHTML: true, - dblClickExpand: false - }, - callback: { - onCheck: onCheck, - onClick: onClick - } - }; - - function onClick (event, treeId, treeNode) { - var zTree = BI.$.fn.zTree.getZTreeObj(treeId); - var checked = treeNode.checked; - self._checkValue(treeNode, !checked); - zTree.checkNode(treeNode, !checked, true, true); - } - - function onCheck (event, treeId, treeNode) { - self._selectTreeNode(treeId, treeNode); - } - - return setting; - }, - - _selectTreeNode: function (treeId, treeNode) { - this._checkValue(treeNode, treeNode.checked); - BI.ListTreeView.superclass._selectTreeNode.apply(this, arguments); - }, - - _transArrayToMap: function (treeArrays) { - var self = this; - var map = {}; - BI.each(treeArrays, function (idx, array) { - var key = array.join(self._constants.SPLIT); - map[key] = true; - }); - return map; - }, - - _transMapToArray: function (treeMap) { - var self = this; - var array = []; - BI.each(treeMap, function (key) { - var item = key.split(self._constants.SPLIT); - array.push(item); - }); - return array; - }, - - _checkValue: function (treeNode, checked) { - var key = BI.concat(this._getParentValues(treeNode), this._getNodeValue(treeNode)).join(this._constants.SPLIT); - if(checked) { - this.storeValue[key] = true; - } else { - delete this.storeValue[key]; - } - }, - - setSelectedValue: function (value) { - this.options.paras.selectedValues = value || []; - this.storeValue = this._transArrayToMap(value); - }, - - getValue: function () { - return this._transMapToArray(this.storeValue); - } -}); - -BI.shortcut("bi.list_tree_view", BI.ListTreeView); \ No newline at end of file diff --git a/src/case/ztree/list/1.listasynctree.js b/src/case/ztree/list/1.listasynctree.js deleted file mode 100644 index 7e1f25b10..000000000 --- a/src/case/ztree/list/1.listasynctree.js +++ /dev/null @@ -1,123 +0,0 @@ -/** - * author: windy - * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 - * 返回value格式为["A", ["A", "a"]]表示勾选了A且勾选了a - * @class BI.ListListAsyncTree - * @extends BI.TreeView - */ -BI.ListAsyncTree = BI.inherit(BI.ListTreeView, { - _defaultConfig: function () { - return BI.extend(BI.ListAsyncTree.superclass._defaultConfig.apply(this, arguments), {}); - }, - _init: function () { - BI.ListAsyncTree.superclass._init.apply(this, arguments); - }, - - // 配置属性 - _configSetting: function () { - var paras = this.options.paras; - var self = this; - var setting = { - async: { - enable: false, // 很明显这棵树把异步请求关掉了，所有的异步请求都是手动控制的 - otherParam: BI.cjkEncodeDO(paras) - }, - check: { - enable: true, - chkboxType: {Y: "", N: ""} - }, - data: { - key: { - title: "title", - name: "text" - }, - simpleData: { - enable: true - } - }, - view: { - showIcon: false, - expandSpeed: "", - nameIsHTML: true, - dblClickExpand: false - }, - callback: { - onCheck: onCheck, - beforeExpand: beforeExpand, - beforeCheck: beforeCheck, - onClick: onClick - } - }; - - function beforeCheck (treeId, treeNode) { - treeNode.half = false; - } - - function onClick (event, treeId, treeNode) { - var zTree = BI.$.fn.zTree.getZTreeObj(treeId); - var checked = treeNode.checked; - self._checkValue(treeNode, !checked); - zTree.checkNode(treeNode, !checked, true, true); - } - - function beforeExpand (treeId, treeNode) { - self._beforeExpandNode(treeId, treeNode); - } - - function onCheck (event, treeId, treeNode) { - self._selectTreeNode(treeId, treeNode); - } - - return setting; - }, - - // 展开节点 - _beforeExpandNode: function (treeId, treeNode) { - var self = this, o = this.options; - var parentValues = treeNode.parentValues || self._getParentValues(treeNode); - var op = BI.extend({}, o.paras, { - id: treeNode.id, - times: 1, - parentValues: parentValues.concat(this._getNodeValue(treeNode)) - }); - var complete = function (d) { - var nodes = d.items || []; - if (nodes.length > 0) { - callback(self._dealWidthNodes(nodes), !!d.hasNext); - } - }; - var times = 1; - - function callback (nodes, hasNext) { - self.nodes.addNodes(treeNode, nodes); - // 展开节点是没有分页的 - if (hasNext === true) { - BI.delay(function () { - times++; - op.times = times; - o.itemsCreator(op, complete); - }, 100); - } - } - - if (!treeNode.children) { - setTimeout(function () { - o.itemsCreator(op, complete); - }, 17); - } - }, - - hasChecked: function () { - return !BI.isEmpty(this.options.paras.selectedValues) || BI.ListAsyncTree.superclass.hasChecked.apply(this, arguments); - }, - - // 生成树方法 - stroke: function (config) { - delete this.options.keyword; - BI.extend(this.options.paras, config); - var setting = this._configSetting(); - this._initTree(setting); - } -}); - -BI.shortcut("bi.list_async_tree", BI.ListAsyncTree); \ No newline at end of file diff --git a/src/case/ztree/list/listasynctree.js b/src/case/ztree/list/listasynctree.js new file mode 100644 index 000000000..019e7f4be --- /dev/null +++ b/src/case/ztree/list/listasynctree.js @@ -0,0 +1,122 @@ +/** + * author: windy + * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 + * 返回value格式为["A", ["A", "a"]]表示勾选了A且勾选了a + * @class ListListAsyncTree + * @extends TreeView + */ + +import { Listtreeview } from "./listtreeview"; +import { cjkEncodeDO, delay, isEmpty, shortcut, extend } from "@/core"; + +@shortcut() +export class Listasynctree extends Listtreeview { + static xtype = "bi.list_async_tree"; + + // 配置属性 + _configSetting() { + const paras = this.options.paras; + const self = this; + + function beforeCheck(treeId, treeNode) { + treeNode.half = false; + } + + function onClick(event, treeId, treeNode) { + const zTree = BI.$.fn.zTree.getZTreeObj(treeId); + const checked = treeNode.checked; + self._checkValue(treeNode, !checked); + zTree.checkNode(treeNode, !checked, true, true); + } + + function beforeExpand(treeId, treeNode) { + self._beforeExpandNode(treeId, treeNode); + } + + function onCheck(event, treeId, treeNode) { + self._selectTreeNode(treeId, treeNode); + } + + return { + async: { + enable: false, // 很明显这棵树把异步请求关掉了，所有的异步请求都是手动控制的 + otherParam: cjkEncodeDO(paras), + }, + check: { + enable: true, + chkboxType: { Y: "", N: "" }, + }, + data: { + key: { + title: "title", + name: "text", + }, + simpleData: { + enable: true, + }, + }, + view: { + showIcon: false, + expandSpeed: "", + nameIsHTML: true, + dblClickExpand: false, + }, + callback: { + onCheck, + beforeExpand, + beforeCheck, + onClick, + }, + }; + } + + // 展开节点 + _beforeExpandNode(treeId, treeNode) { + const self = this, o = this.options; + const parentValues = treeNode.parentValues || self._getParentValues(treeNode); + const op = extend({}, o.paras, { + id: treeNode.id, + times: 1, + parentValues: parentValues.concat(this._getNodeValue(treeNode)), + }); + + function complete(d) { + const nodes = d.items || []; + if (nodes.length > 0) { + callback(self._dealWidthNodes(nodes), !!d.hasNext); + } + }; + let times = 1; + + function callback(nodes, hasNext) { + self.nodes.addNodes(treeNode, nodes); + // 展开节点是没有分页的 + if (hasNext === true) { + delay(() => { + times++; + op.times = times; + o.itemsCreator(op, complete); + }, 100); + } + } + + if (!treeNode.children) { + setTimeout(() => { + o.itemsCreator(op, complete); + }, 17); + } + } + + hasChecked() { + return !isEmpty(this.options.paras.selectedValues) || super.hasChecked(...arguments); + } + + // 生成树方法 + stroke(config) { + delete this.options.keyword; + extend(this.options.paras, config); + const setting = this._configSetting(); + this._initTree(setting); + } +} + diff --git a/src/case/ztree/list/listparttree.js b/src/case/ztree/list/listparttree.js index cc4462166..dd908c36f 100644 --- a/src/case/ztree/list/listparttree.js +++ b/src/case/ztree/list/listparttree.js @@ -1,27 +1,28 @@ /** * guy * 局部树，两个请求树， 第一个请求构造树，第二个请求获取节点 - * @class BI.ListPartTree - * @extends BI.AsyncTree + * @class ListPartTree + * @extends Asynctree */ -BI.ListPartTree = BI.inherit(BI.ListAsyncTree, { - _defaultConfig: function () { - return BI.extend(BI.ListPartTree.superclass._defaultConfig.apply(this, arguments), {}); - }, - _init: function () { - BI.ListPartTree.superclass._init.apply(this, arguments); - }, - _loadMore: function () { - var self = this, o = this.options; - var op = BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_INIT_DATA, - times: ++this.times +import { Listasynctree } from "./listasynctree"; +import { shortcut, extend, Events, delay } from "@/core"; +import { TreeView } from "../treeview"; + +@shortcut() +export class ListPartTree extends Listasynctree { + static xtype = "bi.list_part_tree"; + + _loadMore() { + const self = this, o = this.options; + const op = extend({}, o.paras, { + type: TreeView.REQ_TYPE_INIT_DATA, + times: ++this.times, }); this.tip.setLoading(); - o.itemsCreator(op, function (d) { - var hasNext = !!d.hasNext, nodes = d.items || []; + o.itemsCreator(op, d => { + const hasNext = !!d.hasNext, nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; if (self._stop === true) { return; @@ -35,24 +36,25 @@ BI.ListPartTree = BI.inherit(BI.ListAsyncTree, { self.nodes.addNodes(null, self._dealWidthNodes(nodes)); } }); - }, + } - _initTree: function (setting, keyword) { - var self = this, o = this.options; + _initTree(setting, keyword) { + const self = this, o = this.options; this.times = 1; - var tree = this.tree; + const tree = this.tree; tree.empty(); self.tip.setVisible(false); this.loading(); - var op = BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_INIT_DATA, - times: this.times + const op = extend({}, o.paras, { + type: TreeView.REQ_TYPE_INIT_DATA, + times: this.times, }); - var complete = function (d) { - if (self._stop === true || keyword != o.paras.keyword) { + + function complete(d) { + if (self._stop === true || keyword !== o.paras.keyword) { return; } - var hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; // 没有请求到数据也要初始化空树, 如果不初始化, 树就是上一次构造的树, 节点信息都是过期的 callback(nodes.length > 0 ? self._dealWidthNodes(nodes) : []); @@ -63,30 +65,28 @@ BI.ListPartTree = BI.inherit(BI.ListAsyncTree, { } else { self.tip.setLoaded(); } - self.fireEvent(BI.Events.AFTERINIT); - }; + self.fireEvent(Events.AFTERINIT); + } - function callback (nodes) { + function callback(nodes) { if (self._stop === true) { return; } self.nodes = BI.$.fn.zTree.init(tree.element, setting, nodes); } - BI.delay(function () { + delay(() => { o.itemsCreator(op, complete); }, 100); - }, + } // 生成树方法 - stroke: function (config) { - var o = this.options; + stroke(config) { + const o = this.options; delete o.paras.keyword; - BI.extend(o.paras, config); + extend(o.paras, config); delete o.paras.lastSearchValue; - var setting = this._configSetting(); + const setting = this._configSetting(); this._initTree(setting, o.paras.keyword); } -}); - -BI.shortcut("bi.list_part_tree", BI.ListPartTree); \ No newline at end of file +} diff --git a/src/case/ztree/list/listtreeview.js b/src/case/ztree/list/listtreeview.js new file mode 100644 index 000000000..b31e93869 --- /dev/null +++ b/src/case/ztree/list/listtreeview.js @@ -0,0 +1,121 @@ +/** + * author: windy + * 继承自treeView, 此树的父子节点的勾选状态互不影响, 此树不会有半选节点 + * 返回value格式为[["A"], ["A", "a"]]表示勾选了A且勾选了a + * @class BI.ListTreeView + * @extends BI.TreeView + */ + +import { TreeView } from "../treeview"; +import { extend, isNotNull, concat, each, shortcut } from "@/core"; + +@shortcut() +export class Listtreeview extends TreeView { + static xtype = "bi.list_tree_view"; + + _constants = { + SPLIT: "<|>", + }; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + value: {}, + }); + } + + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.value)) { + this.setSelectedValue(o.value); + } + } + + // 配置属性 + _configSetting() { + const self = this; + + function onClick(event, treeId, treeNode) { + const zTree = BI.$.fn.zTree.getZTreeObj(treeId); + const checked = treeNode.checked; + self._checkValue(treeNode, !checked); + zTree.checkNode(treeNode, !checked, true, true); + } + + function onCheck(event, treeId, treeNode) { + self._selectTreeNode(treeId, treeNode); + } + + return { + async: { + enable: false, + }, + check: { + enable: true, + chkboxType: { Y: "", N: "" }, + }, + data: { + key: { + title: "title", + name: "text", + }, + simpleData: { + enable: true, + }, + }, + view: { + showIcon: false, + expandSpeed: "", + nameIsHTML: true, + dblClickExpand: false, + }, + callback: { + onCheck, + onClick, + }, + }; + } + + _selectTreeNode(treeId, treeNode) { + this._checkValue(treeNode, treeNode.checked); + super._selectTreeNode(...arguments); + } + + _transArrayToMap(treeArrays) { + const map = {}; + each(treeArrays, (idx, array) => { + const key = array.join(this._constants.SPLIT); + map[key] = true; + }); + + return map; + } + + _transMapToArray(treeMap) { + const array = []; + BI.each(treeMap, key => { + const item = key.split(this._constants.SPLIT); + array.push(item); + }); + + return array; + } + + _checkValue(treeNode, checked) { + const key = concat(this._getParentValues(treeNode), this._getNodeValue(treeNode)).join(this._constants.SPLIT); + if (checked) { + this.storeValue[key] = true; + } else { + delete this.storeValue[key]; + } + } + + setSelectedValue(value) { + this.options.paras.selectedValues = value || []; + this.storeValue = this._transArrayToMap(value); + } + + getValue() { + return this._transMapToArray(this.storeValue); + } +} diff --git a/src/case/ztree/parttree.js b/src/case/ztree/parttree.js index 8a347548a..f66c14920 100644 --- a/src/case/ztree/parttree.js +++ b/src/case/ztree/parttree.js @@ -4,20 +4,30 @@ * @class BI.PartTree * @extends BI.AsyncTree */ -BI.PartTree = BI.inherit(BI.AsyncTree, { - _defaultConfig: function () { - return BI.extend(BI.PartTree.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _loadMore: function () { - var self = this, o = this.options; - var op = BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_INIT_DATA, - times: ++this.times +import { isEmpty, shortcut, extend, deepClone, each, isNotEmptyArray, Events, delay, isNull } from "@/core"; +import { Asynctree } from "./asynctree"; +import { TreeView } from "./treeview"; + +@shortcut() +export class PartTree extends Asynctree { + static xtype = "bi.part_tree"; + + static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; + + constructor(...args) { + super(...args); + this.seMethos = super._selectTreeNode; + } + + _loadMore() { + const self = this, o = this.options; + const op = extend({}, o.paras, { + type: TreeView.REQ_TYPE_INIT_DATA, + times: ++this.times, }); this.tip.setLoading(); - o.itemsCreator(op, function (d) { - var hasNext = !!d.hasNext, nodes = d.items || []; + o.itemsCreator(op, d => { + const hasNext = !!d.hasNext, nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; if (self._stop === true) { return; @@ -31,71 +41,73 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { self.nodes.addNodes(null, self._dealWidthNodes(nodes)); } }); - }, + } - _selectTreeNode: function (treeId, treeNode) { - var self = this, o = this.options; - var parentValues = BI.deepClone(treeNode.parentValues || self._getParentValues(treeNode)); - var name = this._getNodeValue(treeNode); - this.fireEvent(BI.PartTree.EVENT_CLICK_TREE_NODE); + _selectTreeNode(...args) { + const self = this, o = this.options; + const [treeId, treeNode] = args; + const parentValues = deepClone(treeNode.parentValues || self._getParentValues(treeNode)); + const name = this._getNodeValue(treeNode); + this.fireEvent(PartTree.EVENT_CLICK_TREE_NODE); if (treeNode.checked === true) { this.options.paras.selectedValues = this._getUnionValue(); - // this._buildTree(self.options.paras.selectedValues, BI.concat(parentValues, name)); - o.itemsCreator(BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_ADJUST_DATA, + // this._buildTree(self.options.paras.selectedValues, concat(parentValues, name)); + o.itemsCreator(extend({}, o.paras, { + type: TreeView.REQ_TYPE_ADJUST_DATA, curSelectedValue: name, - parentValues: parentValues + parentValues, }), function (res) { self.options.paras.selectedValues = res; - BI.AsyncTree.superclass._selectTreeNode.apply(self, arguments); + this.seMethos(...args); }); } else { // 如果选中的值中不存在该值不处理 // 因为反正是不选中，没必要管 - var t = this.options.paras.selectedValues; - var p = parentValues.concat(name); - for (var i = 0, len = p.length; i < len; i++) { + let t = this.options.paras.selectedValues; + const p = parentValues.concat(name); + for (let i = 0, len = p.length; i < len; i++) { t = t[p[i]]; if (t == null) { return; } // 选中中国-江苏, 搜索南京，取消勾选 - if (BI.isEmpty(t)) { + if (isEmpty(t)) { break; } } - o.itemsCreator(BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_SELECT_DATA, + o.itemsCreator(extend({}, o.paras, { + type: TreeView.REQ_TYPE_SELECT_DATA, notSelectedValue: name, - parentValues: parentValues - }), function (new_values) { + parentValues, + }), new_values => { self.options.paras.selectedValues = new_values; - BI.AsyncTree.superclass._selectTreeNode.apply(self, arguments); + this.seMethos(...args); }); } - }, + } - _getSelectedValues: function () { - var self = this; - var hashMap = {}; - var rootNoots = this.nodes.getNodes(); - track(rootNoots); + _getSelectedValues() { + const self = this; + const hashMap = {}; + const rootNodes = this.nodes.getNodes(); + track(rootNodes); function track(nodes) { - BI.each(nodes, function (i, node) { - var checkState = node.getCheckStatus(); + each(nodes, (i, node) => { + const checkState = node.getCheckStatus(); if (checkState.checked === false) { return true; } - var parentValues = node.parentValues || self._getParentValues(node); + const parentValues = node.parentValues || self._getParentValues(node); // 把文字中的html去掉，其实就是把文字颜色去掉 - var values = parentValues.concat([self._getNodeValue(node)]); + const values = parentValues.concat([self._getNodeValue(node)]); self._buildTree(hashMap, values); // if(checkState.checked === true && checkState.half === false && nodes[i].flag === true){ // continue; // } - if (BI.isNotEmptyArray(node.children)) { + if (isNotEmptyArray(node.children)) { track(node.children); + return true; } if (checkState.half === true) { @@ -105,24 +117,25 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { } return hashMap; - }, + } - _initTree: function (setting, keyword) { - var self = this, o = this.options; + _initTree(setting, keyword) { + const self = this, o = this.options; this.times = 1; - var tree = this.tree; + const tree = this.tree; tree.empty(); self.tip.setVisible(false); this.loading(); - var op = BI.extend({}, o.paras, { - type: BI.TreeView.REQ_TYPE_INIT_DATA, - times: this.times + const op = extend({}, o.paras, { + type: TreeView.REQ_TYPE_INIT_DATA, + times: this.times, }); - var complete = function (d) { - if (self._stop === true || keyword != o.paras.keyword) { + + function complete(d) { + if (self._stop === true || keyword !== o.paras.keyword) { return; } - var hasNext = !!d.hasNext, nodes = d.items || []; + const hasNext = !!d.hasNext, nodes = d.items || []; o.paras.lastSearchValue = d.lastSearchValue; // 没有请求到数据也要初始化空树, 如果不初始化, 树就是上一次构造的树, 节点信息都是过期的 callback(nodes.length > 0 ? self._dealWidthNodes(nodes) : []); @@ -133,8 +146,8 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { } else { self.tip.setLoaded(); } - self.fireEvent(BI.Events.AFTERINIT); - }; + self.fireEvent(Events.AFTERINIT); + } function callback(nodes) { if (self._stop === true) { @@ -143,40 +156,41 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { self.nodes = BI.$.fn.zTree.init(tree.element, setting, nodes); } - BI.delay(function () { + delay(() => { o.itemsCreator(op, complete); }, 100); - }, + } - getValue: function () { - return BI.deepClone(this.options.paras.selectedValues || {}); - }, + getValue() { + return deepClone(this.options.paras.selectedValues || {}); + } - _getUnionValue: function () { + _getUnionValue() { if (!this.nodes) { return {}; } - var checkedValues = this._getSelectedValues(); - if (BI.isEmpty(checkedValues)) { - return BI.deepClone(this.options.paras.selectedValues); + const checkedValues = this._getSelectedValues(); + if (isEmpty(checkedValues)) { + return deepClone(this.options.paras.selectedValues); } - if (BI.isEmpty(this.options.paras.selectedValues)) { + if (isEmpty(this.options.paras.selectedValues)) { return checkedValues; } + return this._union(checkedValues, this.options.paras.selectedValues); - }, + } - _union: function (valueA, valueB) { - var self = this; - var map = {}; + _union(valueA, valueB) { + const self = this; + const map = {}; track([], valueA, valueB); track([], valueB, valueA); function track(parent, node, compare) { - BI.each(node, function (n, item) { - if (BI.isNull(compare[n])) { + each(node, (n, item) => { + if (isNull(compare[n])) { self._addTreeNode(map, parent, n, item); - } else if (BI.isEmpty(compare[n])) { + } else if (isEmpty(compare[n])) { self._addTreeNode(map, parent, n, {}); } else { track(parent.concat([n]), node[n], compare[n]); @@ -185,18 +199,15 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { } return map; - }, + } // 生成树方法 - stroke: function (config) { - var o = this.options; + stroke(config) { + const o = this.options; delete o.paras.keyword; - BI.extend(o.paras, config); + extend(o.paras, config); delete o.paras.lastSearchValue; - var setting = this._configSetting(); + const setting = this._configSetting(); this._initTree(setting, o.paras.keyword); } -}); - -BI.PartTree.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; -BI.shortcut("bi.part_tree", BI.PartTree); +} diff --git a/src/case/ztree/tree.display.js b/src/case/ztree/tree.display.js index 4c0135675..a385d58c6 100644 --- a/src/case/ztree/tree.display.js +++ b/src/case/ztree/tree.display.js @@ -4,63 +4,64 @@ * @class BI.DisplayTree * @extends BI.TreeView */ -BI.DisplayTree = BI.inherit(BI.TreeView, { - _defaultConfig: function () { - return BI.extend(BI.DisplayTree.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-display-tree" + +import { extend } from "@/core"; +import { TreeView } from "./treeview"; + +export class DisplayTree extends TreeView { + static xtype = "bi.display_tree"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { + extraCls: "bi-display-tree", }); - }, + } // 配置属性 - _configSetting: function () { - var setting = { + _configSetting() { + function beforeCollapse(treeId, treeNode) { + return false; + } + + return { view: { selectedMulti: false, dblClickExpand: false, showIcon: false, nameIsHTML: true, - showTitle: false + showTitle: false, }, data: { key: { title: "title", - name: "text" + name: "text", }, simpleData: { - enable: true - } + enable: true, + }, }, callback: { - beforeCollapse: beforeCollapse - } + beforeCollapse, + }, }; + } - function beforeCollapse(treeId, treeNode) { - return false; - } - - return setting; - }, - - _dealWidthNodes: function (nodes) { - nodes = BI.DisplayTree.superclass._dealWidthNodes.apply(this, arguments); - var self = this, o = this.options; - BI.each(nodes, function (i, node) { + _dealWidthNodes(nodes) { + nodes = super._dealWidthNodes(...arguments); + BI.each(nodes, (i, node) => { node.isParent = node.isParent || node.parent; if (node.text == null) { if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText("BI-Basic_Count")})`; } } }); - return nodes; - }, - initTree: function (nodes, setting) { - var setting = setting || this._configSetting(); - this.nodes = BI.$.fn.zTree.init(this.tree.element, setting, nodes); + return nodes; } -}); -BI.DisplayTree.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.display_tree", BI.DisplayTree); + initTree(nodes, setting) { + this.nodes = BI.$.fn.zTree.init(this.tree.element, setting || this._configSetting(), nodes); + } +} diff --git a/src/case/ztree/tree.list.display.js b/src/case/ztree/tree.list.display.js index 60ce5574d..a3769e898 100644 --- a/src/case/ztree/tree.list.display.js +++ b/src/case/ztree/tree.list.display.js @@ -4,75 +4,69 @@ * @class BI.ListListDisplayTree * @extends BI.TreeView */ -BI.ListDisplayTree = BI.inherit(BI.ListTreeView, { - _defaultConfig: function () { - return BI.extend(BI.ListDisplayTree.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-list-display-tree" - }); - }, - _init: function () { - BI.ListDisplayTree.superclass._init.apply(this, arguments); - }, +import { Listtreeview } from "./list/listtreeview"; +import { each, shortcut } from "@/core"; + +@shortcut() +export class ListDisplayTree extends Listtreeview { + static xtype = "bi.list_display_tree"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { + return { + extraCls: "bi-list-display-tree", + }; + } // 配置属性 - _configSetting: function () { - var setting = { + _configSetting() { + function beforeCollapse(treeId, treeNode) { + return false; + } + + function getFont(treeId, node) { + return node.isLeaf ? {} : { color: "#999999" }; + } + + return { view: { selectedMulti: false, dblClickExpand: false, showIcon: false, nameIsHTML: true, showTitle: false, - fontCss: getFont + fontCss: getFont, }, data: { key: { title: "title", - name: "text" + name: "text", }, simpleData: { - enable: true - } + enable: true, + }, }, callback: { - beforeCollapse: beforeCollapse - } + beforeCollapse, + }, }; + } - function beforeCollapse(treeId, treeNode) { - return false; - } - - function getFont(treeId, node) { - return node.isLeaf ? {} : {color: "#999999"}; - } - - return setting; - }, - - _dealWidthNodes: function (nodes) { - nodes = BI.ListDisplayTree.superclass._dealWidthNodes.apply(this, arguments); - var self = this, o = this.options; - BI.each(nodes, function (i, node) { + _dealWidthNodes(nodes) { + nodes = super._dealWidthNodes(...arguments); + each(nodes, (i, node) => { node.isParent = node.isParent || node.parent; if (node.text == null) { if (node.count > 0) { - node.text = node.value + "(" + BI.i18nText("BI-Basic_Altogether") + node.count + BI.i18nText("BI-Basic_Count") + ")"; + node.text = `${node.value}(${BI.i18nText("BI-Basic_Altogether")}${node.count}${BI.i18nText("BI-Basic_Count")})`; } } }); - return nodes; - }, - initTree: function (nodes, setting) { - var setting = setting || this._configSetting(); - this.nodes = BI.$.fn.zTree.init(this.tree.element, setting, nodes); - }, - - destroy: function () { - BI.ListDisplayTree.superclass.destroy.apply(this, arguments); + return nodes; } -}); -BI.ListDisplayTree.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.list_display_tree", BI.ListDisplayTree); \ No newline at end of file + initTree(nodes, setting) { + this.nodes = BI.$.fn.zTree.init(this.tree.element, setting || this._configSetting(), nodes); + } +} diff --git a/src/case/ztree/tree.simple.js b/src/case/ztree/tree.simple.js index 690a445a7..1483a27a7 100644 --- a/src/case/ztree/tree.simple.js +++ b/src/case/ztree/tree.simple.js @@ -2,66 +2,86 @@ * 简单的多选树 * * Created by GUY on 2016/2/16. - * @class BI.SimpleTreeView - * @extends BI.Widget + * @class SimpleTreeView + * @extends Widget */ -BI.SimpleTreeView = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.SimpleTreeView.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + Widget, + Tree, + createWidget, + emptyFn, + isNotNull, + isNotEmptyArray, + each, + makeObject, + isEmpty +} from "@/core"; +import { TreeView } from "./treeview"; + +@shortcut() +export class SimpleTreeView extends Widget { + static xtype = "bi.simple_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { + return { baseCls: "bi-simple-tree", - itemsCreator: BI.emptyFn, - items: null - }); - }, - _init: function () { - BI.SimpleTreeView.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.structure = new BI.Tree(); - this.tree = BI.createWidget({ - type: "bi.tree_view", + itemsCreator: emptyFn, + items: null, + }; + } + + _init() { + super._init(...arguments); + const self = this, o = this.options; + this.structure = new Tree(); + this.tree = createWidget({ + type: TreeView.xtype, element: this, - itemsCreator: function (op, callback) { - var fn = function (items) { + itemsCreator(op, callback) { + function fn(items) { callback({ - items: items + items, }); - self.structure.initTree(BI.Tree.transformToTreeFormat(items)); + self.structure.initTree(Tree.transformToTreeFormat(items)); }; - if (BI.isNotNull(o.items)) { + if (isNotNull(o.items)) { fn(o.items); } else { o.itemsCreator(op, fn); } - } + }, }); - this.tree.on(BI.TreeView.EVENT_CHANGE, function () { - self.fireEvent(BI.SimpleTreeView.EVENT_CHANGE, arguments); + this.tree.on(TreeView.EVENT_CHANGE, function () { + self.fireEvent(SimpleTreeView.EVENT_CHANGE, arguments); }); - if (BI.isNotEmptyArray(o.items)) { + if (isNotEmptyArray(o.items)) { this.populate(); } - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setValue(o.value); } - }, + } - populate: function (items, keyword) { + populate(items, keyword) { if (items) { this.options.items = items; } this.tree.stroke({ - keyword: keyword + keyword, }); - }, + } - _digest: function (v) { + _digest(v) { v || (v = []); - var self = this, map = {}; - var selected = []; - BI.each(v, function (i, val) { - var node = self.structure.search(val, "value"); + const self = this, map = {}; + const selected = []; + each(v, (i, val) => { + const node = self.structure.search(val, "value"); if (node) { - var p = node; + let p = node; p = p.getParent(); if (p) { if (!map[p.value]) { @@ -82,18 +102,20 @@ BI.SimpleTreeView = BI.inherit(BI.Widget, { } } }); - return BI.makeObject(v.concat(selected)); - }, - setValue: function (v) { + return makeObject(v.concat(selected)); + } + + setValue(v) { this.tree.setValue(this._digest(v)); - }, + } + + _getValue() { + const result = [], val = this.tree.getValue(); - _getValue: function () { - var self = this, result = [], val = this.tree.getValue(); - var track = function (nodes) { - BI.each(nodes, function (key, node) { - if (BI.isEmpty(node)) { + function track(nodes) { + each(nodes, (key, node) => { + if (isEmpty(node)) { result.push(key); } else { track(node); @@ -101,27 +123,27 @@ BI.SimpleTreeView = BI.inherit(BI.Widget, { }); }; track(val); + return result; - }, + } - empty: function () { + empty() { this.tree.empty(); - }, + } - getValue: function () { - var self = this, result = [], val = this._getValue(); - BI.each(val, function (i, key) { - var target = self.structure.search(key, "value"); + getValue() { + const self = this, result = [], val = this._getValue(); + each(val, (i, key) => { + const target = self.structure.search(key, "value"); if (target) { - self.structure._traverse(target, function (node) { + self.structure._traverse(target, node => { if (node.isLeaf()) { result.push(node.value); } }); } }); + return result; } -}); -BI.SimpleTreeView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_tree", BI.SimpleTreeView); +} diff --git a/src/case/ztree/treerender.page.service.js b/src/case/ztree/treerender.page.service.js new file mode 100644 index 000000000..5bb8be327 --- /dev/null +++ b/src/case/ztree/treerender.page.service.js @@ -0,0 +1,72 @@ +/** + * @author windy + * @version 2.0 + * Created by windy on 2020/1/8 + * 提供节点分页加载方式 + */ + +import { createWidget, debounce, has, OB, size, each } from "@/core"; + +export class TreeRenderPageService extends OB { + nodeLists = {}; + + _getLoadingBar(tId) { + const tip = createWidget({ + type: "bi.loading_bar", + height: 25, + handler: () => { + this.refreshNodes(tId); + }, + }); + tip.setLoaded(); + + return tip; + } + + pushNodeList(tId, populate) { + const o = this.options; + const tip = this._getLoadingBar(tId); + if (!has(this.nodeLists, tId)) { + this.nodeLists[tId] = { + populate: debounce(populate, 0), + options: { + times: 1, + }, + loadWidget: tip, + }; + } else { + this.nodeLists[tId].loadWidget.destroy(); + this.nodeLists[tId].loadWidget = tip; + } + createWidget({ + type: "bi.vertical", + element: o.subNodeListGetter(tId), + items: [tip], + }); + } + + refreshNodes(tId) { + const nodeList = this.nodeLists[tId]; + nodeList.options.times++; + nodeList.loadWidget.setLoading(); + nodeList.populate({ + times: nodeList.options.times, + }); + } + + removeNodeList(tId) { + this.nodeLists[tId] && this.nodeLists[tId].loadWidget.destroy(); + this.nodeLists[tId] && (this.nodeLists[tId].loadWidget = null); + delete this.nodeLists[tId]; + if (size(this.nodeLists) === 0) { + this.clear(); + } + } + + clear() { + each(this.nodeLists, tId => { + this.removeNodeList(tId); + }); + this.nodeLists = {}; + } +} diff --git a/src/case/ztree/treerender.scroll.service.js b/src/case/ztree/treerender.scroll.service.js index a2d019c46..ffd5ea289 100644 --- a/src/case/ztree/treerender.scroll.service.js +++ b/src/case/ztree/treerender.scroll.service.js @@ -5,120 +5,121 @@ * 提供节点滚动加载方式 */ -!(function () { - BI.TreeRenderScrollService = BI.inherit(BI.OB, { - _init: function () { - this.nodeLists = {}; +import { debounce, each, has, isNotNull, OB, size } from "@/core"; - this.id = this.options.id; - // renderService是否已经注册了滚动 - this.hasBinded = false; +export class TreeRenderScrollService extends OB { + _init() { + this.nodeLists = {}; - this.container = this.options.container; - }, + this.id = this.options.id; + // renderService是否已经注册了滚动 + this.hasBinded = false; - _getNodeListBounds: function (tId) { - var nodeList = this.options.subNodeListGetter(tId)[0]; + this.container = this.options.container; + } + + _getNodeListBounds(tId) { + const nodeList = this.options.subNodeListGetter(tId)[0]; + + return { + top: nodeList.offsetTop, + left: nodeList.offsetLeft, + width: nodeList.offsetWidth, + height: nodeList.offsetHeight, + }; + } + + _getTreeContainerBounds() { + const nodeList = this.container[0]; + if (isNotNull(nodeList)) { return { - top: nodeList.offsetTop, - left: nodeList.offsetLeft, + top: nodeList.offsetTop + nodeList.scrollTop, + left: nodeList.offsetLeft + nodeList.scrollLeft, width: nodeList.offsetWidth, - height: nodeList.offsetHeight - } - }, - - _getTreeContainerBounds: function () { - var nodeList = this.container[0]; - if (BI.isNotNull(nodeList)) { - return { - top: nodeList.offsetTop + nodeList.scrollTop, - left: nodeList.offsetLeft + nodeList.scrollLeft, - width: nodeList.offsetWidth, - height: nodeList.offsetHeight - }; - } - return {}; - }, - - _canNodePopulate: function (tId) { - if (this.nodeLists[tId].locked) { - return false; - } - // 获取ul, 即子节点列表的bounds - // 是否需要继续加载，只需要看子节点列表的下边界与container是否无交集 - var bounds = this._getNodeListBounds(tId); - var containerBounds = this._getTreeContainerBounds(tId); - // ul底部是不是漏出来了 - if (bounds.top + bounds.height < containerBounds.top + containerBounds.height) { - return true; - } + height: nodeList.offsetHeight, + }; + } + + return {}; + } + + _canNodePopulate(tId) { + if (this.nodeLists[tId].locked) { return false; - }, - - _isNodeInVisible: function (tId) { - var nodeList = this.options.subNodeListGetter(tId); - return nodeList.length === 0 || nodeList.css("display") === "none"; - }, - - pushNodeList: function (tId, populate) { - var self = this; - if (!BI.has(this.nodeLists, tId)) { - this.nodeLists[tId] = { - populate: BI.debounce(populate, 0), - options: { - times: 1 - }, - // 在上一次请求返回前, 通过滚动再次触发加载的时候, 不应该认为是下一次分页, 需要等待上次请求返回 - // 以保证顺序和请求次数的完整 - locked: false - }; - } else { - this.nodeLists[tId].locked = false; - } - if(!this.hasBinded) { - // console.log("绑定事件"); - this.hasBinded = true; - this.container && this.container.on("scroll", BI.debounce(function () { - self.refreshAllNodes(); - }, 30)); - } - }, - - refreshAllNodes: function () { - var self = this; - BI.each(this.nodeLists, function (tId) { - // 不展开的节点就不看了 - !self._isNodeInVisible(tId) && self.refreshNodes(tId); - }); - }, - - refreshNodes: function (tId) { - if (this._canNodePopulate(tId)) { - var nodeList = this.nodeLists[tId]; - nodeList.options.times++; - nodeList.locked = true; - nodeList.populate({ - times: nodeList.options.times - }); - } - }, - - removeNodeList: function (tId) { - delete this.nodeLists[tId]; - if (BI.size(this.nodeLists) === 0) { - this.clear(); - } - }, - - clear: function () { - var self = this; - BI.each(this.nodeLists, function (tId) { - self.removeNodeList(tId); + } + // 获取ul, 即子节点列表的bounds + // 是否需要继续加载，只需要看子节点列表的下边界与container是否无交集 + const bounds = this._getNodeListBounds(tId); + const containerBounds = this._getTreeContainerBounds(tId); + + // ul底部是不是漏出来了 + return bounds.top + bounds.height < containerBounds.top + containerBounds.height; + } + + _isNodeInVisible(tId) { + const nodeList = this.options.subNodeListGetter(tId); + + return nodeList.length === 0 || nodeList.css("display") === "none"; + } + + pushNodeList(tId, populate) { + const self = this; + if (!has(this.nodeLists, tId)) { + this.nodeLists[tId] = { + populate: debounce(populate, 0), + options: { + times: 1, + }, + // 在上一次请求返回前, 通过滚动再次触发加载的时候, 不应该认为是下一次分页, 需要等待上次请求返回 + // 以保证顺序和请求次数的完整 + locked: false, + }; + } else { + this.nodeLists[tId].locked = false; + } + if (!this.hasBinded) { + // console.log("绑定事件"); + this.hasBinded = true; + this.container && this.container.on("scroll", debounce(() => { + self.refreshAllNodes(); + }, 30)); + } + } + + refreshAllNodes() { + const self = this; + each(this.nodeLists, tId => { + // 不展开的节点就不看了 + !self._isNodeInVisible(tId) && self.refreshNodes(tId); + }); + } + + refreshNodes(tId) { + if (this._canNodePopulate(tId)) { + const nodeList = this.nodeLists[tId]; + nodeList.options.times++; + nodeList.locked = true; + nodeList.populate({ + times: nodeList.options.times, }); - this.nodeLists = {}; - // console.log("解绑事件"); - this.container.off("scroll"); - this.hasBinded = false; } - }); -})(); \ No newline at end of file + } + + removeNodeList(tId) { + delete this.nodeLists[tId]; + if (size(this.nodeLists) === 0) { + this.clear(); + } + } + + clear() { + const self = this; + each(this.nodeLists, tId => { + self.removeNodeList(tId); + }); + this.nodeLists = {}; + // console.log("解绑事件"); + this.container.off("scroll"); + this.hasBinded = false; + } +} diff --git a/src/case/ztree/treetrender.page.service.js b/src/case/ztree/treetrender.page.service.js deleted file mode 100644 index e1d7edb81..000000000 --- a/src/case/ztree/treetrender.page.service.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2020/1/8 - * 提供节点分页加载方式 - */ - -!(function () { - BI.TreeRenderPageService = BI.inherit(BI.OB, { - _init: function () { - this.nodeLists = {}; - }, - - _getLoadingBar: function(tId) { - var self = this; - var tip = BI.createWidget({ - type: "bi.loading_bar", - height: 25, - handler: function () { - self.refreshNodes(tId); - } - }); - tip.setLoaded(); - return tip; - }, - - pushNodeList: function (tId, populate) { - var self = this, o = this.options; - var tip = this._getLoadingBar(tId); - if (!BI.has(this.nodeLists, tId)) { - this.nodeLists[tId] = { - populate: BI.debounce(populate, 0), - options: { - times: 1 - }, - loadWidget: tip - }; - } else { - this.nodeLists[tId].loadWidget.destroy(); - this.nodeLists[tId].loadWidget = tip; - } - BI.createWidget({ - type: "bi.vertical", - element: o.subNodeListGetter(tId), - items: [tip] - }); - }, - - refreshNodes: function (tId) { - var nodeList = this.nodeLists[tId]; - nodeList.options.times++; - nodeList.loadWidget.setLoading(); - nodeList.populate({ - times: nodeList.options.times - }); - }, - - removeNodeList: function (tId) { - this.nodeLists[tId] && this.nodeLists[tId].loadWidget.destroy(); - this.nodeLists[tId] && (this.nodeLists[tId].loadWidget = null); - delete this.nodeLists[tId]; - if (BI.size(this.nodeLists) === 0) { - this.clear(); - } - }, - - clear: function () { - var self = this; - BI.each(this.nodeLists, function (tId) { - self.removeNodeList(tId); - }); - this.nodeLists = {}; - } - }); - -})(); \ No newline at end of file diff --git a/src/case/ztree/0.treeview.js b/src/case/ztree/treeview.js similarity index 58% rename from src/case/ztree/0.treeview.js rename to src/case/ztree/treeview.js index 41166220d..a58fd4709 100644 --- a/src/case/ztree/0.treeview.js +++ b/src/case/ztree/treeview.js @@ -1,119 +1,137 @@ -/** - * guy - * 异步树 - * @class BI.TreeView - * @extends BI.Pane - */ -BI.TreeView = BI.inherit(BI.Pane, { - _defaultConfig: function () { - return BI.extend(BI.TreeView.superclass._defaultConfig.apply(this, arguments), { +import { + cjkEncodeDO, + Controller, + createWidget, + emptyFn, + Events, + extend, + UUID, + isNotNull, + jsonEncode, + delay, each, replaceAll, + isUndefined, isNotEmptyArray, deepClone, map, Tree, + isNull, shortcut +} from "@/core"; +import { Msg, Pane } from "@/base"; + +@shortcut() +export class TreeView extends Pane { + static xtype = "bi.tree_view"; + static REQ_TYPE_INIT_DATA = 1; + static REQ_TYPE_ADJUST_DATA = 2; + static REQ_TYPE_SELECT_DATA = 3; + static REQ_TYPE_GET_SELECTED_DATA = 4; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_INIT = Events.INIT; + static EVENT_AFTERINIT = Events.AFTERINIT; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { _baseCls: "bi-tree", paras: { - selectedValues: {} + selectedValues: {}, }, - itemsCreator: BI.emptyFn, - showLine: true + itemsCreator: emptyFn, + showLine: true, }); - }, - _init: function () { - BI.TreeView.superclass._init.apply(this, arguments); - var o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; this._stop = false; this._createTree(); - this.tip = BI.createWidget({ + this.tip = createWidget({ type: "bi.loading_bar", invisible: true, - handler: BI.bind(this._loadMore, this) + handler: () => this._loadMore(), }); - BI.createWidget({ + createWidget({ type: "bi.vertical", scrollable: true, scrolly: false, element: this, - items: [this.tip] + items: [this.tip], }); - if (BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setSelectedValue(o.value); } - if (BI.isIE9Below && BI.isIE9Below()) { - this.element.addClass("hack"); - } - }, + } - _createTree: function () { - this.id = "bi-tree" + BI.UUID(); + _createTree() { + this.id = `bi-tree${UUID()}`; if (this.nodes) { this.nodes.destroy(); } if (this.tree) { this.tree.destroy(); } - this.tree = BI.createWidget({ + this.tree = createWidget({ type: "bi.layout", - element: "" + element: ``, }); - BI.createWidget({ + createWidget({ type: "bi.default", element: this, - items: [this.tree] + items: [this.tree], }); - }, + } // 选择节点触发方法 - _selectTreeNode: function (treeId, treeNode) { - this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, treeNode, this); - this.fireEvent(BI.TreeView.EVENT_CHANGE, treeNode, this); - }, + _selectTreeNode(treeId, treeNode) { + this.fireEvent(Controller.EVENT_CHANGE, Events.CLICK, treeNode, this); + this.fireEvent(TreeView.EVENT_CHANGE, treeNode, this); + } // 配置属性 - _configSetting: function () { - var paras = this.options.paras; - var self = this; - var o = this.options; - var setting = { + _configSetting() { + const paras = this.options.paras; + const self = this; + const o = this.options; + const setting = { async: { enable: true, url: getUrl, - autoParam: ["id", "name"], // 节点展开异步请求自动提交id和name - otherParam: BI.cjkEncodeDO(paras) // 静态参数 + autoParam: ["id", "name"], // 节点展开异步请求自动提交id和name + otherParam: cjkEncodeDO(paras), // 静态参数 }, check: { - enable: true + enable: true, }, data: { key: { title: "title", - name: "text" // 节点的name属性替换成text + name: "text", // 节点的name属性替换成text }, simpleData: { - enable: true // 可以穿id,pid属性的对象数组 - } + enable: true, // 可以穿id,pid属性的对象数组 + }, }, view: { showIcon: false, expandSpeed: "", - nameIsHTML: true, // 节点可以用html标签代替 + nameIsHTML: true, // 节点可以用html标签代替 dblClickExpand: false, showLine: o.showLine, }, callback: { - beforeExpand: beforeExpand, - onAsyncSuccess: onAsyncSuccess, - onAsyncError: onAsyncError, - beforeCheck: beforeCheck, - onCheck: onCheck, - onExpand: onExpand, - onCollapse: onCollapse, - onClick: onClick - } + beforeExpand, + onAsyncSuccess, + onAsyncError, + beforeCheck, + onCheck, + onExpand, + onCollapse, + onClick, + }, }; - var className = "dark", perTime = 100; + const className = "dark", perTime = 100; function onClick(event, treeId, treeNode) { // 当前点击节点的状态是半选，且为true_part, 则将其改为false_part,使得点击半选后切换到的是全选 - var checked = treeNode.checked; - var status = treeNode.getCheckStatus(); + let checked = treeNode.checked; + const status = treeNode.getCheckStatus(); if (status.half === true && status.checked === true) { checked = false; } @@ -122,14 +140,14 @@ BI.TreeView = BI.inherit(BI.Pane, { } function getUrl(treeId, treeNode) { - var parentNode = self._getParentValues(treeNode); + const parentNode = self._getParentValues(treeNode); treeNode.times = treeNode.times || 1; - var param = "id=" + treeNode.id - + "×=" + (treeNode.times++) - + "&parentValues= " + _global.encodeURIComponent(BI.jsonEncode(parentNode)) - + "&checkState=" + _global.encodeURIComponent(BI.jsonEncode(treeNode.getCheckStatus())); + const param = `id=${treeNode.id + }×=${treeNode.times++ + }&parentValues= ${_global.encodeURIComponent(jsonEncode(parentNode)) + }&checkState=${_global.encodeURIComponent(jsonEncode(treeNode.getCheckStatus()))}`; - return "&" + param; + return `&${param}`; } function beforeExpand(treeId, treeNode) { @@ -138,13 +156,14 @@ BI.TreeView = BI.inherit(BI.Pane, { treeNode.times = 1; ajaxGetNodes(treeNode, "refresh"); } + return true; } - BI.Msg.toast("Please Wait。", { - level: "warning" + Msg.toast("Please Wait。", { + level: "warning", }); // 不展开节点，也不触发onExpand事件 - return false; + return false; } function onAsyncSuccess(event, treeId, treeNode, msg) { @@ -152,14 +171,14 @@ BI.TreeView = BI.inherit(BI.Pane, { if (!msg || msg.length === 0 || /^[\s,\S]*<\/html>$/gi.test(msg) || self._stop) { return; } - var zTree = self.nodes; - var totalCount = treeNode.count || 0; + const zTree = self.nodes; + const totalCount = treeNode.count || 0; // 尝试去获取下一组节点，若获取值为空数组，表示获取完成 // TODO by GUY if (treeNode.children.length > totalCount) { treeNode.count = treeNode.children.length; - BI.delay(function () { + delay(() => { ajaxGetNodes(treeNode); }, perTime); } else { @@ -171,15 +190,15 @@ BI.TreeView = BI.inherit(BI.Pane, { } function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) { - var zTree = self.nodes; - BI.Msg.toast("Error!", "warning"); + const zTree = self.nodes; + Msg.toast("Error!", "warning"); // treeNode.icon = ""; // zTree.updateNode(treeNode); } function ajaxGetNodes(treeNode, reloadType) { - var zTree = self.nodes; - if (reloadType == "refresh") { + const zTree = self.nodes; + if (reloadType === "refresh") { zTree.updateNode(treeNode); // 刷新一下当前节点，如果treeNode.xxx被改了的话 } zTree.reAsyncChildNodes(treeNode, reloadType, true); // 强制加载子节点，reloadType === refresh为先清空再加载，否则为追加到现有子节点之后 @@ -190,13 +209,13 @@ BI.TreeView = BI.inherit(BI.Pane, { return false; } // 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck，改之前就获取一下 - var status = treeNode.getCheckStatus(); + const status = treeNode.getCheckStatus(); treeNode.halfCheck = false; if (treeNode.checked === true) { // 将展开的节点halfCheck设为false，解决展开节点存在halfCheck=true的情况 guy // 所有的半选状态都需要取消halfCheck=true的情况 function track(children) { - BI.each(children, function (i, ch) { + each(children, (i, ch) => { if (ch.halfCheck === true) { ch.halfCheck = false; track(ch.children); @@ -205,9 +224,9 @@ BI.TreeView = BI.inherit(BI.Pane, { } track(treeNode.children); - var treeObj = self.nodes; - var nodes = treeObj.getSelectedNodes(); - BI.$.each(nodes, function (index, node) { + const treeObj = self.nodes; + const nodes = treeObj.getSelectedNodes(); + BI.$.each(nodes, (index, node) => { node.halfCheck = false; }); } @@ -232,102 +251,106 @@ BI.TreeView = BI.inherit(BI.Pane, { } return setting; - }, + } - _getParentValues: function (treeNode) { + _getParentValues(treeNode) { if (!treeNode.getParentNode()) { return []; } - var parentNode = treeNode.getParentNode(); - var result = this._getParentValues(parentNode); + const parentNode = treeNode.getParentNode(); + let result = this._getParentValues(parentNode); result = result.concat([this._getNodeValue(parentNode)]); + return result; - }, + } - _getNodeValue: function (node) { + _getNodeValue(node) { // 去除标红 - return BI.isUndefined(node.value) ? BI.replaceAll(node.text.replace(/<[^>]+>/g, ""), " ", " ") : node.value; - }, + return isUndefined(node.value) ? replaceAll(node.text.replace(/<[^>]+>/g, ""), " ", " ") : node.value; + } // 获取半选框值 - _getHalfSelectedValues: function (map, node) { - var self = this; - var checkState = node.getCheckStatus(); + _getHalfSelectedValues(map, node) { + const self = this; + const checkState = node.getCheckStatus(); // 将未选的去掉 if (checkState.checked === false && checkState.half === false) { return; } // 如果节点已展开,并且是半选 - if (BI.isNotEmptyArray(node.children) && checkState.half === true) { - var children = node.children; - BI.each(children, function (i, ch) { + if (isNotEmptyArray(node.children) && checkState.half === true) { + const children = node.children; + each(children, (i, ch) => { self._getHalfSelectedValues(map, ch); }); + return; } - var parent = node.parentValues || self._getParentValues(node); - var path = parent.concat(this._getNodeValue(node)); + const parent = node.parentValues || self._getParentValues(node); + const path = parent.concat(this._getNodeValue(node)); // 当前节点是全选的，因为上面的判断已经排除了不选和半选 - if (BI.isNotEmptyArray(node.children) || checkState.half === false) { + if (isNotEmptyArray(node.children) || checkState.half === false) { this._buildTree(map, path); + return; } // 剩下的就是半选不展开的节点，因为不知道里面是什么情况，所以借助selectedValues(这个是完整的选中情况) - var storeValues = BI.deepClone(this.options.paras.selectedValues); - var treeNode = this._getTree(storeValues, path); + const storeValues = deepClone(this.options.paras.selectedValues); + const treeNode = this._getTree(storeValues, path); this._addTreeNode(map, parent, this._getNodeValue(node), treeNode); - }, + } // 获取的是以values最后一个节点为根的子树 - _getTree: function (map, values) { - var cur = map; - BI.any(values, function (i, value) { + _getTree(map, values) { + let cur = map; + some(values, (i, value) => { if (cur[value] == null) { return true; } cur = cur[value]; }); + return cur; - }, + } // 以values为path一路向里补充map, 并在末尾节点添加key: value节点 - _addTreeNode: function (map, values, key, value) { - var cur = map; - BI.each(values, function (i, value) { + _addTreeNode(map, values, key, value) { + let cur = map; + each(values, (i, value) => { if (cur[value] == null) { cur[value] = {}; } cur = cur[value]; }); cur[key] = value; - }, + } // 构造树节点 - _buildTree: function (map, values) { - var cur = map; - BI.each(values, function (i, value) { + _buildTree(map, values) { + let cur = map; + each(values, (i, value) => { if (cur[value] == null) { cur[value] = {}; } cur = cur[value]; }); - }, + } // 获取选中的值 - _getSelectedValues: function () { - var self = this; - var hashMap = {}; - var rootNoots = this.nodes.getNodes(); + _getSelectedValues() { + const self = this; + const hashMap = {}; + const rootNoots = this.nodes.getNodes(); track(rootNoots); // 可以看到这个方法没有递归调用，所以在_getHalfSelectedValues中需要关心全选的节点 function track(nodes) { - BI.each(nodes, function (i, node) { - var checkState = node.getCheckStatus(); + each(nodes, (i, node) => { + const checkState = node.getCheckStatus(); if (checkState.checked === true || checkState.half === true) { if (checkState.half === true) { self._getHalfSelectedValues(hashMap, node); } else { - var parentValues = node.parentValues || self._getParentValues(node); - var values = parentValues.concat([self._getNodeValue(node)]); + const parentValues = node.parentValues || self._getParentValues(node); + const values = parentValues.concat([self._getNodeValue(node)]); self._buildTree(hashMap, values); } } @@ -335,27 +358,28 @@ BI.TreeView = BI.inherit(BI.Pane, { } return hashMap; - }, + } // 处理节点 - _dealWidthNodes: function (nodes) { - var self = this, o = this.options; - var ns = BI.Tree.arrayFormat(nodes); - return BI.map(ns, function (i, n) { - var newNode = BI.extend({}, n); + _dealWidthNodes(nodes) { + const self = this, o = this.options; + const ns = Tree.arrayFormat(nodes); + + return map(ns, (i, n) => { + const newNode = extend({}, n); newNode.isParent = newNode.isParent || newNode.parent; // n.value = BI.isUndefined(n.value) ? n.text : n.value; // n.text = BI.isUndefined(n.text) ? n.value : n.text; // if (n.text === null) { // n.text = ""; // } - if (BI.isNull(newNode.title)) { + if (isNull(newNode.title)) { newNode.title = newNode.text; } if (newNode.disabled) { newNode.title = newNode.warningTitle || newNode.title; } - var text = BI.createWidget(BI.extend({ + const text = createWidget(extend({ cls: "tree-node-text", tagName: "span", whiteSpace: "nowrap", @@ -363,9 +387,9 @@ BI.TreeView = BI.inherit(BI.Pane, { keyword: o.paras.keyword, }, newNode, { type: "bi.text", - text: BI.replaceAll(newNode.text, "\n", " ") + text: replaceAll(newNode.text, "\n", " "), })); - var fragment = BI.Widget._renderEngine.createElement("
"); + const fragment = BI.Widget._renderEngine.createElement("
"); fragment.append(text.element[0]); newNode.text = fragment.html(); // // 处理标红 @@ -376,21 +400,22 @@ BI.TreeView = BI.inherit(BI.Pane, { // n.text = BI.htmlEncode(BI.Text.formatText(n.text + "")); // } // } + return newNode; }); - }, + } - _loadMore: function () { - var self = this, o = this.options; + _loadMore() { + const self = this, o = this.options; this.tip.setLoading(); - var op = BI.extend({}, o.paras, { - times: ++this.times + const op = extend({}, o.paras, { + times: ++this.times, }); - o.itemsCreator(op, function (res) { + o.itemsCreator(op, res => { if (self._stop === true) { return; } - var hasNext = !!res.hasNext, nodes = res.items || []; + const hasNext = !!res.hasNext, nodes = res.items || []; if (!hasNext) { self.tip.setEnd(); @@ -401,32 +426,34 @@ BI.TreeView = BI.inherit(BI.Pane, { self.nodes.addNodes(null, self._dealWidthNodes(nodes)); } }); - }, + } // 生成树内部方法 - _initTree: function (setting) { - var self = this, o = this.options; - self.fireEvent(BI.Events.INIT); + _initTree(setting) { + const self = this, o = this.options; + self.fireEvent(Events.INIT); this.times = 1; - var tree = this.tree; + const tree = this.tree; tree.empty(); this.loading(); this.tip.setVisible(false); - var callback = function (nodes) { + + function callback(nodes) { if (self._stop === true) { return; } self.nodes = BI.$.fn.zTree.init(tree.element, setting, nodes); - }; - var op = BI.extend({}, o.paras, { - times: 1 + } + + const op = extend({}, o.paras, { + times: 1, }); - o.itemsCreator(op, function (res) { + o.itemsCreator(op, res => { if (self._stop === true) { return; } - var hasNext = !!res.hasNext, nodes = res.items || []; + const hasNext = !!res.hasNext, nodes = res.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes)); } @@ -437,68 +464,69 @@ BI.TreeView = BI.inherit(BI.Pane, { } else { self.tip.setLoaded(); } - op.times === 1 && self.fireEvent(BI.Events.AFTERINIT); + op.times === 1 && self.fireEvent(Events.AFTERINIT); }); - }, + } // 构造树结构， - initTree: function (nodes, setting) { - var setting = setting || { + initTree(nodes, setting) { + const defaultSetting = { async: { - enable: false + enable: false, }, check: { - enable: false + enable: false, }, data: { key: { title: "title", - name: "text" + name: "text", }, simpleData: { - enable: true - } + enable: true, + }, }, view: { showIcon: false, expandSpeed: "", - nameIsHTML: true + nameIsHTML: true, }, - callback: {} + callback: {}, }; - this.nodes = BI.$.fn.zTree.init(this.tree.element, setting, nodes); - }, + this.nodes = BI.$.fn.zTree.init(this.tree.element, setting || defaultSetting, nodes); + } - start: function () { + start() { this._stop = false; - }, + } - stop: function () { + stop() { this._stop = true; - }, + } // 生成树方法 - stroke: function (config) { + stroke(config) { delete this.options.keyword; - BI.extend(this.options.paras, config); - var setting = this._configSetting(); + extend(this.options.paras, config); + const setting = this._configSetting(); this._createTree(); this.start(); this._initTree(setting); - }, + } + + populate() { + this.stroke(...arguments); + } - populate: function () { - this.stroke.apply(this, arguments); - }, + hasChecked() { + const treeObj = this.nodes; - hasChecked: function () { - var treeObj = this.nodes; return treeObj.getCheckedNodes(true).length > 0; - }, + } - checkAll: function (checked) { + checkAll(checked) { function setNode(children) { - BI.each(children, function (i, child) { + each(children, (i, child) => { child.halfCheck = false; setNode(child.children); }); @@ -508,68 +536,58 @@ BI.TreeView = BI.inherit(BI.Pane, { return; } - BI.each(this.nodes.getNodes(), function (i, node) { + each(this.nodes.getNodes(), (i, node) => { node.halfCheck = false; setNode(node.children); }); this.nodes.checkAllNodes(checked); - }, + } - expandAll: function (flag) { + expandAll(flag) { this.nodes && this.nodes.expandAll(flag); - }, + } // 设置树节点的状态 - setValue: function (value, param) { + setValue(value, param) { this.checkAll(false); this.updateValue(value, param); this.refresh(); - }, + } - setSelectedValue: function (value) { - this.options.paras.selectedValues = BI.deepClone(value || {}); - }, + setSelectedValue(value) { + this.options.paras.selectedValues = deepClone(value || {}); + } - updateValue: function (values, param) { + updateValue(values, param) { if (!this.nodes) { return; } param || (param = "value"); - var treeObj = this.nodes; - BI.each(values, function (v, op) { - var nodes = treeObj.getNodesByParam(param, v, null); - BI.each(nodes, function (j, node) { - BI.extend(node, { checked: true }, op); + const treeObj = this.nodes; + each(values, (v, op) => { + const nodes = treeObj.getNodesByParam(param, v, null); + each(nodes, (j, node) => { + extend(node, { checked: true }, op); treeObj.updateNode(node); }); }); - }, + } - refresh: function () { + refresh() { this.nodes && this.nodes.refresh(); - }, + } - getValue: function () { + getValue() { if (!this.nodes) { return null; } + return this._getSelectedValues(); - }, + } - destroyed: function () { + destroyed() { this.stop(); this.nodes && this.nodes.destroy(); } -}); -BI.extend(BI.TreeView, { - REQ_TYPE_INIT_DATA: 1, - REQ_TYPE_ADJUST_DATA: 2, - REQ_TYPE_SELECT_DATA: 3, - REQ_TYPE_GET_SELECTED_DATA: 4 -}); - -BI.TreeView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.TreeView.EVENT_INIT = BI.Events.INIT; -BI.TreeView.EVENT_AFTERINIT = BI.Events.AFTERINIT; - -BI.shortcut("bi.tree_view", BI.TreeView); +} + diff --git a/src/core/platform/web/jquery/jquery.mousewheel.js b/src/core/platform/web/jquery/jquery.mousewheel.js index 557fe35e4..576658a56 100644 --- a/src/core/platform/web/jquery/jquery.mousewheel.js +++ b/src/core/platform/web/jquery/jquery.mousewheel.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /* ! * jQuery Mousewheel 3.1.13 * @@ -21,15 +22,15 @@ // } }(function ($) { - var toFix = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"], - toBind = ( "onwheel" in document || document.documentMode >= 9 ) ? + var toFix = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"], + toBind = ("onwheel" in document || document.documentMode >= 9) ? ["wheel"] : ["mousewheel", "DomMouseScroll", "MozMousePixelScroll"], - slice = Array.prototype.slice, + slice = Array.prototype.slice, nullLowestDeltaTimeout, lowestDelta; - if ( $.event.fixHooks ) { - for ( var i = toFix.length; i; ) { - $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; + if ($.event.fixHooks) { + for (var i = toFix.length; i;) { + $.event.fixHooks[toFix[--i]] = $.event.mouseHooks; } } @@ -37,9 +38,9 @@ version: "3.1.12", setup: function () { - if ( this.addEventListener ) { - for ( var i = toBind.length; i; ) { - this.addEventListener( toBind[--i], handler, false ); + if (this.addEventListener) { + for (var i = toBind.length; i;) { + this.addEventListener(toBind[--i], handler, false); } } else { this.onmousewheel = handler; @@ -47,9 +48,9 @@ }, teardown: function () { - if ( this.removeEventListener ) { - for ( var i = toBind.length; i; ) { - this.removeEventListener( toBind[--i], handler, false ); + if (this.removeEventListener) { + for (var i = toBind.length; i;) { + this.removeEventListener(toBind[--i], handler, false); } } else { this.onmousewheel = null; @@ -73,26 +74,34 @@ }); - function handler (event) { - var orgEvent = event || _global.event, - args = slice.call(arguments, 1), - delta = 0, - deltaX = 0, - deltaY = 0, - absDelta = 0, - offsetX = 0, - offsetY = 0; + function handler(event) { + var orgEvent = event || _global.event, + args = slice.call(arguments, 1), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0, + offsetX = 0, + offsetY = 0; event = $.event.fix(orgEvent); event.type = "mousewheel"; // Old school scrollwheel delta - if ( "detail" in orgEvent ) { deltaY = orgEvent.detail * -1; } - if ( "wheelDelta" in orgEvent ) { deltaY = orgEvent.wheelDelta; } - if ( "wheelDeltaY" in orgEvent ) { deltaY = orgEvent.wheelDeltaY; } - if ( "wheelDeltaX" in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; } + if ("detail" in orgEvent) { + deltaY = orgEvent.detail * -1; + } + if ("wheelDelta" in orgEvent) { + deltaY = orgEvent.wheelDelta; + } + if ("wheelDeltaY" in orgEvent) { + deltaY = orgEvent.wheelDeltaY; + } + if ("wheelDeltaX" in orgEvent) { + deltaX = orgEvent.wheelDeltaX * -1; + } // Firefox < 17 horizontal scrolling related to DOMMouseScroll event - if ( "axis" in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { + if ("axis" in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) { deltaX = deltaY * -1; deltaY = 0; } @@ -101,62 +110,66 @@ delta = deltaY === 0 ? deltaX : deltaY; // New school wheel delta (wheel event) - if ( "deltaY" in orgEvent ) { + if ("deltaY" in orgEvent) { deltaY = orgEvent.deltaY * -1; - delta = deltaY; + delta = deltaY; } - if ( "deltaX" in orgEvent ) { + if ("deltaX" in orgEvent) { deltaX = orgEvent.deltaX; - if ( deltaY === 0 ) { delta = deltaX * -1; } + if (deltaY === 0) { + delta = deltaX * -1; + } } // No change actually happened, no reason to go any further - if ( deltaY === 0 && deltaX === 0 ) { return; } + if (deltaY === 0 && deltaX === 0) { + return; + } // Need to convert lines and pages to pixels if we aren't already in pixels // There are three delta modes: // * deltaMode 0 is by pixels, nothing to do // * deltaMode 1 is by lines // * deltaMode 2 is by pages - if ( orgEvent.deltaMode === 1 ) { + if (orgEvent.deltaMode === 1) { var lineHeight = 40; - delta *= lineHeight; + delta *= lineHeight; deltaY *= lineHeight; deltaX *= lineHeight; - } else if ( orgEvent.deltaMode === 2 ) { + } else if (orgEvent.deltaMode === 2) { var pageHeight = 800; - delta *= pageHeight; + delta *= pageHeight; deltaY *= pageHeight; deltaX *= pageHeight; } // Store lowest absolute delta to normalize the delta values - absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) ); + absDelta = Math.max(Math.abs(deltaY), Math.abs(deltaX)); - if ( !lowestDelta || absDelta < lowestDelta ) { + if (!lowestDelta || absDelta < lowestDelta) { lowestDelta = absDelta; // Adjust older deltas if necessary - if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { + if (shouldAdjustOldDeltas(orgEvent, absDelta)) { lowestDelta /= 40; } } // Adjust older deltas if necessary - if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { + if (shouldAdjustOldDeltas(orgEvent, absDelta)) { // Divide all the things by 40! - delta /= 40; + delta /= 40; deltaX /= 40; deltaY /= 40; } // Get a whole, normalized value for the deltas - delta = Math[ delta >= 1 ? "floor" : "ceil" ](delta / lowestDelta); - deltaX = Math[ deltaX >= 1 ? "floor" : "ceil" ](deltaX / lowestDelta); - deltaY = Math[ deltaY >= 1 ? "floor" : "ceil" ](deltaY / lowestDelta); + delta = Math[delta >= 1 ? "floor" : "ceil"](delta / lowestDelta); + deltaX = Math[deltaX >= 1 ? "floor" : "ceil"](deltaX / lowestDelta); + deltaY = Math[deltaY >= 1 ? "floor" : "ceil"](deltaY / lowestDelta); // Normalise offsetX and offsetY properties - if ( special.settings.normalizeOffset && this.getBoundingClientRect ) { + if (special.settings.normalizeOffset && this.getBoundingClientRect) { var boundingRect = this.getBoundingClientRect(); offsetX = event.clientX - boundingRect.left; offsetY = event.clientY - boundingRect.top; @@ -180,17 +193,19 @@ // handle multiple device types that give different // a different lowestDelta // Ex: trackpad = 3 and mouse wheel = 120 - if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); } + if (nullLowestDeltaTimeout) { + clearTimeout(nullLowestDeltaTimeout); + } nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200); return ($.event.dispatch || $.event.handle).apply(this, args); } - function nullLowestDelta () { + function nullLowestDelta() { lowestDelta = null; } - function shouldAdjustOldDeltas (orgEvent, absDelta) { + function shouldAdjustOldDeltas(orgEvent, absDelta) { // If this is an older event and the delta is divisable by 120, // then we are assuming that the browser is treating this as an // older mouse wheel event and that we should divide the deltas @@ -201,4 +216,4 @@ return special.settings.adjustOldDeltas && orgEvent.type === "mousewheel" && absDelta % 120 === 0; } -})); \ No newline at end of file +})); From aa6fcad0bf9508b9ccb51e7e5e6fc16c98a642ed Mon Sep 17 00:00:00 2001 From: zsmj Date: Wed, 11 Jan 2023 15:40:42 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-14066=20feat:=20case/tree=E5=92=8Cca?= =?UTF-8?q?se/ztree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/platform/web/index.js | 1 - src/core/utils/color.js | 406 ++++++++++++------------ src/core/{platform/web => utils}/dom.js | 368 ++++++++++----------- src/core/utils/index.js | 10 +- 4 files changed, 397 insertions(+), 388 deletions(-) rename src/core/{platform/web => utils}/dom.js (73%) diff --git a/src/core/platform/web/index.js b/src/core/platform/web/index.js index db216134b..054b6dede 100644 --- a/src/core/platform/web/index.js +++ b/src/core/platform/web/index.js @@ -1,4 +1,3 @@ -export * as DOM from "./dom"; export * from "./detectElementResize"; export * from "./function"; export * from "./load"; diff --git a/src/core/utils/color.js b/src/core/utils/color.js index a219a4f7d..718a9e74b 100644 --- a/src/core/utils/color.js +++ b/src/core/utils/color.js @@ -1,204 +1,206 @@ import { parseInt, parseFloat, isNull, isKey } from "../2.base"; -import * as DOMUtils from "../platform/web/dom"; - -export const DOM = { - isColor(color) { - return color && (this.isRGBColor(color) || this.isHexColor(color)); - }, - - isRGBColor(color) { - if (!color) { - return false; - } - - return color.substr(0, 3) === "rgb"; - }, - - isHexColor(color) { - if (!color) { - return false; - } - - return color[0] === "#" && color.length === 7; - }, - - isDarkColor(hex) { - if (!hex || !this.isHexColor(hex)) { - return false; - } - const rgb = this.rgb2json(this.hex2rgb(hex)); - const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); - if (grayLevel < 192/** 网上给的是140**/) { - return true; - } - + +export function isColor(color) { + return color && (isRGBColor(color) || isHexColor(color)); +} + +export function isRGBColor(color) { + if (!color) { + return false; + } + + return color.substr(0, 3) === "rgb"; +} + +export function isHexColor(color) { + if (!color) { return false; - }, - - // 获取对比颜色 - getContrastColor(color) { - if (!color || !this.isColor(color)) { - return ""; - } - if (this.isDarkColor(color)) { - return "#FFFFFF"; - } - - return "#3D4D66"; - }, - - rgb2hex(rgbColour) { - if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { - return ""; - } - const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - const red = parseInt(rgbValues[0]); - const green = parseInt(rgbValues[1]); - const blue = parseInt(rgbValues[2]); - - const hexColour = `#${this.int2hex(red)}${this.int2hex(green)}${this.int2hex(blue)}`; - - return hexColour; - }, - - _hue2rgb(m1, m2, h) { - h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); - if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; - if (h * 2 < 1) return m2; - if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; - - return m1; - }, - - hsl2rgb(hsl) { - const h = hsl[0], s = hsl[1], l = hsl[2]; - const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; - const m1 = l * 2 - m2; - - return [this._hue2rgb(m1, m2, h + 0.33333), - this._hue2rgb(m1, m2, h), - this._hue2rgb(m1, m2, h - 0.33333)]; - }, - - rgb2hsl(rgb) { - let h, s; - const r = rgb[0], g = rgb[1], b = rgb[2]; - const min = Math.min(r, Math.min(g, b)); - const max = Math.max(r, Math.max(g, b)); - const delta = max - min; - const l = (min + max) / 2; - s = 0; - if (l > 0 && l < 1) { - s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); - } - h = 0; - if (delta > 0) { - if (max === r && max !== g) h += (g - b) / delta; - if (max === g && max !== b) h += (2 + (b - r) / delta); - if (max === b && max !== r) h += (4 + (r - g) / delta); - h /= 6; - } - - return [h, s, l]; - }, - - rgb2json(rgbColour) { - if (!rgbColour) { - return {}; - } - if (!this.isRGBColor(rgbColour)) { - return {}; - } - const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - - return { - r: parseInt(rgbValues[0]), - g: parseInt(rgbValues[1]), - b: parseInt(rgbValues[2]), - }; - }, - - rgba2json(rgbColour) { - if (!rgbColour) { - return {}; - } - const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - - return { - r: parseInt(rgbValues[0]), - g: parseInt(rgbValues[1]), - b: parseInt(rgbValues[2]), - a: parseFloat(rgbValues[3]), - }; - }, - - json2rgb(rgb) { - if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { - return ""; - } - - return `rgb(${rgb.r},${rgb.g},${rgb.b})`; - }, - - json2rgba(rgba) { - if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { - return ""; - } - - return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; - }, - - int2hex(strNum) { - const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; - - return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; - }, - - hex2rgb(color) { - if (!color) { - return ""; - } - if (!this.isHexColor(color)) { - return color; - } - let tempValue = "rgb(", colorArray; - - if (color.length === 7) { - colorArray = [parseInt(`0x${color.substring(1, 3)}`), - parseInt(`0x${color.substring(3, 5)}`), - parseInt(`0x${color.substring(5, 7)}`)]; - } else if (color.length === 4) { - colorArray = [parseInt(`0x${color.substring(1, 2)}`), - parseInt(`0x${color.substring(2, 3)}`), - parseInt(`0x${color.substring(3, 4)}`)]; - } - tempValue += `${colorArray[0]},`; - tempValue += `${colorArray[1]},`; - tempValue += `${colorArray[2]})`; - - return tempValue; - }, - - rgba2rgb(rgbColor, bgColor) { - if (isNull(bgColor)) { - bgColor = 1; - } - if (rgbColor.substr(0, 4) !== "rgba") { - return ""; - } - const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); - if (rgbValues.length < 4) { - return ""; - } - const R = parseFloat(rgbValues[0]); - const G = parseFloat(rgbValues[1]); - const B = parseFloat(rgbValues[2]); - const A = parseFloat(rgbValues[3]); - - return `rgb(${Math.floor(255 * (bgColor * (1 - A)) + R * A)},${ - Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ - Math.floor(255 * (bgColor * (1 - A)) + B * A)})`; - }, - - ...DOMUtils, -}; + } + + return color[0] === "#" && color.length === 7; +} + +export function isDarkColor(hex) { + if (!hex || !isHexColor(hex)) { + return false; + } + const rgb = rgb2json(hex2rgb(hex)); + const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); + if (grayLevel < 192/** 网上给的是140**/) { + return true; + } + + return false; +} + +// 获取对比颜色 +export function getContrastColor(color) { + if (!color || !isColor(color)) { + return ""; + } + if (isDarkColor(color)) { + return "#FFFFFF"; + } + + return "#3D4D66"; +} + +export function rgb2hex(rgbColour) { + if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { + return ""; + } + const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + const red = parseInt(rgbValues[0]); + const green = parseInt(rgbValues[1]); + const blue = parseInt(rgbValues[2]); + + const hexColour = `#${int2hex(red)}${int2hex(green)}${int2hex(blue)}`; + + return hexColour; +} + +function _hue2rgb(m1, m2, h) { + h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); + if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; + if (h * 2 < 1) return m2; + if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; + + return m1; +} + +export function hsl2rgb(hsl) { + const h = hsl[0], s = hsl[1], l = hsl[2]; + const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; + const m1 = l * 2 - m2; + + return [ + _hue2rgb(m1, m2, h + 0.33333), + _hue2rgb(m1, m2, h), + _hue2rgb(m1, m2, h - 0.33333) + ]; +} + +export function rgb2hsl(rgb) { + let h, s; + const r = rgb[0], g = rgb[1], b = rgb[2]; + const min = Math.min(r, Math.min(g, b)); + const max = Math.max(r, Math.max(g, b)); + const delta = max - min; + const l = (min + max) / 2; + s = 0; + if (l > 0 && l < 1) { + s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); + } + h = 0; + if (delta > 0) { + if (max === r && max !== g) h += (g - b) / delta; + if (max === g && max !== b) h += (2 + (b - r) / delta); + if (max === b && max !== r) h += (4 + (r - g) / delta); + h /= 6; + } + + return [h, s, l]; +} + +export function rgb2json(rgbColour) { + if (!rgbColour) { + return {}; + } + if (!isRGBColor(rgbColour)) { + return {}; + } + const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + + return { + r: parseInt(rgbValues[0]), + g: parseInt(rgbValues[1]), + b: parseInt(rgbValues[2]), + }; +} + +export function rgba2json(rgbColour) { + if (!rgbColour) { + return {}; + } + const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + + return { + r: parseInt(rgbValues[0]), + g: parseInt(rgbValues[1]), + b: parseInt(rgbValues[2]), + a: parseFloat(rgbValues[3]), + }; +} + +export function json2rgb(rgb) { + if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { + return ""; + } + + return `rgb(${rgb.r},${rgb.g},${rgb.b})`; +} + +export function json2rgba(rgba) { + if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { + return ""; + } + + return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; +} + +export function int2hex(strNum) { + const hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; + + return `${hexdig[strNum >>> 4]}${hexdig[strNum & 15]}`; +} + +export function hex2rgb(color) { + if (!color) { + return ""; + } + if (!isHexColor(color)) { + return color; + } + let tempValue = "rgb(", colorArray; + + if (color.length === 7) { + colorArray = [ + parseInt(`0x${color.substring(1, 3)}`), + parseInt(`0x${color.substring(3, 5)}`), + parseInt(`0x${color.substring(5, 7)}`) + ]; + } else if (color.length === 4) { + colorArray = [ + parseInt(`0x${color.substring(1, 2)}`), + parseInt(`0x${color.substring(2, 3)}`), + parseInt(`0x${color.substring(3, 4)}`) + ]; + } + tempValue += `${colorArray[0]},`; + tempValue += `${colorArray[1]},`; + tempValue += `${colorArray[2]})`; + + return tempValue; +} + +export function rgba2rgb(rgbColor, bgColor) { + if (isNull(bgColor)) { + bgColor = 1; + } + if (rgbColor.substr(0, 4) !== "rgba") { + return ""; + } + const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); + if (rgbValues.length < 4) { + return ""; + } + const R = parseFloat(rgbValues[0]); + const G = parseFloat(rgbValues[1]); + const B = parseFloat(rgbValues[2]); + const A = parseFloat(rgbValues[3]); + + return `rgb(${Math.floor(255 * (bgColor * (1 - A)) + R * A)},${ + Math.floor(255 * (bgColor * (1 - A)) + G * A)},${ + Math.floor(255 * (bgColor * (1 - A)) + B * A)})`; +} + diff --git a/src/core/platform/web/dom.js b/src/core/utils/dom.js similarity index 73% rename from src/core/platform/web/dom.js rename to src/core/utils/dom.js index 1fca2871b..c356b9b50 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/utils/dom.js @@ -1,7 +1,7 @@ /** * 对DOM操作的通用函数 */ -import { each, isEmpty, isNull } from "../../2.base"; +import { each, isEmpty, isNull } from "../2.base"; export function ready(fn) { BI.Widget._renderEngine.createElement(document).ready(fn); @@ -502,208 +502,208 @@ export function getComboPositionByDirections(combo, popup, extraWidth, extraHeig for (i = 0; i < directions.length; i++) { direct = directions[i]; switch (direct) { - case "left": - leftRight.push(direct); - break; - case "right": - leftRight.push(direct); - break; - case "top": - topBottom.push(direct); - break; - case "bottom": - topBottom.push(direct); - break; - case "innerLeft": - innerLeftRight.push(direct); - break; - case "innerRight": - innerLeftRight.push(direct); - break; - default: - break; + case "left": + leftRight.push(direct); + break; + case "right": + leftRight.push(direct); + break; + case "top": + topBottom.push(direct); + break; + case "bottom": + topBottom.push(direct); + break; + case "innerLeft": + innerLeftRight.push(direct); + break; + case "innerRight": + innerLeftRight.push(direct); + break; + default: + break; } } for (i = 0; i < directions.length; i++) { let tW, tH; direct = directions[i]; switch (direct) { - case "left": - if (!isNeedAdaptHeight) { - tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; - if (isLeftSpaceEnough(combo, popup, tW)) { - left = getLeftPosition(combo, popup, tW, container).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); + case "left": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; + if (isLeftSpaceEnough(combo, popup, tW)) { + left = getLeftPosition(combo, popup, tW, container).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); + } + pos.dir = `left,${pos.dir}`; + if (tbFirst) { + pos.change = "left"; + } + pos.left = left; + + return pos; } - pos.dir = `left,${pos.dir}`; - if (tbFirst) { - pos.change = "left"; + } + lrFirst = true; + break; + case "right": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; + if (isRightSpaceEnough(combo, popup, tW)) { + left = getRightPosition(combo, popup, tW, container).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); + } + pos.dir = `right,${pos.dir}`; + if (tbFirst) { + pos.change = "right"; + } + pos.left = left; + + return pos; } - pos.left = left; - - return pos; } - } - lrFirst = true; - break; - case "right": - if (!isNeedAdaptHeight) { - tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; - if (isRightSpaceEnough(combo, popup, tW)) { - left = getRightPosition(combo, popup, tW, container).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); + lrFirst = true; + break; + case "top": + tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; + if (isTopSpaceEnough(combo, popup, tH)) { + top = getTopPosition(combo, popup, tH, container).top; + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, tW, container); } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); + pos = getRightAlignPosition(combo, popup, tW, container); } - pos.dir = `right,${pos.dir}`; - if (tbFirst) { - pos.change = "right"; + pos.dir = `top,${pos.dir}`; + if (lrFirst) { + pos.change = "top"; } - pos.left = left; + pos.top = top; return pos; } - } - lrFirst = true; - break; - case "top": - tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; - if (isTopSpaceEnough(combo, popup, tH)) { - top = getTopPosition(combo, popup, tH, container).top; - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, tW, container); - } else { - pos = getRightAlignPosition(combo, popup, tW, container); - } - pos.dir = `top,${pos.dir}`; - if (lrFirst) { - pos.change = "top"; + if (needAdaptHeight) { + isNeedAdaptHeight = true; } - pos.top = top; - - return pos; - } - if (needAdaptHeight) { - isNeedAdaptHeight = true; - } - tbFirst = true; - break; - case "bottom": - tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; - if (isBottomSpaceEnough(combo, popup, tH)) { - top = getBottomPosition(combo, popup, tH, container).top; - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, tW, container); - } else { - pos = getRightAlignPosition(combo, popup, tW, container); - } - pos.dir = `bottom,${pos.dir}`; - if (lrFirst) { - pos.change = "bottom"; - } - pos.top = top; - - return pos; - } - if (needAdaptHeight) { - isNeedAdaptHeight = true; - } - tbFirst = true; - break; - case "innerLeft": - if (!isNeedAdaptHeight) { - tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; - if (isInnerLeftSpaceEnough(combo, popup, tW)) { - left = getInnerLeftPosition(combo, popup, tW).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); + tbFirst = true; + break; + case "bottom": + tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; + if (isBottomSpaceEnough(combo, popup, tH)) { + top = getBottomPosition(combo, popup, tH, container).top; + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, tW, container); } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + pos = getRightAlignPosition(combo, popup, tW, container); } - pos.dir = `innerLeft,${pos.dir}`; - if (tbFirst) { - pos.change = "innerLeft"; + pos.dir = `bottom,${pos.dir}`; + if (lrFirst) { + pos.change = "bottom"; } - pos.left = left; + pos.top = top; return pos; } - } - lrFirst = true; - break; - case "innerRight": - if (!isNeedAdaptHeight) { - tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; - if (isInnerRightSpaceEnough(combo, popup, tW)) { - left = getInnerRightPosition(combo, popup, tW).left; - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); - } else { - pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + if (needAdaptHeight) { + isNeedAdaptHeight = true; + } + tbFirst = true; + break; + case "innerLeft": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; + if (isInnerLeftSpaceEnough(combo, popup, tW)) { + left = getInnerLeftPosition(combo, popup, tW).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + } + pos.dir = `innerLeft,${pos.dir}`; + if (tbFirst) { + pos.change = "innerLeft"; + } + pos.left = left; + + return pos; } - pos.dir = `innerLeft,${pos.dir}`; - if (tbFirst) { - pos.change = "innerRight"; + } + lrFirst = true; + break; + case "innerRight": + if (!isNeedAdaptHeight) { + tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; + if (isInnerRightSpaceEnough(combo, popup, tW)) { + left = getInnerRightPosition(combo, popup, tW).left; + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, tH, needAdaptHeight); + } else { + pos = getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + } + pos.dir = `innerLeft,${pos.dir}`; + if (tbFirst) { + pos.change = "innerRight"; + } + pos.left = left; + + return pos; } - pos.left = left; - - return pos; } - } - break; - default: - break; + break; + default: + break; } } // 此处为四个方向放不下时挑空间最大的方向去放置, 也就是说我设置了弹出方向为"bottom,left", // 最后发现实际弹出方向可能是"top,left"，那么此时外界获取popup的方向应该是"top,left" switch (directions[0]) { - case "left": - case "right": - if (isRightSpaceLarger(combo)) { - left = getRightAdaptPosition(combo, popup, extraWidth, container).left; - firstDir = "right"; - } else { - left = getLeftAdaptPosition(combo, popup, extraWidth, container).left; - firstDir = "left"; - } - if (topBottom[0] === "bottom") { - pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight); + case "left": + case "right": + if (isRightSpaceLarger(combo)) { + left = getRightAdaptPosition(combo, popup, extraWidth, container).left; + firstDir = "right"; + } else { + left = getLeftAdaptPosition(combo, popup, extraWidth, container).left; + firstDir = "left"; + } + if (topBottom[0] === "bottom") { + pos = getTopAlignPosition(combo, popup, extraHeight, needAdaptHeight); + pos.left = left; + pos.dir = `${firstDir},${pos.dir}`; + + return pos; + } + pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight); pos.left = left; pos.dir = `${firstDir},${pos.dir}`; return pos; - } - pos = getBottomAlignPosition(combo, popup, extraHeight, needAdaptHeight); - pos.left = left; - pos.dir = `${firstDir},${pos.dir}`; - - return pos; - default : - if (isBottomSpaceLarger(combo)) { - top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; - firstDir = "bottom"; - } else { - top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; - firstDir = "top"; - } - if (leftRight[0] === "right") { - pos = getLeftAlignPosition(combo, popup, extraWidth, container); + default : + if (isBottomSpaceLarger(combo)) { + top = getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; + firstDir = "bottom"; + } else { + top = getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; + firstDir = "top"; + } + if (leftRight[0] === "right") { + pos = getLeftAlignPosition(combo, popup, extraWidth, container); + pos.top = top; + pos.dir = `${firstDir},${pos.dir}`; + + return pos; + } + pos = getRightAlignPosition(combo, popup, extraWidth, container); pos.top = top; pos.dir = `${firstDir},${pos.dir}`; return pos; - } - pos = getRightAlignPosition(combo, popup, extraWidth, container); - pos.top = top; - pos.dir = `${firstDir},${pos.dir}`; - - return pos; } } @@ -716,26 +716,26 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap popup.resetHeight && popup.resetHeight(maxHeight); const position = getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"], positionRelativeElement); switch (offsetStyle) { - case "center": - if (position.change) { - const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); - position.top = p.top; - } else { - const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); - position.left = p.left; - } - break; - case "middle": - if (position.change) { - const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); - position.left = p.left; - } else { - const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); - position.top = p.top; - } - break; - default: - break; + case "center": + if (position.change) { + const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); + position.top = p.top; + } else { + const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); + position.left = p.left; + } + break; + case "middle": + if (position.change) { + const p = getCenterAdaptPosition(combo, popup, positionRelativeElement); + position.left = p.left; + } else { + const p = getMiddleAdaptPosition(combo, popup, positionRelativeElement); + position.top = p.top; + } + break; + default: + break; } if (needAdaptHeight === true) { popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top - (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight)); diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 059be17e4..0937fcd71 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -1,4 +1,12 @@ export * from "./events"; export * from "./i18n"; export { makeFirstPY } from "./chinesePY"; -export { DOM } from "./color"; + +import * as platformDom from "./dom"; +import * as colorDom from "./color"; + + +export const DOM = { + ...platformDom, + ...colorDom +};