自定义列表

需求来源

开发者咨询一个可删除的列表怎么实现

思路

实际上这是个自定义组件和button_group灵活使用的案例

节点实现

很明显可以看出节点是由文字,复选框,删除按钮构成的,那么布局组件就可以考虑使用 htape布局, 删除按钮和复选框宽度固定,文字占满剩余空间

这里需要注意,因为继承了BasicButton,所以整个节点都会触发按钮被选中,因此点击删除按钮,也会导致节点被选中.因此要设置 stopPropagation: true 阻止事件冒泡

删除按钮被点击,如何通知到外部呢?这就应用到了fineui的事件机制,示例中对外发送了一个 EVENT_DELETE 事件. 当然如果Fix数据流使用的熟练的同学也可以通过context机制来处理,在此不多描述.

!(function () {

    var Item = BI.inherit(BI.BasicButton, {

        props: {
            baseCls: "my-cls",
            text: "",
            height: 24
        },

        render: function () {
            var self = this, o = this.options;
            return {
                type: "bi.htape",
                items: [
                    {
                        type: "bi.label",
                        text: o.text,
                        textAlign: "left"
                    }, {
                        el: {
                            type: "bi.checkbox",
                            ref: function (_ref) {
                                self.checkbox = _ref;
                            },
                            height: 24
                        },
                        width: 24
                    }, {
                        el: {
                            type: "bi.icon_button",
                            cls: "delete-node-font",
                            stopPropagation: true,
                            handler: function () {
                                self.fireEvent("EVENT_DELETE", o.value);
                            }
                        },
                        width: 24
                    }
                ]
            };
        },

		// 注意这个方法,button_group的items需要实现setSelected,isSelected,getValue等方法,因为此组件继承的是BasicButton,所以大部分方法父类都有实现,但是我们的列表需要点击节点区域后复选框也能随之勾选,因此需要重写一下setSelected方法
        setSelected: function (b) {
            Item.superclass.setSelected.apply(this, arguments);
            this.checkbox.setSelected(b);
        }
    });

    BI.shortcut("dec.demo.item", Item);
}());

列表实现

采用button_group来控制多选逻辑.

List组件在包装items的时候为节点组件EVENT_DELETE事件监听,也就是上边讲的删除按钮事件

添加节点和删除节点都通过简单的populate来实现.

同时监听button_group的事件来保存节点选中状态

!(function () {

    var List = BI.inherit(BI.Widget, {

        props: {
            baseCls: "dec-frame-body",
            items: [{
                text: "1",
                value: 1
            }, {
                text: "2",
                value: 2
            }]
        },

        render: function () {
            var self = this, o = this.options;

            return {
                type: "bi.vertical",
                items: [
                    {
                        el: {
                            type: "bi.button",
                            text: "添加一个",
                            handler: function () {
                                self._addOne();
                            }
                        }
                    }, {
                        el: {
                            type: "bi.button_group",
                            ref: function (_ref) {
                                self.list = _ref;
                            },
                            layouts: [
                                {
                                    type: "bi.vertical"
                                }
                            ],
                            chooseType: BI.Selection.Single,
                            scrolly: true,
                            items: this._formatItems(o.items),
							listeners: [
    							{
        							eventName: "EVENT_CHANGE",
        							action: function () {
            							self._handleSelect();
        							}
    							}
							]
						}
                    }
                ]
            };
        },

        _addOne: function () {
            this.options.items.push({
                text: BI.UUID(),
                value: BI.UUID()
            });
            this.populate(this.options.items);
        },

        _deleteOne: function (value) {
            this.options.items = BI.filter(this.options.items, function (index, item) {
                return item.value !== value;
            });
            this.populate(this.options.items);
        },

		_handleSelect: function () {
		    var selectedValues = this.getValue();
    		BI.each(this.options.items, function (index, item) {
        		item.selected = BI.contains(selectedValues, item.value);
    		});
		},

		_formatItems: function (items) {
            var self = this;
            return BI.map(items, function (index, item) {
                return BI.extend({
                    type: "dec.demo.item",
                    listeners: [
                        {
                            eventName: "EVENT_DELETE",
                            action: function (value) {
                                self._deleteOne(value);
                            }
                        }
                    ]
                }, item);
            });
        },

        getValue: function () {
            return this.list.getValue();
        },

        populate: function (items) {
            this.list.populate(this._formatItems(items));
        }
    });

    BI.shortcut("dec.demo", List);
}());

效果示例

Page tree

自定义列表

需求来源

思路

节点实现

列表实现