KERNEL-702 feat: 两个单选下拉树支持异步加载搜索

src/base/combination/loader.js

@@ -78,7 +78,8 @@ BI.Loader = BI.inherit(BI.Widget, {
             behaviors: {},
             layouts: [{
                 type: "bi.vertical"
-            }]
+            }],
+            value: o.value
         });
         this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);

src/case/button/node/node.plus.js

@@ -33,6 +33,7 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
             hgap: o.hgap,
             text: o.text,
             value: o.value,
+            keyword: o.keyword,
             py: o.py
         });
         this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) {

src/widget/multilayerselecttree/multilayerselecttree.combo.js

@@ -6,72 +6,158 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
 
     _defaultConfig: function () {
         return BI.extend(BI.MultiLayerSelectTreeCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-multilayer_select_tree-combo",
+            baseCls: "bi-multilayer-select-tree-combo",
             isDefaultInit: false,
             height: 24,
             text: "",
+            itemsCreator: BI.emptyFn,
             items: [],
             value: "",
             attributes: {
                 tabIndex: 0
-            }
+            },
+            allowEdit: false
         });
     },
 
-    _init: function () {
-        BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
 
-        this.trigger = BI.createWidget({
-            type: "bi.single_tree_trigger",
-            text: o.text,
-            height: o.height,
-            items: o.items,
-            value: o.value
-        });
+        var isSync = o.itemsCreator === BI.emptyFn;
 
-        this.popup = BI.createWidget({
-            type: "bi.multilayer_select_tree_popup",
-            isDefaultInit: o.isDefaultInit,
-            items: o.items,
-            value: o.value
-        });
+        var combo = isSync ? this._getSyncConfig() : this._getAsyncConfig();
+
+        return !o.allowEdit && isSync ? 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
+            }]
+        };
+    },
 
-        this.combo = BI.createWidget({
+    _getBaseConfig: function () {
+        var self = this, o = this.options;
+        return {
             type: "bi.combo",
             container: o.container,
-            element: this,
             adjustLength: 2,
-            el: this.trigger,
+            ref: function (_ref) {
+                self.combo = _ref;
+            },
             popup: {
-                el: this.popup
+                el: {
+                    type: "bi.multilayer_select_tree_popup",
+                    isDefaultInit: o.isDefaultInit,
+                    itemsCreator: o.itemsCreator,
+                    items: o.items,
+                    ref: function (_ref) {
+                        self.trigger && self.trigger.getSearcher().setAdapter(_ref);
+                    },
+                    listeners: [{
+                        eventName: BI.MultiLayerSelectTreePopup.EVENT_CHANGE,
+                        action: function () {
+                            self.setValue(this.getValue());
+                            self.combo.hideView();
+                            self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE);
+                        }
+                    }]
+                },
+                value: o.value,
+                minHeight: 400
             }
-        });
+        };
+    },
 
-        this.combo.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-        });
+    _getSyncConfig: function () {
+        var o = this.options;
+        var baseConfig = this._getBaseConfig();
+        baseConfig.el = {
+            type: "bi.single_tree_trigger",
+            text: o.text,
+            height: o.height,
+            items: o.items,
+            value: o.value
+        };
+        return baseConfig;
+    },
 
-        this.popup.on(BI.MultiLayerSelectTreePopup.EVENT_CHANGE, function () {
-            self.setValue(self.popup.getValue());
-            self.combo.hideView();
-            self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE);
+    _getAsyncConfig: function () {
+        var self = this, o = this.options;
+        var config = this._getBaseConfig();
+        return BI.extend(config, {
+            el: {
+                type: "bi.multilayer_select_tree_trigger",
+                allowEdit: o.allowEdit,
+                cls: "multilayer-select-tree-trigger",
+                ref: function (_ref) {
+                    self.trigger = _ref;
+                },
+                items: o.items,
+                itemsCreator: o.itemsCreator,
+                height: o.height - 2,
+                text: o.text,
+                value: o.value,
+                tipType: o.tipType,
+                warningTitle: o.warningTitle,
+                title: o.title,
+                listeners: [{
+                    eventName: BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE,
+                    action: function () {
+                        self.setValue(this.getValue());
+                        self.combo.hideView();
+                        self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE);
+                    }
+                }]
+            },
+            hideChecker: function (e) {
+                return self.triggerBtn.element.find(e.target).length === 0;
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
+                    self.trigger.stopEditing();
+                }
+            }]
         });
     },
 
     setValue: function (v) {
         v = BI.isArray(v) ? v : [v];
-        this.trigger.setValue(v);
-        this.popup.setValue(v);
+        this.combo.setValue(v);
     },
 
     getValue: function () {
-        return this.popup.getValue();
+        return this.combo.getValue();
     },
 
     populate: function (items) {
         this.combo.populate(items);
     }
 });
+
 BI.MultiLayerSelectTreeCombo.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.multilayer_select_tree_combo", BI.MultiLayerSelectTreeCombo);

src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@@ -11,6 +11,7 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
             isDefaultInit: false,
             items: [],
             itemsCreator: BI.emptyFn,
+            keywordGetter: BI.emptyFn,
             value: "",
             scrollable: true
         });
@@ -23,13 +24,15 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
     },
 
     _formatItems: function (nodes, layer, pNode) {
-        var self = this;
+        var self = this, o = this.options;
+        var keyword = o.keywordGetter();
         BI.each(nodes, function (i, node) {
             var extend = {};
             node.layer = layer;
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }
+            node.keyword = keyword;
             extend.pNode = pNode;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
                 extend.type = "bi.multilayer_select_tree_mid_plus_group_node";
@@ -68,6 +71,7 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
     // 构造树结构，
     initTree: function (nodes) {
         var self = this, o = this.options;
+        var hasNext = false;
         this.empty();
         this._assertId(nodes);
         this.tree = BI.createWidget({
@@ -83,15 +87,28 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
             },
 
             items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0),
-            itemsCreator: o.itemsCreator,
+            itemsCreator: function (op, callback) {
+                o.itemsCreator(op, function (ob) {
+                    hasNext = ob.hasNext;
+                    callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node));
+                });
+            },
             value: o.value,
 
             el: {
-                type: "bi.button_tree",
-                chooseType: BI.Selection.Single,
-                layouts: [{
-                    type: "bi.vertical"
-                }]
+                type: "bi.loader",
+                isDefaultInit: true,
+                chooseType: o.chooseType,
+                el: {
+                    type: "bi.button_tree",
+                    behaviors: o.behaviors,
+                    layouts: [{
+                        type: "bi.vertical"
+                    }]
+                },
+                hasNext: function () {
+                    return hasNext;
+                }
             }
         });
         this.tree.on(BI.Controller.EVENT_CHANGE, function (type) {
@@ -110,7 +127,7 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
     },
 
     populate: function (nodes) {
-        this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0));
+        BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0));
     },
 
     setValue: function (v) {

src/widget/multilayerselecttree/multilayerselecttree.popup.js

@@ -27,8 +27,20 @@ BI.MultiLayerSelectTreePopup = BI.inherit(BI.Pane, {
             type: "bi.multilayer_select_level_tree",
             isDefaultInit: o.isDefaultInit,
             items: o.items,
+            itemsCreator: function (op, callback) {
+                (op.times === 1 && !op.node) && BI.nextTick(function () {
+                    self.loading();
+                });
+                o.itemsCreator(op, function (ob) {
+                    BI.MultiLayerSelectTreePopup.superclass.populate.apply(self, [ob.items]);
+                    callback(ob);
+                    (op.times === 1 && !op.node) && BI.nextTick(function () {
+                        self.loaded();
+                    });
+                });
+            },
+            keywordGetter: o.keywordGetter,
             value: o.value,
-            itemsCreator: o.itemsCreator,
             scrollable: null
         });
 

src/widget/multilayerselecttree/multilayerselecttree.trigger.js

@@ -0,0 +1,127 @@
+/**
+ * Created by Windy on 2018/2/2.
+ */
+BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, {
+
+    props: {
+        extraCls: "bi-multi-layer-select-tree-trigger bi-border bi-focus-shadow",
+        height: 24,
+        valueFormatter: function (v) {
+            return v;
+        },
+        itemsCreator: BI.emptyFn
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        var content = {
+            type: "bi.htape",
+            items: [
+                {
+                    el: {
+                        type: "bi.searcher",
+                        ref: function () {
+                            self.searcher = this;
+                        },
+                        isAutoSearch: false,
+                        el: {
+                            type: "bi.state_editor",
+                            ref: function () {
+                                self.editor = this;
+                            },
+                            text: this._digest(o.value),
+                            value: o.value,
+                            height: o.height,
+                            tipText: ""
+                        },
+                        popup: {
+                            type: "bi.multilayer_select_tree_popup",
+                            itemsCreator: function (op, callback) {
+                                op.keyword = self.editor.getValue();
+                                o.itemsCreator(op, callback);
+                            },
+                            keywordGetter: function () {
+                                return self.editor.getValue();
+                            },
+                            cls: "bi-card"
+                        },
+                        onSearch: function (obj, callback) {
+                            var keyword = obj.keyword;
+                            if(o.itemsCreator === BI.emptyFn) {
+                                var finding = BI.Func.getSearchResult(o.items, keyword);
+                                var matched = finding.match, find = finding.find;
+                                callback(find.concat(matched));
+                            } else {
+                                callback();
+                            }
+                        },
+                        listeners: [{
+                            eventName: BI.Searcher.EVENT_CHANGE,
+                            action: function () {
+                                self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE);
+                            }
+                        }]
+                    }
+                }, {
+                    el: {
+                        type: "bi.layout",
+                        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
+            }]
+        };
+    },
+
+    _digest: function (v) {
+        var o = this.options;
+        if (!BI.isKey(v)) {
+            return o.valueFormatter(BI.isFunction(o.text) ? o.text() : o.text);
+        }
+        return o.valueFormatter(v);
+    },
+
+    stopEditing: function () {
+        this.searcher.stopSearch();
+    },
+
+    getSearcher: function () {
+        return this.searcher;
+    },
+
+    populate: function (items) {
+        this.options.items = items;
+    },
+
+    setValue: function (v) {
+        this.editor.setState(this._digest(v[0]));
+    },
+
+    getValue: function () {
+        return this.searcher.getValue();
+    }
+});
+BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
+BI.MultiLayerSelectTreeTrigger.EVENT_STOP = "EVENT_STOP";
+BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START";
+BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.multilayer_select_tree_trigger", BI.MultiLayerSelectTreeTrigger);

src/widget/multilayersingletree/multilayersingletree.combo.js

@@ -18,60 +18,143 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
             value: "",
             attributes: {
                 tabIndex: 0
-            }
+            },
+            allowEdit: false
         });
     },
 
-    _init: function () {
-        BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
 
-        this.trigger = BI.createWidget({
-            type: "bi.single_tree_trigger",
-            text: o.text,
-            height: o.height,
-            items: o.items,
-            value: o.value
-        });
+        var isSync = o.itemsCreator === BI.emptyFn;
 
-        this.popup = BI.createWidget({
-            type: "bi.multilayer_single_tree_popup",
-            isDefaultInit: o.isDefaultInit,
-            itemsCreator: o.itemsCreator,
-            items: o.items,
-            value: o.value
-        });
+        var combo = isSync ? this._getSyncConfig() : this._getAsyncConfig();
+
+        return !o.allowEdit && isSync ? 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
+            }]
+        };
+    },
 
-        this.combo = BI.createWidget({
+    _getBaseConfig: function () {
+        var self = this, o = this.options;
+        return {
             type: "bi.combo",
             container: o.container,
-            element: this,
             adjustLength: 2,
-            el: this.trigger,
+            ref: function (_ref) {
+                self.combo = _ref;
+            },
             popup: {
-                el: this.popup
+                el: {
+                    type: "bi.multilayer_single_tree_popup",
+                    isDefaultInit: o.isDefaultInit,
+                    itemsCreator: o.itemsCreator,
+                    items: o.items,
+                    ref: function (_ref) {
+                        self.trigger && self.trigger.getSearcher().setAdapter(_ref);
+                    },
+                    listeners: [{
+                        eventName: BI.MultiLayerSingleTreePopup.EVENT_CHANGE,
+                        action: function () {
+                            self.setValue(this.getValue());
+                            self.combo.hideView();
+                            self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
+                        }
+                    }]
+                },
+                value: o.value,
+                minHeight: 400
             }
-        });
+        };
+    },
 
-        this.combo.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-        });
+    _getSyncConfig: function () {
+        var o = this.options;
+        var baseConfig = this._getBaseConfig();
+        baseConfig.el = {
+            type: "bi.single_tree_trigger",
+            text: o.text,
+            height: o.height,
+            items: o.items,
+            value: o.value
+        };
+        return baseConfig;
+    },
 
-        this.popup.on(BI.MultiLayerSingleTreePopup.EVENT_CHANGE, function () {
-            self.setValue(self.popup.getValue());
-            self.combo.hideView();
-            self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
+    _getAsyncConfig: function () {
+        var self = this, o = this.options;
+        var config = this._getBaseConfig();
+        return BI.extend(config, {
+            el: {
+                type: "bi.multilayer_single_tree_trigger",
+                allowEdit: o.allowEdit,
+                cls: "multilayer-single-tree-trigger",
+                ref: function (_ref) {
+                    self.trigger = _ref;
+                },
+                items: o.items,
+                itemsCreator: o.itemsCreator,
+                height: o.height - 2,
+                text: o.text,
+                value: o.value,
+                tipType: o.tipType,
+                warningTitle: o.warningTitle,
+                title: o.title,
+                listeners: [{
+                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE,
+                    action: function () {
+                        self.setValue(this.getValue());
+                        self.combo.hideView();
+                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
+                    }
+                }]
+            },
+            hideChecker: function (e) {
+                return self.triggerBtn.element.find(e.target).length === 0;
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
+                    self.trigger.stopEditing();
+                }
+            }]
         });
     },
 
     setValue: function (v) {
         v = BI.isArray(v) ? v : [v];
-        this.trigger.setValue(v);
-        this.popup.setValue(v);
+        this.combo.setValue(v);
     },
 
     getValue: function () {
-        return this.popup.getValue();
+        return this.combo.getValue();
     },
 
     populate: function (items) {

src/widget/multilayersingletree/multilayersingletree.leveltree.js

@@ -11,6 +11,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
             isDefaultInit: false,
             items: [],
             itemsCreator: BI.emptyFn,
+            keywordGetter: BI.emptyFn,
             chooseType: BI.Selection.Single,
             scrollable: true
         });
@@ -23,13 +24,15 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
     },
 
     _formatItems: function (nodes, layer, pNode) {
-        var self = this;
+        var self = this, o = this.options;
+        var keyword = o.keywordGetter();
         BI.each(nodes, function (i, node) {
             var extend = {};
             node.layer = layer;
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }
+            node.keyword = keyword;
             extend.pNode = pNode;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
                 extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
@@ -48,7 +51,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
             } else {
                 extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
                 if (i === 0 && !pNode) {
-                    extend.type = "bi.multilayer_single_tree_first_tree_leaf_item"
+                    extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
                 }
                 if (i === nodes.length - 1) {
                     extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
@@ -68,6 +71,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
     // 构造树结构，
     initTree: function (nodes) {
         var self = this, o = this.options;
+        var hasNext = false;
         this.empty();
         this._assertId(nodes);
         this.tree = BI.createWidget({
@@ -84,17 +88,26 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
             items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0),
             value: o.value,
             itemsCreator: function (op, callback) {
-                o.itemsCreator(op, function (items) {
-                    callback(BI.Tree.transformToTreeFormat(items), 0);
+                o.itemsCreator(op, function (ob) {
+                    hasNext = ob.hasNext;
+                    callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node));
                 });
             },
 
             el: {
-                type: "bi.button_tree",
+                type: "bi.loader",
+                isDefaultInit: true,
                 chooseType: o.chooseType,
-                layouts: [{
-                    type: "bi.vertical"
-                }]
+                el: {
+                    type: "bi.button_tree",
+                    behaviors: o.behaviors,
+                    layouts: [{
+                        type: "bi.vertical"
+                    }]
+                },
+                hasNext: function () {
+                    return hasNext;
+                }
             }
         });
         this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) {
@@ -113,7 +126,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
     },
 
     populate: function (nodes) {
-        this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0));
+        BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0));
     },
 
     setValue: function (v) {

src/widget/multilayersingletree/multilayersingletree.popup.js

@@ -26,7 +26,19 @@ BI.MultiLayerSingleTreePopup = BI.inherit(BI.Pane, {
             type: "bi.multilayer_single_level_tree",
             isDefaultInit: o.isDefaultInit,
             items: o.items,
-            itemsCreator: o.itemsCreator,
+            itemsCreator: function (op, callback) {
+                (op.times === 1 && !op.node) && BI.nextTick(function () {
+                    self.loading();
+                });
+                o.itemsCreator(op, function (ob) {
+                    BI.MultiLayerSingleTreePopup.superclass.populate.apply(self, [ob.items]);
+                    callback(ob);
+                    (op.times === 1 && !op.node) && BI.nextTick(function () {
+                        self.loaded();
+                    });
+                });
+            },
+            keywordGetter: o.keywordGetter,
             value: o.value,
             scrollable: null
         });

src/widget/multilayersingletree/multilayersingletree.trigger.js

@@ -0,0 +1,127 @@
+/**
+ * Created by Windy on 2018/2/2.
+ */
+BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, {
+
+    props: {
+        extraCls: "bi-multi-layer-single-tree-trigger bi-border bi-focus-shadow",
+        height: 24,
+        valueFormatter: function (v) {
+            return v;
+        },
+        itemsCreator: BI.emptyFn
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        var content = {
+            type: "bi.htape",
+            items: [
+                {
+                    el: {
+                        type: "bi.searcher",
+                        ref: function () {
+                            self.searcher = this;
+                        },
+                        isAutoSearch: false,
+                        el: {
+                            type: "bi.state_editor",
+                            ref: function () {
+                                self.editor = this;
+                            },
+                            text: this._digest(o.value),
+                            value: o.value,
+                            height: o.height,
+                            tipText: ""
+                        },
+                        popup: {
+                            type: "bi.multilayer_single_tree_popup",
+                            itemsCreator: function (op, callback) {
+                                op.keyword = self.editor.getValue();
+                                o.itemsCreator(op, callback);
+                            },
+                            keywordGetter: function () {
+                                return self.editor.getValue();
+                            },
+                            cls: "bi-card"
+                        },
+                        onSearch: function (obj, callback) {
+                            var keyword = obj.keyword;
+                            if(o.itemsCreator === BI.emptyFn) {
+                                var finding = BI.Func.getSearchResult(o.items, keyword);
+                                var matched = finding.match, find = finding.find;
+                                callback(find.concat(matched));
+                            } else {
+                                callback();
+                            }
+                        },
+                        listeners: [{
+                            eventName: BI.Searcher.EVENT_CHANGE,
+                            action: function () {
+                                self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE);
+                            }
+                        }]
+                    }
+                }, {
+                    el: {
+                        type: "bi.layout",
+                        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
+            }]
+        };
+    },
+
+    _digest: function (v) {
+        var o = this.options;
+        if (!BI.isKey(v)) {
+            return o.valueFormatter(BI.isFunction(o.text) ? o.text() : o.text);
+        }
+        return o.valueFormatter(v);
+    },
+
+    stopEditing: function () {
+        this.searcher.stopSearch();
+    },
+
+    getSearcher: function () {
+        return this.searcher;
+    },
+
+    populate: function (items) {
+        this.options.items = items;
+    },
+
+    setValue: function (v) {
+        this.editor.setState(this._digest(v[0]));
+    },
+
+    getValue: function () {
+        return this.searcher.getValue();
+    }
+});
+BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
+BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP";
+BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START";
+BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger);