NW開發教程系列五：表頭和表體（單表體）

時間 2019-11-29

標籤開發教程系列表頭简体版

原文原文鏈接

表頭和表體頁面包括兩種，單子表和多子表，即1對1和1對多。這裏先介紹單表體頁面。這也是單據業務中常常遇到的一種頁面。如圖所示：javascript

省略前面的開發步驟。html

七、Service開發java

/**
 * 產品，表頭和表體（單表體）
 * 
 * @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;
	}

}

八、Controller開發web

/**
 * 主子表，單子表
 * 
 * @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;
	}

}

九、jsp文件json

<!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/143305app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。