左树右表的页面实际上也是对单独一张表进行增删改查，有点不同是，当点击左边的树节点时，需要查询表的数据，另外在增加时需要先选中树节点，然后增加的记录在这个节点类别下，比如类型为“计算机”，那么增加的一台电脑设备如thinkpad，就是属于这个“计算机”类别的，如下图所示：
同样省略前面的步骤
7、Service开发
/**
* 产品，左树右表
*
* @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;
}
}
8、Controller开发
/**
* 左树右表
*
* @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;
}
}
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}" 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/143305