Browse Source

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

es6
zsmj 3 years ago
parent
commit
2b81ffd403
  1. 59
      src/widget/multilayerselecttree/multilayerselecttree.combo.js
  2. 39
      src/widget/multilayerselecttree/multilayerselecttree.trigger.js
  3. 16
      src/widget/multilayersingletree/multilayersingletree.combo.js
  4. 37
      src/widget/multilayersingletree/multilayersingletree.trigger.js
  5. 1
      src/widget/singletree/singletree.trigger.js

59
src/widget/multilayerselecttree/multilayerselecttree.combo.js

@ -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()) {
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); 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 () {
@ -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 () {
@ -213,7 +176,9 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
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);
}, },

39
src/widget/multilayerselecttree/multilayerselecttree.trigger.js

@ -19,8 +19,9 @@ BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
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: {
@ -99,35 +100,21 @@ 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 () {
@ -159,7 +146,7 @@ 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) {

16
src/widget/multilayersingletree/multilayersingletree.combo.js

@ -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()) {
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); 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",
@ -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 () {
@ -214,7 +212,9 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
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,
} }
}); });
}, },

37
src/widget/multilayersingletree/multilayersingletree.trigger.js

@ -19,8 +19,9 @@ BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
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: {
@ -99,35 +100,21 @@ 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 () {
@ -159,7 +146,7 @@ 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) {

1
src/widget/singletree/singletree.trigger.js

@ -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: [

Loading…
Cancel
Save