NW開發教程系列三：左樹右表的頁面

時間 2019-11-19

標籤開發教程系列頁面简体版

原文原文鏈接

左樹右表的頁面實際上也是對單獨一張表進行增刪改查，有點不一樣是，當點擊左邊的樹節點時，須要查詢表的數據，另外在增長時須要先選中樹節點，而後增長的記錄在這個節點類別下，好比類型爲「計算機」，那麼增長的一臺電腦設備如thinkpad，就是屬於這個「計算機」類別的，以下圖所示：javascript

一樣省略前面的步驟html

七、Service開發java

/**
 * 產品，左樹右表
 * 
 * @author xuqc
 * @date 2013-10-17 下午02:34:41
 */
@Service
public class T206Service 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, ProductDetailVO.class.getName());
			vo.setAttributeValue(VOTableVO.PKFIELD, ProductDetailVO.PK_PRODUCT_DETAIL);
			billInfo.setParentVO(vo);
		}
		return billInfo;
	}

}

八、Controller開發web

/**
 * 左樹右表
 * 
 * @author xuqc
 * @date 2013-10-17 下午02:55:09
 */
@Controller
@RequestMapping(value = "/busi/scene/t206")
public class T206Controller extends AbsToftController {

	@Autowired
	private T206Service t206Service;

	@Override
	public T206Service getService() {
		return t206Service;
	}

	@Override
	public String getTreePkField() {
		return ProductDetailVO.PK_CATEGORY;
	}

	@RequestMapping(value = "/getItemTree.json")
	@ResponseBody
	public List<TreeVO> getTree() {
		String whereSql = " isnull(dr,0)=0 order by categorycode";
		CategoryVO[] categorys = (CategoryVO[]) NWDao.getInstance().queryForSuperVOArrayByWhereClause(CategoryVO.class,
				whereSql);
		List<TreeVO> roots = new ArrayList<TreeVO>();
		if(categorys == null || categorys.length == 0) {
			return roots;
		}
		HashMap<String, List<TreeVO>> allLeafs = new HashMap<String, List<TreeVO>>();
		// 對子節點進行分組
		for(CategoryVO category : categorys) {
			TreeVO vo = new TreeVO();
			vo.setId(category.getPk_category());
			vo.setCode(category.getCategorycode());
			vo.setText(category.getCategorycode() + " " + category.getCategoryname());// 編碼+名稱顯示
			if(StringUtils.isBlank(category.getPk_parentclass())) {
				vo.setLeaf(false);
				roots.add(vo);
				continue;
			}
			if(allLeafs.get(category.getPk_parentclass()) == null) {
				ArrayList<TreeVO> list = new ArrayList<TreeVO>();
				list.add(vo);
				allLeafs.put(category.getPk_parentclass(), list);
			} else {
				allLeafs.get(category.getPk_parentclass()).add(vo);
			}
		}
		return getTrunk(allLeafs, roots);
	}

	private List<TreeVO> getTrunk(HashMap<String, List<TreeVO>> leafs, List<TreeVO> trunks) {
		for(TreeVO trunk : trunks) {
			if(leafs.get(trunk.getId()) == null || leafs.get(trunk.getId()).size() == 0) {
				trunk.setLeaf(true);
				continue;
			}
			trunk.setChildren(getTrunk(leafs, leafs.get(trunk.getId())));
		}
		return trunks;
	}
}

　九、對應的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>
		<%@ include file="/common/header.jsp"%>
	</head>
	<body>
	<nw:Bill templetVO="${templetVO}" headerGridImmediatelyLoad="true" bodyGridsPagination="false" headerGridSingleSelect="true" tableColumns="2"/>
	</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';		
	WOHB12Toolbar = 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_print);
			return btns;
		}
	});
	${moduleName}.appUiConfig.toolbar = new WOHB12Toolbar();
	var app = new uft.jf.ToftPanel(${moduleName}.appUiConfig);

	//工具欄的按鈕通常都拋出了點擊前和點擊後事件，好比beforeadd和add,beforedel,del等
	${moduleName}.appUiConfig.toolbar.addListener(
		'beforeadd',function(toolbar){//若是不想新增事件繼續執行，須要返回false
			var tree = this.app.leftTree;
			if(!tree.getSelectedNode() || tree.getSelectedNode().id==null ||
					tree.getSelectedNode().id=='' ){
					uft.Utils.showWarnMsg('請先選擇公開類型節點！');
					return false;
			}
			//非末級節點,不能增長檔案
			if(!tree.getSelectedNode().isLeaf()){
				uft.Utils.showWarnMsg('末級節點才容許增長！');
				return false;
			}
			Ext.getCmp("pk_category").setValue(tree.getSelectedNode().id);
		}
	);
	${moduleName}.appUiConfig.toolbar.addListener(
		'add',function(toolbar){
			var tree = this.app.leftTree;
			Ext.getCmp("pk_category").setValue(tree.getSelectedNode().id);
		}
	);
	</script>
	<%@ include file="/common/footer.jsp"%>
</html>

具體的示例能夠參考：http://xuqc.fangwei.name:9080/demo-webapp administrator/143305app

相關標籤/搜索

每日一句

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