fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

DESIGN-4103 feat: 重写一下下拉树的布局

es6
zsmj 2 years ago
parent
59b332512a
commit
2b81ffd403
5 changed files with 76 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      src/widget/multilayerselecttree/multilayerselecttree.combo.js
  2. 61
      src/widget/multilayerselecttree/multilayerselecttree.trigger.js
  3. 22
      src/widget/multilayersingletree/multilayersingletree.combo.js
  4. 59
      src/widget/multilayersingletree/multilayersingletree.trigger.js
  5. 1
      src/widget/singletree/singletree.trigger.js

65
src/widget/multilayerselecttree/multilayerselecttree.combo.js
Unescape View File

@ -16,59 +16,21 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
allowEdit: false, allowEdit: false,
allowSearchValue: false, allowSearchValue: false,
allowInsertValue: false, allowInsertValue: false,
isNeedAdjustWidth: true isNeedAdjustWidth: true,
}); });
}, },
_init: function () { _init: function () {
var o = this.options; var o = this.options;
if (this._shouldWrapper()) { BI.isNumeric(o.width) && (o.width -= 2);
o.height -= 2; BI.isNumeric(o.height) && (o.height -= 2);
BI.isNumeric(o.width) && (o.width -= 2);
}
BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments); BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
}, },
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
var combo = (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig(); return (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
return this._shouldWrapper() ? combo : {
type: "bi.absolute",
items: [{
el: combo,
left: 0,
right: 0,
top: 0,
bottom: 0
}, {
el: {
type: "bi.trigger_icon_button",
cls: "trigger-icon-button",
ref: function (_ref) {
self.triggerBtn = _ref;
},
width: o.height,
height: o.height,
handler: function () {
if (self.combo.isViewVisible()) {
self.combo.hideView();
} else {
self.combo.showView();
}
}
},
right: 0,
bottom: 0,
top: 0
}]
};
},
_shouldWrapper: function () {
var o = this.options;
return !o.allowEdit && o.itemsCreator === BI.emptyFn;
}, },
_getBaseConfig: function () { _getBaseConfig: function () {
@ -122,7 +84,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
}; };
}, },
_getSearchConfig: function() { _getSearchConfig: function () {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
el: { el: {
@ -139,7 +101,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
watermark: o.watermark, watermark: o.watermark,
height: o.height - (o.simple ? 1 : 2), // height: o.height - (o.simple ? 1 : 2),
height: o.height,
text: o.text, text: o.text,
value: o.value, value: o.value,
tipType: o.tipType, tipType: o.tipType,
@ -184,7 +147,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
// IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
// 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn.element.find(e.target).length === 0; return !(o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0);
}, },
listeners: [{ listeners: [{
@ -198,7 +161,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW);
} }
}] }]
} };
}, },
_getSyncConfig: function () { _getSyncConfig: function () {
@ -207,13 +170,15 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : { return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : {
el: { el: {
type: "bi.single_tree_trigger", type: "bi.single_tree_trigger",
ref: function(_ref) { ref: function (_ref) {
self.textTrigger = _ref; self.textTrigger = _ref;
}, },
text: o.text, text: o.text,
height: o.height, height: o.height,
items: o.items, items: o.items,
value: o.value value: o.value,
tipType: o.tipType,
warningTitle: o.warningTitle,
} }
}); });
}, },
@ -236,6 +201,10 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor();
}, },
clear: function () {
// do some work
},
populate: function (items) { populate: function (items) {
this.combo.populate(items); this.combo.populate(items);
}, },

61
src/widget/multilayerselecttree/multilayerselecttree.trigger.js
Unescape View File

@ -3,7 +3,7 @@
*/ */
BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, { BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
props: function() { props: function () {
return { return {
extraCls: "bi-multi-layer-select-tree-trigger", extraCls: "bi-multi-layer-select-tree-trigger",
height: 24, height: 24,
@ -16,11 +16,12 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
if(o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
this._initData(); this._initData();
} }
var content = {
type: "bi.htape", return {
type: "bi.horizontal_fill",
items: [ items: [
{ {
el: { el: {
@ -86,7 +87,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
}, },
onSearch: function (obj, callback) { onSearch: function (obj, callback) {
var keyword = obj.keyword; var keyword = obj.keyword;
if(o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword)); callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword); o.allowInsertValue && self.popup.setKeyword(keyword);
} else { } else {
@ -99,51 +100,37 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE); self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE);
} }
}] }]
} },
width: "fill",
}, { }, {
el: { el: {
type: "bi.layout", type: "bi.trigger_icon_button",
width: 24 cls: "trigger-icon-button",
ref: function (_ref) {
self.triggerBtn = _ref;
},
width: 24,
}, },
width: 24 width: 24,
} }
] ]
}; };
return o.allowEdit ? content : {
type: "bi.absolute",
items: [{
el: content,
left: 0,
right: 0,
top: 0,
bottom: 0
}, {
el: {
type: "bi.layout"
},
left: 0,
right: 24,
top: 0,
bottom: 0
}]
};
}, },
_initData: function() { _initData: function () {
var o = this.options; var o = this.options;
this.tree = new BI.Tree(); this.tree = new BI.Tree();
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items));
this.tree.initTree(this.nodes); this.tree.initTree(this.nodes);
}, },
_getSearchItems: function(keyword) { _getSearchItems: function (keyword) {
var self = this, o = this.options; var self = this, o = this.options;
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
var items = []; var items = [];
this.tree.traverse(function (node) { this.tree.traverse(function (node) {
var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword);
if(find.find.length > 0 || find.match.length > 0) { if (find.find.length > 0 || find.match.length > 0) {
items.push(node); items.push(node);
return true; return true;
} }
@ -151,7 +138,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
return this._fillTreeStructure4Search(items, "id"); return this._fillTreeStructure4Search(items, "id");
}, },
_createJson: function(node, open) { _createJson: function (node, open) {
return { return {
id: node.id, id: node.id,
pId: node.pId, pId: node.pId,
@ -159,10 +146,10 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
value: node.value, value: node.value,
isParent: BI.isNotEmptyArray(node.children), isParent: BI.isNotEmptyArray(node.children),
open: open open: open
} };
}, },
_getChildren: function(node) { _getChildren: function (node) {
var self = this; var self = this;
node.children = node.children || []; node.children = node.children || [];
var nodes = []; var nodes = [];
@ -179,7 +166,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
var result = []; var result = [];
var queue = []; var queue = [];
BI.each(leaves, function (idx, node) { BI.each(leaves, function (idx, node) {
queue.push({pId: node.pId}); queue.push({ pId: node.pId });
result.push(node); result.push(node);
result = result.concat(self._getChildren(node)); result = result.concat(self._getChildren(node));
}); });
@ -188,7 +175,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id");
if (pNode != null) { if (pNode != null) {
pNode.open = true; pNode.open = true;
queue.push({pId: pNode.pId}); queue.push({ pId: pNode.pId });
result.push(pNode); result.push(pNode);
} }
} }
@ -259,4 +246,4 @@ BI.MultiLayerSelectTreeTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START"; BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START";
BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.shortcut("bi.multilayer_select_tree_trigger", BI.MultiLayerSelectTreeTrigger); BI.shortcut("bi.multilayer_select_tree_trigger", BI.MultiLayerSelectTreeTrigger);

22
src/widget/multilayersingletree/multilayersingletree.combo.js
Unescape View File

@ -25,17 +25,15 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
_init: function () { _init: function () {
var o = this.options; var o = this.options;
if (this._shouldWrapper()) { BI.isNumeric(o.width) && (o.width -= 2);
o.height -= 2; BI.isNumeric(o.height) && (o.height -= 2);
BI.isNumeric(o.width) && (o.width -= 2);
}
BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments); BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
}, },
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
var combo = (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig(); return (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
return this._shouldWrapper() ? combo : { return this._shouldWrapper() ? combo : {
type: "bi.absolute", type: "bi.absolute",
@ -125,7 +123,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
}; };
}, },
_getSearchConfig: function() { _getSearchConfig: function () {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
el: { el: {
@ -142,7 +140,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
items: o.items, items: o.items,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
height: o.height - (o.simple ? 1 : 2), height: o.height,
text: o.text, text: o.text,
value: o.value, value: o.value,
tipType: o.tipType, tipType: o.tipType,
@ -186,7 +184,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
// IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
// 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn.element.find(e.target).length === 0 return !(o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0);
}, },
listeners: [{ listeners: [{
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
@ -199,7 +197,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
} }
}] }]
} };
}, },
_getSyncConfig: function () { _getSyncConfig: function () {
@ -208,13 +206,15 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : { return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : {
el: { el: {
type: "bi.single_tree_trigger", type: "bi.single_tree_trigger",
ref: function(_ref) { ref: function (_ref) {
self.textTrigger = _ref; self.textTrigger = _ref;
}, },
text: o.text, text: o.text,
height: o.height, height: o.height,
items: o.items, items: o.items,
value: o.value value: o.value,
tipType: o.tipType,
warningTitle: o.warningTitle,
} }
}); });
}, },

59
src/widget/multilayersingletree/multilayersingletree.trigger.js
Unescape View File

@ -3,7 +3,7 @@
*/ */
BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, { BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
props: function() { props: function () {
return { return {
extraCls: "bi-multi-layer-single-tree-trigger", extraCls: "bi-multi-layer-single-tree-trigger",
height: 24, height: 24,
@ -16,11 +16,12 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
if(o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
this._initData(); this._initData();
} }
var content = {
type: "bi.htape", return {
type: "bi.horizontal_fill",
items: [ items: [
{ {
el: { el: {
@ -86,7 +87,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
}, },
onSearch: function (obj, callback) { onSearch: function (obj, callback) {
var keyword = obj.keyword; var keyword = obj.keyword;
if(o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword)); callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword); o.allowInsertValue && self.popup.setKeyword(keyword);
} else { } else {
@ -99,51 +100,37 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE); self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE);
} }
}] }]
} },
width: "fill",
}, { }, {
el: { el: {
type: "bi.layout", type: "bi.trigger_icon_button",
width: 24 cls: "trigger-icon-button",
ref: function (_ref) {
self.triggerBtn = _ref;
},
width: 24,
}, },
width: 24 width: 24
} }
] ]
}; };
return o.allowEdit ? content : {
type: "bi.absolute",
items: [{
el: content,
left: 0,
right: 0,
top: 0,
bottom: 0
}, {
el: {
type: "bi.layout"
},
left: 0,
right: 24,
top: 0,
bottom: 0
}]
};
}, },
_initData: function() { _initData: function () {
var o = this.options; var o = this.options;
this.tree = new BI.Tree(); this.tree = new BI.Tree();
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items));
this.tree.initTree(this.nodes); this.tree.initTree(this.nodes);
}, },
_getSearchItems: function(keyword) { _getSearchItems: function (keyword) {
var self = this, o = this.options; var self = this, o = this.options;
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
var items = []; var items = [];
this.tree.traverse(function (node) { this.tree.traverse(function (node) {
var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword);
if(find.find.length > 0 || find.match.length > 0) { if (find.find.length > 0 || find.match.length > 0) {
items.push(node); items.push(node);
return true; return true;
} }
@ -151,7 +138,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
return this._fillTreeStructure4Search(items, "id"); return this._fillTreeStructure4Search(items, "id");
}, },
_createJson: function(node, open) { _createJson: function (node, open) {
return { return {
id: node.id, id: node.id,
pId: node.pId, pId: node.pId,
@ -159,10 +146,10 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
value: node.value, value: node.value,
isParent: BI.isNotEmptyArray(node.children), isParent: BI.isNotEmptyArray(node.children),
open: open open: open
} };
}, },
_getChildren: function(node) { _getChildren: function (node) {
var self = this; var self = this;
node.children = node.children || []; node.children = node.children || [];
var nodes = []; var nodes = [];
@ -179,7 +166,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
var result = []; var result = [];
var queue = []; var queue = [];
BI.each(leaves, function (idx, node) { BI.each(leaves, function (idx, node) {
queue.push({pId: node.pId}); queue.push({ pId: node.pId });
result.push(node); result.push(node);
result = result.concat(self._getChildren(node)); result = result.concat(self._getChildren(node));
}); });
@ -188,7 +175,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id");
if (pNode != null) { if (pNode != null) {
pNode.open = true; pNode.open = true;
queue.push({pId: pNode.pId}); queue.push({ pId: pNode.pId });
result.push(pNode); result.push(pNode);
} }
} }
@ -260,4 +247,4 @@ BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START"; BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START";
BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger); BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger);

1
src/widget/singletree/singletree.trigger.js
Unescape View File

@ -28,6 +28,7 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
items: o.items, items: o.items,
height: o.height, height: o.height,
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
tipType: o.tipType,
value: o.value, value: o.value,
allowClear: o.allowClear, allowClear: o.allowClear,
listeners: [ listeners: [

Write Preview
Loading…
Cancel
Save