欢迎进入Wiki » FAQ » 如何在表单视图操作栏上配置一个自定义按钮?

如何在表单视图操作栏上配置一个自定义按钮?

在2014-05-17 11:50上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

通过脚手架模板生成视图后,在show、edit视图中,会生成一个默认的操作栏,里面包含常见的编辑、保存、删除等操作,如:
<div class="buttons">
   <span class="button"><g:actionSubmit class="save" action="update" value=".." onclick=".." /></span>
    ......
</div>

添加自定义的按钮,只需要:

  1. 选择一个大小、风格一致的图标,放到 web-app/images 文件夹下,并在工程的 form.css 或 body.css 样式表文件中新建一个css类,如:
    .buttons input.save {
       background: transparent url(../images/icons/24x24/table_save.png) 5px 50% no-repeat;
    }

    此外,BroFramework的 buttons.css 和 buttons24.css 中已经定义了很多样式,也可以直接使用。
  2. 如果按钮要提交给后台的action,可以在上面的操作栏 div 内添加 span 和 g:actionSubmit 标签(直接从脚手架生成的代码中复制一个),将 class 属性修改为1中新建的css类名、action 属性修改为后台action名,同时修改 value 属性为显示名(如“保存”)即可。
    如果提交给后台前要做一些表单验证之类的操作,可以编写 onclick 事件。
  3. 如果按钮并不是要马上提交到后台,而是要执行一些js代码,则可以使用下面的代码来插入操作:
    <span class="button"><input class="preview" type="button" onclick="......" value="测试按钮" ></span>

BTW:可以通过 BroModeler 来给业务流程的表单配置自定义按钮并设置显示条件。

标签: BroFramework
在2014-05-17 11:50上被李小翔创建

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号