自我规范模版A要求1：展示所选对象详情弹出框

最新推荐文章于 2025-10-07 16:05:47 发布

最新推荐文章于 2025-10-07 16:05:47 发布 · 162 阅读

文章标签：

#zk

经验同时被 2 个专栏收录

16 篇文章

订阅专栏

3 篇文章

订阅专栏

本文档描述了一个用于展示所选对象详细信息的ZK弹窗组件的设计方案。该组件通过鼠标悬停显示文本详情，并针对特定字段如编号、名称、负责人等提供详细展示。此外，还特别注意了文本溢出的处理方式。

名称：

展示所选对象详情弹出框；

路径要求：

/pages/${entityClassName}/entity_detail.zul

页面要求：

1 由于没有选择的概念，而弹出框的主体是有选择条目的概念。故在主体页面有MouseOver的样式情况下，弹出框上面不准有MouseOver样式。（页面效果）

2 鼠标移上去有文本详情；（页面效果）

3 传入的对象名（key）必须为 item；（代码要求）

4 由创建对应实体对象的开发人员完成；（责任分工）

自我实现提示：

<zk>
<vlayout width="300px">
    <label value="${item.XXXXX}" style="font-size: 14px; font-weight: bold;" />
    <grid style="color:#00547A;">
    	<columns>
    		<column width="100px;"/>
    		<column />
    	</columns>
        <rows >
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                XXXXX编号:<br>                <label value="${item.XXXXX}" tooltiptext="${self.value }" maxlength="25"/><br>            </row>
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                XXXXX名称:<br>                <hbox >
                    <label value="${item.XXXXX}" tooltiptext="${self.value }" maxlength="25"/><br>                </hbox>
            </row>
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                负责人:
                <label value="${item.fzrId.userName}" tooltiptext="${self.value }" maxlength="25"/>
            </row>
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                介绍:
                <div style="overflow-x:auto; ">
                <html content="${item.labIntruction}" tooltiptext="${z:clearHtml(self.content,50)}" />
                </div>
            </row>
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                详细地址:
                 <label value="${item.labAddress}"  tooltiptext="${self.value }" maxlength="25"/>
            </row>
            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                联系电话:
                <label value="${item.labLianxi}"  tooltiptext="${self.value }" maxlength="25"/>
            </row>
        </rows>
    </grid>
</vlayout>
</zk>

其中值得注意的：

            <row zclass="X" style="padding: 5px 5px 5px 7px;">
                介绍:
                <div style="overflow-x:auto; ">
                <html content="${item.labIntruction}" tooltiptext="${z:clearHtml(self.content,50)}" />
                </div>
            </row>