1

任何人都知道在 ZK 中显示带有所选项目的图像/图标的方法Combobox。例如，这个ZK Live Demo展示了如何Comboitem在下拉列表中的每一个上放置图像。但是，在此示例中选择一个项目，组合框会显示该项目的标签.. 但不显示图像。

4

2 回答 2

2

目前您需要自定义它（将所选项目的图像节点复制到组合框）您自己的简单示例：

<zk xmlns:w="client">
    <style>
        .z-combobox-inp,
        .z-combobox-rounded-inp {
            padding-left: 30px;
        }
    </style>
    <combobox>
        <attribute w:name="bind_"><![CDATA[
            function (a, b, c) {
                this.$bind_(a, b, c);
                // anchor used to position selected image
                var n = this.$n(),
                    ref = n.firstChild,
                    span = document.createElement('span');
                jq(span).css('position', 'relative')
                    .addClass('custom-selected-image-anchor');
                n.insertBefore(span, ref);
            }
        ]]></attribute>
        <attribute w:name="_hilite2"><![CDATA[
            function (sel, opts) {
                this.$_hilite2(sel, opts);
                if (opts && opts.sendOnSelect && sel) {
                    var $anchor = jq(this.$n()).find('.custom-selected-image-anchor');
                    $anchor.find('.custom-selected-image')
                        .each(function () {
                            this.parentNode.removeChild(this);
                        });
                    $anchor[0].appendChild(
                        jq(sel.getImageNode()).clone() // clone node
                            .css({'position': 'absolute', // add style
                                'left': '0px',
                                'top': '3px'}) // also add class
                            .addClass('custom-selected-image')[0]       
                    );
                }
            }
        ]]></attribute>
        <comboitem label="test" image="images/battery.gif" />
        <comboitem label="test 2" image="images/left_arrow.png" />
    </combobox>
</zk>
于 2013-06-24T01:21:52.917 回答
0

我不认为这是可能的...他们肯定会在文档中对此进行一些参考，如何在组合框选定的项目值上获取图像或其他内容...但是您是否尝试过论坛？他们肯定会帮助你！

于 2013-06-20T00:13:25.963 回答