表头和表体页面包括两种，单子表和多子表，即1对1和1对多。这里先介绍单表体页面。这也是单据业务中经常遇到的一种页面。如图所示：
省略前面的开发步骤。
7、Service开发
/**
* 产品，表头和表体（单表体）
*
* @author xuqc
* @date 2013-10-17 下午02:44:40
*/
@Service
public class T210Service extends AbsBillServiceImpl {
public String getBillType() {
return "PROD";
}
private AggregatedValueObject billInfo;
public AggregatedValueObject getBillInfo() {
if(billInfo == null) {
billInfo = new ExAggProductVO();
VOTableVO vo = new VOTableVO();
// 由于是档案型，所以这里手工创建billInfo
vo.setAttributeValue(VOTableVO.BILLVO, ExAggProductVO.class.getName());
vo.setAttributeValue(VOTableVO.HEADITEMVO, ProductVO.class.getName());
vo.setAttributeValue(VOTableVO.PKFIELD, ProductVO.PK_PRODUCT);
billInfo.setParentVO(vo);
VOTableVO childVO = new VOTableVO();
childVO.setAttributeValue(VOTableVO.BILLVO, ExAggProductVO.class.getName());
childVO.setAttributeValue(VOTableVO.HEADITEMVO, ProductDetailVO.class.getName());
childVO.setAttributeValue(VOTableVO.PKFIELD, ProductVO.PK_PRODUCT);
childVO.setAttributeValue(VOTableVO.ITEMCODE, "demo_product_detail");
childVO.setAttributeValue(VOTableVO.VOTABLE, "demo_product_detail");
CircularlyAccessibleValueObject[] childrenVO = { childVO };
billInfo.setChildrenVO(childrenVO);
}
return billInfo;
}
}
8、Controller开发
/**
* 主子表，单子表
*
* @author xuqc
* @date 2013-10-17 下午02:55:09
*/
@Controller
@RequestMapping(value = "/busi/scene/t210")
public class T210Controller extends AbsBillController {
@Autowired
private T210Service t210Service;
@Override
public T210Service getService() {
return t210Service;
}
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ include file="/common/header.jsp"%>
<script>
function yellowRenderer(value,meta,record){
meta.style+='background-color: #FFF000;';
}
function redRenderer(value,meta,record){
meta.style+='background-color: #EE0000;';
}
</script>
</head>
<body>
<!-- 加入这个注释避免当body没有html内容时，在ie下出现空白行 -->
<nw:Bill templetVO="${templetVO}" headerGridImmediatelyLoad="true" isBuildHeaderGrid="true"
bodyGridsPagination="true,false" bodyGridsBufferView="true,false" headerGridCheckboxSelectionModel="true" headerGridSingleSelect="false" />
</body>
<script type="text/javascript">
//包括左树、表头、表体的档案
var itemTree = new uft.extend.tree.Tree({
id : 'itemTree',
treeRootNodeText:'产品分类', //默认根节点名称
rootVisible : true,//是否显示根节点
dataUrl : 'getItemTree.json', //默认数据来源
isTreeFilter:true//是否在树的工具栏加上过滤框
});
${moduleName}.appUiConfig.leftTree=itemTree;
${moduleName}.appUiConfig.treePkField='pk_category';
//扩展表头的工具栏，如果是单据页面，那么这里继承uft.jf.BillToolbar
MyToolbar = Ext.extend(uft.jf.ToftToolbar, {
getBtnArray : function(){
var btns = new Array();
btns.push(this.btn_query);
btns.push(this.btn_add);
btns.push(this.btn_copy);
btns.push(this.btn_edit);
btns.push(this.btn_save);
btns.push(this.btn_can);
btns.push(this.btn_del);
btns.push(this.btn_ref);
btns.push(this.btn_list);
btns.push(this.btn_card);
btns.push(this.btn_prev);
btns.push(this.btn_next);
btns.push(this.btn_filemanage);
btns.push(this.btn_filemanage_pic);
btns.push(this.btn_print);
btns.push(this.btn_export);
return btns;
}
});
//扩展表体的工具栏
MyBodyAssistToolbar = Ext.extend(uft.jf.BodyAssistToolbar,{
btn_row_add_handler : function(){
MyBodyAssistToolbar.superclass.btn_row_add_handler.call(this);
//点击增行时，默认增加100行
var grid = this.getActiveBodyGrid(),datas = [];
for(var i=0;i<100;i++){
var rowDefaultValues = this.getRowDefaultValues(grid.id);
datas.push(rowDefaultValues);
}
grid.addRow(datas);
grid.getStore().totalLength=grid.getStore().getTotalCount()+100;
grid.updateInfo();
}
});
${moduleName}.appUiConfig.bodyAssistToolbar=new MyBodyAssistToolbar();
${moduleName}.appUiConfig.toolbar = new MyToolbar();
//如果是单据页面，那么这里是
// var app = new uft.jf.BillPanel(${moduleName}.appUiConfig);
var app = new uft.jf.ToftPanel(${moduleName}.appUiConfig);
/**
* 表头编辑后事件
*
*@param field 编辑的组件对象
*@param value 编辑后的值
*@param oriValue 编辑前的值
*/
function afterEditHead(field,value,oriValue){
if(field.id = 'vbillno'){
//uft.Utils.setColumnHidden('demo_product_detail',{'productprice':true});
}
}
/**
*表体编辑后事件
*@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){
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});
}
}
/**
*表体编辑前事件
*@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 beforeEditBody(e){
//有时候要根据权限去确定用户能不能编辑该单元格，如果不让用户编辑，那么这个方法要返回false
}
</script>
<%@ include file="/common/footer.jsp"%>
</html>
具体的示例可以参考：http://xuqc.fangwei.name:9080/demo-webapp administrator/143305