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

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

es6
zsmj 3 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. 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, 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 () {
@ -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);
}, },

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

20
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()) {
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",
@ -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,
} }
}); });
}, },

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

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