表头和表体页面包括两种，单子表和多子表，即1对1和1对多。这里先介绍单表体页面。这也是单据业务中经常遇到的一种页面。如图所示：
省略前面的开发步骤。
7、Service开发
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 |
/** * 产品，表头和表体（单表体） * * @author xuqc * @date 2013-10-17 下午02:44:40 */@Servicepublic 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开发
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
/** * 主子表，单子表 * * @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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130 |
<!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
NW开发教程系列五：表头和表体（单表体）,布布扣,bubuko.com
原文：http://www.cnblogs.com/aimer311/p/3611545.html