单表体页面实际上也可以使用单表头的模式进行开发，但是为了发挥可编辑表格的便捷性，有些页面推荐使用这种方式进行开发。好处就是不需要切换到表单页面对数据进行修改。如下图所示：
同样省略前面的开发步骤。
7、Service开发
/**
* 产品，单表体
*
* @author xuqc
* @date 2013-10-17 下午02:36:03
*/
@Service
public class T208Service extends AbsToftServiceImpl {
private AggregatedValueObject billInfo;
public AggregatedValueObject getBillInfo() {
if(billInfo == null) {
billInfo = new HYBillVO();
VOTableVO vo = new VOTableVO();
vo.setAttributeValue(VOTableVO.BILLVO, HYBillVO.class.getName());
vo.setAttributeValue(VOTableVO.HEADITEMVO, ProductVO.class.getName());
vo.setAttributeValue(VOTableVO.PKFIELD, ProductVO.PK_PRODUCT);
billInfo.setParentVO(vo);
}
return billInfo;
}
}
8、Controller开发
/**
* 单表体
*
* @author xuqc
* @date 2013-10-17 下午02:55:09
*/
@Controller
@RequestMapping(value = "/busi/scene/t208")
public class T208Controller extends AbsToftController {
@Autowired
private T208Service t208Service;
@Override
public T208Service getService() {
return t208Service;
}
}
9、对应的jsp开发
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<%@ include file="/common/header.jsp"%>
</head>
<body>
<nw:Bill templetVO="${templetVO}" bodyGridsPagination="true" />
</body>
<script type="text/javascript">
//单表体档案，BodyToolbar已经默认增加了一些按钮，如果要自己增加一些按钮，那么继承该类
${moduleName}.appUiConfig.toolbar = new uft.jf.BodyToolbar();
var app = new uft.jf.ToftPanel(${moduleName}.appUiConfig);
/**
*表体编辑后事件
*@param e 事件对象，通过这个参数可以得到以下值：
*var record=e.record; 当前编辑的行对象
var row = e.row; 当前编辑的行号
var grid = e.grid; 当前编辑的表格
var column = grid.originalColumns[e.column];//当前编辑的列对象
var fieldName=e.field; 当前编辑的列的名称
var value=e.value; 当前编辑的单元格编辑后的值
var originalValue=e.originalValue; 当前编辑的单元格编辑前的值
*/
function afterEditBody(e){
alert(1);
if(e.field == 'categoryname'){
//uft.Utils.setColumnHidden('demo_product_detail',{'productprice':true});
}else if(e.field =='productprice'){
var grid = Ext.getCmp('demo_product_detail');
var editor = uft.Utils.getColumnEditor(grid,'vmemo');//vmemo列是一个下拉组件
editor.addExtendParams({p:1});
}
}
</script>
<%@ include file="/common/footer.jsp"%>
</html>
具体的示例可以参考：http://xuqc.fangwei.name:9080/demo-webapp administrator/143305