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 @@
|
||||
/** |
||||
* 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); |
||||
} |
||||
|
||||
@ -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(); |
||||
} |
||||
} |
||||
|
||||
@ -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(); |
||||
} |
||||
} |
||||
|
||||
@ -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