forked from fanruan/fineui
zsmj
2 years ago
23 changed files with 1882 additions and 1793 deletions
@ -0,0 +1,3 @@ |
|||||||
|
export * from "./tree.level"; |
||||||
|
export * from "./treeexpander/tree.expander"; |
||||||
|
export * from "./treeexpander/tree.expander.popup"; |
@ -1,130 +1,127 @@ |
|||||||
/** |
import { shortcut, Widget, extend, isKey, each, UUID, defaults, isNotEmptyArray, Tree, createWidget } from "@/core"; |
||||||
* guy |
|
||||||
* 二级树 |
@shortcut() |
||||||
* @class BI.LevelTree |
export class LevelTree extends Widget { |
||||||
* @extends BI.Single |
static xtype = "bi.level_tree"; |
||||||
*/ |
|
||||||
BI.LevelTree = BI.inherit(BI.Widget, { |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.LevelTree.superclass._defaultConfig.apply(this, arguments), { |
props = { |
||||||
baseCls: "bi-level-tree", |
baseCls: "bi-level-tree", |
||||||
el: { |
el: { |
||||||
chooseType: 0 |
chooseType: 0, |
||||||
}, |
}, |
||||||
expander: {}, |
expander: {}, |
||||||
items: [], |
items: [], |
||||||
value: "" |
value: "", |
||||||
}); |
}; |
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.LevelTree.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
this.initTree(this.options.items); |
this.initTree(this.options.items); |
||||||
}, |
} |
||||||
|
|
||||||
_formatItems: function (nodes, layer, pNode) { |
_formatItems(nodes, layer, pNode) { |
||||||
var self = this; |
const self = this; |
||||||
BI.each(nodes, function (i, node) { |
each(nodes, (i, node) => { |
||||||
var extend = { |
const extend = { |
||||||
layer: layer, |
layer, |
||||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
isFirstNode: i === 0, |
isFirstNode: i === 0, |
||||||
isLastNode: i === nodes.length - 1, |
isLastNode: i === nodes.length - 1, |
||||||
}; |
}; |
||||||
if (!BI.isKey(node.id)) { |
if (!isKey(node.id)) { |
||||||
node.id = BI.UUID(); |
node.id = UUID(); |
||||||
} |
} |
||||||
extend.pNode = pNode; |
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.type = "bi.tree_node"; |
||||||
extend.selectable = false; |
extend.selectable = false; |
||||||
|
|
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
self._formatItems(node.children, layer + 1, node); |
self._formatItems(node.children, layer + 1, node); |
||||||
} else { |
} else { |
||||||
extend.type = "bi.tree_item"; |
extend.type = "bi.tree_item"; |
||||||
BI.defaults(node, extend); |
defaults(node, extend); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return nodes; |
return nodes; |
||||||
}, |
} |
||||||
|
|
||||||
_assertId: function (sNodes) { |
_assertId(sNodes) { |
||||||
BI.each(sNodes, function (i, node) { |
each(sNodes, (i, node) => { |
||||||
if (!BI.isKey(node.id)) { |
if (!isKey(node.id)) { |
||||||
node.id = BI.UUID(); |
node.id = UUID(); |
||||||
} |
} |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
// 构造树结构,
|
initTree(nodes) { |
||||||
initTree: function (nodes) { |
const self = this, o = this.options; |
||||||
var self = this, o = this.options; |
|
||||||
this.empty(); |
this.empty(); |
||||||
this._assertId(nodes); |
this._assertId(nodes); |
||||||
this.tree = BI.createWidget({ |
this.tree = createWidget({ |
||||||
type: "bi.custom_tree", |
type: "bi.custom_tree", |
||||||
element: this, |
element: this, |
||||||
expander: BI.extend({ |
expander: extend({ |
||||||
type: "bi.tree_expander", |
type: "bi.tree_expander", |
||||||
el: {}, |
el: {}, |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
selectable: false, |
selectable: false, |
||||||
popup: { |
popup: { |
||||||
type: "bi.custom_tree" |
type: "bi.custom_tree", |
||||||
} |
}, |
||||||
}, o.expander), |
}, o.expander), |
||||||
items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), |
items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), |
||||||
value: o.value, |
value: o.value, |
||||||
|
|
||||||
el: BI.extend({ |
el: extend({ |
||||||
type: "bi.button_tree", |
type: "bi.button_tree", |
||||||
chooseType: 0, |
chooseType: 0, |
||||||
layouts: [{ |
layouts: [ |
||||||
type: "bi.vertical" |
{ |
||||||
}] |
type: "bi.vertical", |
||||||
}, o.el) |
} |
||||||
|
], |
||||||
|
}, o.el), |
||||||
}); |
}); |
||||||
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { |
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||||
if (type === BI.Events.CLICK) { |
if (type === BI.Events.CLICK) { |
||||||
self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob); |
self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); |
||||||
self.setValue(value); |
self.setValue(value); |
||||||
} |
} |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
// 生成树方法
|
stroke(nodes) { |
||||||
stroke: function (nodes) { |
this.tree.stroke(nodes); |
||||||
this.tree.stroke.apply(this.tree, arguments); |
} |
||||||
}, |
|
||||||
|
|
||||||
populate: function (items, keyword) { |
populate(items, keyword) { |
||||||
items = this._formatItems(BI.Tree.transformToTreeFormat(items), 0); |
items = this._formatItems(Tree.transformToTreeFormat(items), 0); |
||||||
this.tree.populate(items, keyword); |
this.tree.populate(items, keyword); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.tree.setValue(v); |
this.tree.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.tree.getValue(); |
return this.tree.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
getAllLeaves: function () { |
getAllLeaves() { |
||||||
return this.tree.getAllLeaves(); |
return this.tree.getAllLeaves(); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeById: function (id) { |
getNodeById(id) { |
||||||
return this.tree.getNodeById(id); |
return this.tree.getNodeById(id); |
||||||
}, |
} |
||||||
|
|
||||||
getNodeByValue: function (id) { |
getNodeByValue(id) { |
||||||
return this.tree.getNodeByValue(id); |
return this.tree.getNodeByValue(id); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.LevelTree.EVENT_CHANGE = "EVENT_CHANGE"; |
|
||||||
|
|
||||||
BI.shortcut("bi.level_tree", BI.LevelTree); |
|
||||||
|
@ -1,80 +1,82 @@ |
|||||||
!(function () { |
import { contains, Controller, createWidget, isArray, shortcut, Widget } from "@/core"; |
||||||
var Widget = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "bi-tree-expander", |
|
||||||
layer: 0, // 第几层级
|
|
||||||
isLastNode: false, // 是不是最后一个
|
|
||||||
isFirstNode: false, // 是不是第一个
|
|
||||||
selectable: false, |
|
||||||
showLine: true, |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
@shortcut() |
||||||
|
export class TreeExpander extends Widget { |
||||||
|
static xtype = "bi.tree_expander"; |
||||||
|
|
||||||
var self = this; |
props = { |
||||||
var o = this.options; |
baseCls: "bi-tree-expander", |
||||||
|
layer: 0, // 第几层级
|
||||||
|
isLastNode: false, // 是不是最后一个
|
||||||
|
isFirstNode: false, // 是不是第一个
|
||||||
|
selectable: false, |
||||||
|
showLine: true, |
||||||
|
}; |
||||||
|
|
||||||
this.trigger = BI.createWidget(o.el, { |
render() { |
||||||
forceNotSelected: !o.selectable, |
const self = this; |
||||||
}); |
const o = this.options; |
||||||
this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { |
|
||||||
o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
||||||
}); |
|
||||||
|
|
||||||
return { |
this.trigger = createWidget(o.el, { |
||||||
type: "bi.expander", |
forceNotSelected: !o.selectable, |
||||||
ref: function (_ref) { |
}); |
||||||
self.expander = _ref; |
this.trigger.on(Controller.EVENT_CHANGE, function (type) { |
||||||
}, |
o.selectable && self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
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); |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
return { |
||||||
if (BI.contains(v, this.trigger.getValue())) { |
type: "bi.expander", |
||||||
this.trigger.setSelected(true); |
ref(_ref) { |
||||||
this.expander.setValue([]); |
self.expander = _ref; |
||||||
} else { |
}, |
||||||
this.trigger.setSelected(false); |
trigger: o.selectable ? "" : "click", |
||||||
this.expander.setValue(v); |
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 () { |
setValue(v) { |
||||||
if (this.trigger.isSelected()) { |
if (contains(v, this.trigger.getValue())) { |
||||||
var value = this.trigger.getValue(); |
this.trigger.setSelected(true); |
||||||
return BI.isArray(value) ? value : [value]; |
this.expander.setValue([]); |
||||||
} |
} else { |
||||||
return this.expander.getValue(); |
this.trigger.setSelected(false); |
||||||
}, |
this.expander.setValue(v); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
populate: function (items) { |
getValue() { |
||||||
this.expander.populate(items); |
if (this.trigger.isSelected()) { |
||||||
}, |
const value = this.trigger.getValue(); |
||||||
|
|
||||||
getAllLeaves: function () { |
return isArray(value) ? value : [value]; |
||||||
return this.expander && this.expander.getAllLeaves(); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("bi.tree_expander", Widget); |
return this.expander.getValue(); |
||||||
}()); |
} |
||||||
|
|
||||||
|
populate(items) { |
||||||
|
this.expander.populate(items); |
||||||
|
} |
||||||
|
|
||||||
|
getAllLeaves() { |
||||||
|
return this.expander && this.expander.getAllLeaves(); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,60 +1,61 @@ |
|||||||
!(function () { |
import { Controller, createWidget, pixFormat, shortcut, Widget } from "@/core"; |
||||||
var Widget = BI.inherit(BI.Widget, { |
|
||||||
props: function () { |
@shortcut() |
||||||
return { |
export class TreeExpanderPopup extends Widget { |
||||||
baseCls: "bi-tree-expander-popup", |
static xtype = "bi.tree_expander.popup"; |
||||||
layer: 0, // 第几层级
|
|
||||||
el: {}, |
props() { |
||||||
isLastNode: false, |
return { |
||||||
showLine: true, |
baseCls: "bi-tree-expander-popup", |
||||||
}; |
layer: 0, // 第几层级
|
||||||
}, |
el: {}, |
||||||
|
isLastNode: false, |
||||||
render: function () { |
showLine: true, |
||||||
|
}; |
||||||
var self = this; |
} |
||||||
var o = this.options; |
|
||||||
var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
render() { |
||||||
|
const self = this; |
||||||
this.popupView = BI.createWidget(BI.extend(o.el, { |
const { el, value, layer, showLine, isLastNode } = this.options; |
||||||
value: o.value |
const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; |
||||||
}), this); |
|
||||||
|
this.popupView = createWidget({ |
||||||
this.popupView.on(BI.Controller.EVENT_CHANGE, function () { |
...el, |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
value, |
||||||
}); |
}, this); |
||||||
|
|
||||||
if (o.showLine) { |
this.popupView.on(Controller.EVENT_CHANGE, function () { |
||||||
this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1))); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1))); |
}); |
||||||
} |
|
||||||
|
if (showLine) { |
||||||
return { |
this.popupView.element.css("margin-left", pixFormat(-offset * (layer + 1))); |
||||||
type: "bi.vertical", |
this.element.css("margin-left", pixFormat(offset * (layer + 1))); |
||||||
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(); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
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(); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -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"; |
File diff suppressed because it is too large
Load Diff
@ -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); |
|
@ -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); |
|
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
@ -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); |
||||||
|
} |
||||||
|
} |
@ -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 = {}; |
||||||
|
} |
||||||
|
} |
@ -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 = {}; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
})(); |
|
Loading…
Reference in new issue