三省农场服务平台有一个业务是从数据库中查询信息,在界面上显示,显示的样式为树形结构,做到动态的变化,以前也实现过这样的功能,可能方法上略有不同,我们看下这个是怎么样实现的吧!
效果图:
红色框中的数据是从数据库中查询出来,显示在界面上的.
一、前台jsp页面
这里用的是SpringMvc,调用Action
<span style="font-family:KaiTi_GB2312;font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>
<left layout="农场管理">
<tab id="1">
<accordion>
<node id="CAIPINTREE" name="菜品管理" type="tree" url="${path}/DishCategory/left_caipin.json" expand="first">
</node>
<node name="信息管理">
<node id="CZZX" name="采摘资讯" type="ZXGL" icon="pinguo.png"></node>
<node id="NZDT" name="农庄动态" type="ZXGL" icon="newspaper.png"></node>
<node id="PSGL" name="配送计划" type="PSGL" icon="Home.png"></node>
</node>
<node id="ZZGLTREE" name="种植管理" type="tree" url="${path}/zhongzhi/lefttree.json" expand="first">
</node>
<node id="YZGLTREE" name="养殖管理" type="tree" url="${path}/zixun/left_yzgl.json" expand="first">
</node>
<node id="JGSCTREE" name="生产管理" type="tree" url="${path}/zixun/left_jgsc.json" expand="first">
</node>
<node id="ZCGLTREE" name="资产管理" type="tree" url="${path}/Property/left_zcgl.json" expand="first">
</node>
</accordion>
</tab>
</left></span>
二、Action
<span style="font-family:KaiTi_GB2312;font-size:18px;"> /****
* 显示界面左侧树 韩欣桐 2015年12月23日
*
* @param pdatatype
* @param pcustattr
* @param pid
* @param request
* @return
*/
@RequestMapping(value = "/left_zichan.json", method = { RequestMethod.GET,
RequestMethod.POST })
@ResponseBody
public Object left_zichan(String pdatatype, String pcustattr, String pid,
HttpServletRequest request) {
// 判断树父id是否为空
if (StringUtil.isEmpty(pid)) {
List<TreeNode> list = new ArrayList<TreeNode>();
return list;
} else {
List<TreeNode> list = new ArrayList<TreeNode>();
return list;
}
}
/**
* 通过资产分类,查询资产分类目录树 韩欣桐 2015年12月23日
*
* @param pdatatype
* @param pcustattr
* @param pid
* @param request
* @return TODO
*/
@RequestMapping(value = "/left_zcgl.json", method = { RequestMethod.GET,
RequestMethod.POST })
@ResponseBody
public Object left_zcgl(String pdatatype, String pcustattr, String pid,
HttpServletRequest request) {
// 判断树父id是否为空
if (StringUtil.isEmpty(pid)) {
List<TreeNode> list = new ArrayList<TreeNode>();
TreeNode root = new TreeNode("0", "资产分类", "ZCGLFL", null, true);
list.add(root);
return list;
} else {
List<TreeNode> list = new ArrayList<TreeNode>();
// 查询资产分类下面的资产分类名称
List<SnAssetCategory> listAssetCategory = propertyService
.QueryAllAssetName();
// 遍历获取子节点,未加载大图缩略图
for (int i = 0; i < listAssetCategory.size(); i++) {
list.add(new TreeNode(((SnAssetCategory) listAssetCategory
.get(i)).getCateuuid(),
((SnAssetCategory) listAssetCategory.get(i))
.getCatename(), "ZCGL", null, false));
}
return list;
}
}</span>
三、service
<span style="font-family:KaiTi_GB2312;font-size:18px;"> /****
* 查询所以资产分类信息-左侧树结构
*
* @return
*/
public List<SnAssetCategory> QueryAllAssetName() {
// hql查询所有的资产分类对象
String hql = " from SnAssetCategory";
// 查询资产分类的对象
List<SnAssetCategory> listAssetCategory = this.listByHql(hql);
// 返回list集合
return listAssetCategory;
}</span>
四、公共的类:
<span style="font-family:KaiTi_GB2312;font-size:18px;">public class TreeNode extends BaseNode {
private String pid; // 上级数据ID
private boolean isParent; // 是否显示为父节点
private boolean notclick; // 是否可点击
private boolean dynamic; // 是否包含动态标签
private String iconSkin; // 图标CSS
private List<TreeNode> children;
public TreeNode() {
}
public TreeNode(String id, String name, boolean isParent) {
this.id = id;
this.name = name;
this.isParent = isParent;
}
public TreeNode(String id, String name, String type, String field,
boolean isParent) {
this.id = id;
this.name = name;
this.type = type;
this.field = field;
this.isParent = isParent;
}
public TreeNode(String id, String name, String type, String field,
boolean isParent, String icon) {
this.id = id;
this.name = name;
this.type = type;
this.field = field;
this.isParent = isParent;
this.icon = icon;
}
public TreeNode(String id, String pid, String name, String type,
String field, boolean isParent) {
this.id = id;
this.pid = pid;
this.name = name;
this.type = type;
this.field = field;
this.isParent = isParent;
}
public TreeNode copy() {
TreeNode dest = new TreeNode();
super.copyTo(dest);
dest.setPid(pid);
dest.setIsParent(isParent);
dest.setNotclick(notclick);
dest.setDynamic(dynamic);
dest.setIconSkin(iconSkin);
if (children != null) {
List<TreeNode> clist = new ArrayList<TreeNode>();
for (TreeNode node : children) {
TreeNode cnode = node.copy();
clist.add(cnode);
}
dest.setChildren(clist);
}
return dest;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public boolean isIsParent() {
return isParent;
}
public void setIsParent(boolean isParent) {
this.isParent = isParent;
}
public boolean isNotclick() {
return notclick;
}
public void setNotclick(boolean notclick) {
this.notclick = notclick;
}
public boolean isDynamic() {
return dynamic;
}
public void setDynamic(boolean dynamic) {
this.dynamic = dynamic;
}
public String getIconSkin() {
return iconSkin;
}
public void setIconSkin(String iconSkin) {
this.iconSkin = iconSkin;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
public void addChild(TreeNode node) {
if (children == null) {
children = new ArrayList<TreeNode>();
}
children.add(node);
if (node.getPid() == null) {
node.setPid(this.id);
}
}
}
</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">public abstract class BaseNode {
protected String id; //数据ID
protected String name; //名称
protected String code; //代码,用于权限过滤
protected String type; //tree:加载树;其他:数据类型
protected String icon; //图标
protected String field; //参数名
protected String custattr = ""; //该参数不为空时会作为请求参数发送,由业务系统进行相关处理</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"> }</span>
总结:
部分代码已经实现,树型结构的实现其实挺简单的,就是用代码控制数据在界面上的展示的动作,后台代码具体的就是这些。