feature: 选中数据支持分页

3 years ago · 291554ecb4
2 changed files with 262 additions and 45 deletions
--- a/src/widget/multiselect/loader.js
+++ b/src/widget/multiselect/loader.js
@ -0,0 +1,244 @@
+/**
+ * 加载控件
+ *
+ * Created by GUY on 2015/8/31.
+ * @class BI.Loader
+ * @extends BI.Widget
+ */
+BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.MultiSelectInnerLoader.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-multi-select-inner-loader",
+
+            direction: "top",
+            isDefaultInit: true, // 是否默认初始化数据
+            logic: {
+                dynamic: true,
+                scrolly: true
+            },
+
+            // 下面是button_group的属性
+            el: {
+                type: "bi.button_group",
+                chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                behaviors: {
+                    redmark: function () {
+                        return true;
+                    }
+                },
+                layouts: [{
+                    type: "bi.vertical"
+                }]
+            },
+
+            items: [],
+            itemsCreator: BI.emptyFn,
+            onLoaded: BI.emptyFn,
+
+            // 下面是分页信息
+            count: false,
+            prev: false,
+            next: {},
+            hasPrev: BI.emptyFn,
+            hasNext: BI.emptyFn
+        });
+    },
+
+    _nextLoad: function () {
+        var self = this, o = this.options;
+        this.next.setLoading();
+        if (this.cachItems && this.cachItems.length > 0) {
+            this.next.setLoaded();
+            this.addItems(this.cachItems.slice(0, 10));
+            this.cachItems = this.cachItems.slice(10);
+            return;
+        }
+        o.itemsCreator.apply(this, [{times: ++this.times}, function () {
+            self.next.setLoaded();
+            self.addItems.apply(self, arguments);
+        }]);
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        if (o.itemsCreator === false) {
+            o.next = false;
+        }
+        this.button_group = BI.createWidget(o.el, {
+            type: "bi.button_group",
+            chooseType: 0,
+            items: o.items,
+            behaviors: {},
+            layouts: [{
+                type: "bi.vertical"
+            }],
+            value: o.value
+        });
+        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
+            if (type === BI.Events.CLICK) {
+                var node = self.cachGroup.getNodeByValue(value);
+                if (node) {
+                    node.setSelected(obj.isSelected());
+                }
+            }
+            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            if (type === BI.Events.CLICK) {
+                self.fireEvent(BI.Loader.EVENT_CHANGE, obj);
+            }
+        });
+
+        this.cachGroup = BI.createWidget(o.el, {
+            type: "bi.button_group",
+            root: true,
+            chooseType: 0,
+            items: o.items,
+            behaviors: {},
+            layouts: [{
+                type: "bi.vertical"
+            }],
+            value: o.value
+        });
+
+        if (o.next !== false) {
+            this.next = BI.createWidget(BI.extend({
+                type: "bi.loading_bar"
+            }, o.next));
+            this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
+                if (type === BI.Events.CLICK) {
+                    self._nextLoad();
+                }
+            });
+        }
+
+        BI.createWidget({
+            type: "bi.vertical",
+            element: this,
+            items: [this.button_group, this.next]
+        });
+
+        o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
+            o.isDefaultInit && BI.isEmpty(o.items) && this._populate();
+        }, this));
+    },
+
+    hasNext: function () {
+        var o = this.options;
+        if (BI.isNumber(o.count)) {
+            return this.count < o.count;
+        }
+        if (this.cachItems && this.cachItems.length > 0) {
+            return true;
+        }
+        return !!o.hasNext.apply(this, [{
+            times: this.times,
+            count: this.count
+        }]);
+    },
+
+    addItems: function (items) {
+        this.count += items.length;
+        if (BI.isObject(this.next)) {
+            if (this.hasNext()) {
+                this.options.items = this.options.items.concat(items);
+                this.next.setLoaded();
+            } else {
+                this.next.setEnd();
+            }
+        }
+        this.cachGroup.addItems.apply(this.cachGroup, arguments);
+        this.button_group.addItems.apply(this.button_group, arguments);
+    },
+
+    _populate: function (items) {
+        var self = this, o = this.options;
+        if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
+            o.itemsCreator.apply(this, [{times: 1}, function (items, keyword) {
+                if (arguments.length === 0) {
+                    throw new Error("参数不能为空");
+                }
+                self.populate.apply(self, arguments);
+                o.onLoaded();
+            }]);
+            return false;
+        }
+        this.options.items = (items || []).slice(0, 10);
+        this.times = 1;
+        this.count = 0;
+        this.count += items.length;
+        if (BI.isObject(this.next)) {
+            if (this.hasNext()) {
+                this.next.setLoaded();
+            } else {
+                this.next.invisible();
+            }
+        }
+        return true;
+    },
+
+    populate: function (items, keyword) {
+        if (this._populate.apply(this, arguments)) {
+            this.cachItems = [];
+            if (items.length > 10) {
+                this.cachItems = items.slice(10);
+            }
+            this.cachGroup.populate.call(this.cachGroup, items, keyword);
+            this.button_group.populate.call(this.button_group, items.slice(0, 10), keyword);
+        }
+    },
+
+    setNotSelectedValue: function () {
+        this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
+        this.cachGroup.setNotSelectedValue.apply(this.cachGroup, arguments);
+    },
+
+    getNotSelectedValue: function () {
+        return this.cachGroup.getNotSelectedValue();
+    },
+
+    setValue: function () {
+        this.cachGroup.setValue.apply(this.cachGroup, arguments);
+        this.button_group.setValue.apply(this.button_group, arguments);
+    },
+
+    getValue: function () {
+        return this.cachGroup.getValue.apply(this.cachGroup, arguments);
+    },
+
+    getAllButtons: function () {
+        return this.button_group.getAllButtons();
+    },
+
+    getAllLeaves: function () {
+        return this.button_group.getAllLeaves();
+    },
+
+    getSelectedButtons: function () {
+        return this.button_group.getSelectedButtons();
+    },
+
+    getNotSelectedButtons: function () {
+        return this.button_group.getNotSelectedButtons();
+    },
+
+    getIndexByValue: function (value) {
+        return this.button_group.getIndexByValue(value);
+    },
+
+    getNodeById: function (id) {
+        return this.button_group.getNodeById(id);
+    },
+
+    getNodeByValue: function (value) {
+        return this.button_group.getNodeByValue(value);
+    },
+
+    empty: function () {
+        this.button_group.empty();
+        this.cachGroup.empty();
+        BI.each([this.prev, this.next], function (i, ob) {
+            ob && ob.setVisible(false);
+        });
+    }
+});
+BI.MultiSelectInnerLoader.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.multi_select_inner_loader", BI.MultiSelectInnerLoader);
--- a/src/widget/multiselect/multiselect.loader.js
+++ b/src/widget/multiselect/multiselect.loader.js
@ -18,7 +18,7 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
            valueFormatter: BI.emptyFn,
            itemsCreator: BI.emptyFn,
            onLoaded: BI.emptyFn,
-            itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT
+            itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
        });
    },

@ -43,43 +43,28 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
            el: BI.extend({
                onLoaded: opts.onLoaded,
                el: {
-                    type: "bi.loader",
-                    isDefaultInit: false,
-                    logic: {
-                        dynamic: true,
-                        scrolly: true
-                    },
-                    el: {
-                        chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
-                        behaviors: {
-                            redmark: function () {
-                                return true;
-                            }
-                        },
-                        layouts: [{
-                            type: "bi.vertical"
-                        }]
-                    }
+                    type: "bi.multi_select_inner_loader",
                }
            }, opts.el),
            itemsCreator: function (op, callback) {
                var startValue = self._startValue;
-                var firstItems = [];
                self.storeValue && (op = BI.extend(op || {}, {
                    selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi
                        ? self.storeValue.value.concat(startValue) : self.storeValue.value
                }));
-                if (self.storeValue) {
-                    var json = BI.map(self.storeValue.value.slice((op.times - 1) * 100, op.times * 100), function (i, v) {
-                        var txt = opts.valueFormatter(v) || v;
-                        return {
-                            text: txt,
-                            value: v,
-                            title: txt,
-                            selected: self.storeValue.type === BI.Selection.Multi
-                        };
-                    });
-                    if (op.times === 1) {
+                opts.itemsCreator(op, function (ob) {
+                    hasNext = ob.hasNext;
+                    var firstItems = [];
+                    if (op.times === 1 && self.storeValue) {
+                        var json = BI.map(self.storeValue.value, function (i, v) {
+                            var txt = opts.valueFormatter(v) || v;
+                            return {
+                                text: txt,
+                                value: v,
+                                title: txt,
+                                selected: self.storeValue.type === BI.Selection.Multi
+                            };
+                        });
                        if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) {
                            var txt = opts.valueFormatter(startValue) || startValue;
                            json.unshift({
@ -89,22 +74,10 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
                                selected: true
                            });
                        }
+                        firstItems = self._createItems(json);
                    }
-                    if (op.times < Math.floor((self.storeValue.value.length - 1) / 100)) {
-                        hasNext = true;
-                        callback(self._createItems(json), op.keyword || "");
-                        (op.times === 1) && self._scrollToTop();
-                        return;
-                    }
-                    firstItems = self._createItems(json);
-                }
-                var times = op.times - Math.max(0, Math.floor((self.storeValue.value.length - 1) / 100));
-                opts.itemsCreator(BI.extend({}, op, {
-                    times: times
-                }), function (ob) {
-                    hasNext = ob.hasNext;
-                    callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || op.keyword || "");
-                    if (times === 1 && self.storeValue) {
+                    callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
+                    if (op.times === 1 && self.storeValue) {
                        BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue));
                        self.setValue(self.storeValue);
                    }