Frank
/
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 3 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. 63
      src/widget/multilayerselecttree/multilayerselecttree.combo.js
  2. 59
      src/widget/multilayerselecttree/multilayerselecttree.trigger.js
  3. 20
      src/widget/multilayersingletree/multilayersingletree.combo.js
  4. 57
      src/widget/multilayersingletree/multilayersingletree.trigger.js
  5. 1
      src/widget/singletree/singletree.trigger.js

63
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.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);
},

59
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);
}
}

20
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.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,
}
});
},

57
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);
}
}

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