如何在表单视图操作栏上配置一个自定义按钮?
李小翔
2014-05-17 11:50

内容列表

通过脚手架模板生成视图后，在show、edit视图中，会生成一个默认的操作栏，里面包含常见的编辑、保存、删除等操作，如：
<div class=”buttons”>
   <span class=”button”><g:actionSubmit class=”save” action=”update” value=”..” onclick=”..” /></span>
    ......
</div>
添加自定义的按钮，只需要：
· 	选择一个大小、风格一致的图标，放到 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 中已经定义了很多样式，也可以直接使用。
· 	如果按钮要提交给后台的action，可以在上面的操作栏 div 内添加 span 和 g:actionSubmit 标签（直接从脚手架生成的代码中复制一个），将 class 属性修改为1中新建的css类名、action 属性修改为后台action名，同时修改 value 属性为显示名（如“保存”）即可。
· 	如果提交给后台前要做一些表单验证之类的操作，可以编写 onclick 事件。
· 	如果按钮并不是要马上提交到后台，而是要执行一些js代码，则可以使用下面的代码来插入操作：
· 	<span class=”button”><input class=”preview” type=”button” onclick=”......” value=”测试按钮” ></span>
· 	BTW：可以通过 BroModeler 来给业务流程的表单配置自定义按钮并设置显示条件。