caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #2678: DESIGN-4103 feat: 重写一下下拉树的布局 

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '0cb4d09199f00f770885c7328af8a281d2ec9da8':
  DESIGN-4103 feat: 重写一下下拉树的布局
es6
Dailer 2 years ago
parent
882817a6d4 0cb4d09199
commit
24fd6e16cb
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
Split 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,
allowSearchValue: false,
allowInsertValue: false,
isNeedAdjustWidth: true
isNeedAdjustWidth: true,
});
},
_init: function () {
var o = this.options;
if (this._shouldWrapper()) {
o.height -= 2;
BI.isNumeric(o.width) && (o.width -= 2);
}
BI.isNumeric(o.width) && (o.width -= 2);
BI.isNumeric(o.height) && (o.height -= 2);
BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
},
render: function () {
var self = this, o = this.options;
var combo = (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;
return (o.itemsCreator === BI.emptyFn) ? this._getSyncConfig() : this._getAsyncConfig();
},
_getBaseConfig: function () {
@ -122,7 +84,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
};
},
_getSearchConfig: function() {
_getSearchConfig: function () {
var self = this, o = this.options;
return {
el: {
@ -139,7 +101,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter,
watermark: o.watermark,
height: o.height - (o.simple ? 1 : 2),
// height: o.height - (o.simple ? 1 : 2),
height: o.height,
text: o.text,
value: o.value,
tipType: o.tipType,
@ -184,7 +147,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
// IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
// 卡顿不明显, 先在此做尝试, 并在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: [{
@ -198,7 +161,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW);
}
}]
}
};
},
_getSyncConfig: function () {
@ -207,13 +170,15 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : {
el: {
type: "bi.single_tree_trigger",
ref: function(_ref) {
ref: function (_ref) {
self.textTrigger = _ref;
},
text: o.text,
height: o.height,
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();
},
clear: function () {
// do some work
},
populate: function (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, {
props: function() {
props: function () {
return {
extraCls: "bi-multi-layer-select-tree-trigger",
height: 24,
@ -16,11 +16,12 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
render: function () {
var self = this, o = this.options;
if(o.itemsCreator === BI.emptyFn) {
if (o.itemsCreator === BI.emptyFn) {
this._initData();
}
var content = {
type: "bi.htape",
return {
type: "bi.horizontal_fill",
items: [
{
el: {
@ -86,7 +87,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
},
onSearch: function (obj, callback) {
var keyword = obj.keyword;
if(o.itemsCreator === BI.emptyFn) {
if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword);
} else {
@ -99,51 +100,37 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE);
}
}]
}
},
width: "fill",
}, {
el: {
type: "bi.layout",
width: 24
type: "bi.trigger_icon_button",
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;
this.tree = new BI.Tree();
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items));
this.tree.initTree(this.nodes);
},
_getSearchItems: function(keyword) {
_getSearchItems: function (keyword) {
var self = this, o = this.options;
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
var items = [];
this.tree.traverse(function (node) {
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);
return true;
}
@ -151,7 +138,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
return this._fillTreeStructure4Search(items, "id");
},
_createJson: function(node, open) {
_createJson: function (node, open) {
return {
id: node.id,
pId: node.pId,
@ -159,10 +146,10 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
value: node.value,
isParent: BI.isNotEmptyArray(node.children),
open: open
}
};
},
_getChildren: function(node) {
_getChildren: function (node) {
var self = this;
node.children = node.children || [];
var nodes = [];
@ -179,7 +166,7 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
var result = [];
var queue = [];
BI.each(leaves, function (idx, node) {
queue.push({pId: node.pId});
queue.push({ pId: node.pId });
result.push(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");
if (pNode != null) {
pNode.open = true;
queue.push({pId: pNode.pId});
queue.push({ pId: pNode.pId });
result.push(pNode);
}
}
@ -259,4 +246,4 @@ BI.MultiLayerSelectTreeTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START";
BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
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 () {
var o = this.options;
if (this._shouldWrapper()) {
o.height -= 2;
BI.isNumeric(o.width) && (o.width -= 2);
}
BI.isNumeric(o.width) && (o.width -= 2);
BI.isNumeric(o.height) && (o.height -= 2);
BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
},
render: function () {
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",
@ -125,7 +123,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
};
},
_getSearchConfig: function() {
_getSearchConfig: function () {
var self = this, o = this.options;
return {
el: {
@ -142,7 +140,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
items: o.items,
itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter,
height: o.height - (o.simple ? 1 : 2),
height: o.height,
text: o.text,
value: o.value,
tipType: o.tipType,
@ -186,7 +184,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
// IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
// 卡顿不明显, 先在此做尝试, 并在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: [{
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
@ -199,7 +197,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
}
}]
}
};
},
_getSyncConfig: function () {
@ -208,13 +206,15 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
return BI.extend(baseConfig, o.allowEdit ? this._getSearchConfig() : {
el: {
type: "bi.single_tree_trigger",
ref: function(_ref) {
ref: function (_ref) {
self.textTrigger = _ref;
},
text: o.text,
height: o.height,
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, {
props: function() {
props: function () {
return {
extraCls: "bi-multi-layer-single-tree-trigger",
height: 24,
@ -16,11 +16,12 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
render: function () {
var self = this, o = this.options;
if(o.itemsCreator === BI.emptyFn) {
if (o.itemsCreator === BI.emptyFn) {
this._initData();
}
var content = {
type: "bi.htape",
return {
type: "bi.horizontal_fill",
items: [
{
el: {
@ -86,7 +87,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
},
onSearch: function (obj, callback) {
var keyword = obj.keyword;
if(o.itemsCreator === BI.emptyFn) {
if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword);
} else {
@ -99,51 +100,37 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE);
}
}]
}
},
width: "fill",
}, {
el: {
type: "bi.layout",
width: 24
type: "bi.trigger_icon_button",
cls: "trigger-icon-button",
ref: function (_ref) {
self.triggerBtn = _ref;
},
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;
this.tree = new BI.Tree();
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items));
this.tree.initTree(this.nodes);
},
_getSearchItems: function(keyword) {
_getSearchItems: function (keyword) {
var self = this, o = this.options;
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
var items = [];
this.tree.traverse(function (node) {
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);
return true;
}
@ -151,7 +138,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
return this._fillTreeStructure4Search(items, "id");
},
_createJson: function(node, open) {
_createJson: function (node, open) {
return {
id: node.id,
pId: node.pId,
@ -159,10 +146,10 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
value: node.value,
isParent: BI.isNotEmptyArray(node.children),
open: open
}
};
},
_getChildren: function(node) {
_getChildren: function (node) {
var self = this;
node.children = node.children || [];
var nodes = [];
@ -179,7 +166,7 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
var result = [];
var queue = [];
BI.each(leaves, function (idx, node) {
queue.push({pId: node.pId});
queue.push({ pId: node.pId });
result.push(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");
if (pNode != null) {
pNode.open = true;
queue.push({pId: pNode.pId});
queue.push({ pId: pNode.pId });
result.push(pNode);
}
}
@ -260,4 +247,4 @@ BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START";
BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
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,
height: o.height,
warningTitle: o.warningTitle,
tipType: o.tipType,
value: o.value,
allowClear: o.allowClear,
listeners: [

Write Preview
Loading…
Cancel
Save