From 291554ecb46300820be50fcfc7449c951e24c7f2 Mon Sep 17 00:00:00 2001 From: guy Date: Thu, 23 Jun 2022 18:20:31 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E9=80=89=E4=B8=AD=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widget/multiselect/loader.js | 244 +++++++++++++++++++ src/widget/multiselect/multiselect.loader.js | 63 ++--- 2 files changed, 262 insertions(+), 45 deletions(-) create mode 100644 src/widget/multiselect/loader.js diff --git a/src/widget/multiselect/loader.js b/src/widget/multiselect/loader.js new file mode 100644 index 000000000..7eddae550 --- /dev/null +++ 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); diff --git a/src/widget/multiselect/multiselect.loader.js b/src/widget/multiselect/multiselect.loader.js index 0b86f44d4..d344c09ae 100644 --- 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); }