jquery.treeview在真实项目中的使用

12年前

1. prodcat_tree.jsp页面
<html>
<head>

<title>产品分类</title>

<link rel="stylesheet" href="/admin/js/jquery_treeview/jquery.treeview.css" />

<link rel="stylesheet" href="/admin/css/screen.css" />
<script src="/admin/js/jquery_treeview/lib/jquery.js" type="text/javascript"></script>
<script src="/admin/js/jquery_treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="/admin/js/jquery_treeview/jquery.treeview.js" type="text/javascript"></script>
<script src="/admin/js/jquery_treeview/jquery.treeview.async.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#category").treeview({
url: "ajaxCreateCatTree.do"
});
});

function click_category(id) {
$("a").removeClass("currlink");
$("#link"+id).addClass("currlink").blur();
var mainObj = parent.document.getElementByIdx_x("main");
mainObj.src = "listProdCat.do?catId="+id;
}
</script>
</head>

<body>
<h4>产品分类</h4>
<ul id="category">
</ul>
</body>
</html>

2. 主体页面：product_category_manage.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>产品分类管理</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body style="margin:0px">
<table height="100%" width="100%" style="margin:0px;">
<tr valign="top">
<td width="15%" style="border-right:2px solid #555;">
<iframe src="prodcat_tree.jsp" height="100%" width="100%" id="tree" frameborder="0"></iframe>
</td>
<td width="85%">
<iframe src="listProdCat.do?catId=0" height="100%" width="100%" id="main" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>

3.后台服务类

public class ProdCatTreeServiceImpl implements TreeService {

public String generateJTVJsonString(String id) {
String output = "";
if (id == null) {
return "";
} else if (id.equalsIgnoreCase("source")) {
output = generateInitTreeString();
} else {
output = generateTreeChildNodeString(Integer.parseInt(id));
}
return output;
}

// 产生子节点jsonstring
public String generateTreeChildNodeString(Integer catId) {
StringBuilder jsonString = new StringBuilder();
List<ProdCategory> allProdCategory = SysCache.getChildCategories(catId);
if (allProdCategory != null) {
jsonString.append("[");
int i = 0;
for (ProdCategory prodCategory : allProdCategory) {
if (i > 0) {
jsonString.append(",");
}
jsonString.append(toJSONString(prodCategory));
i++;
}
jsonString.append("]");
}
return jsonString.toString();
}

public String generateInitTreeString() {
StringBuilder jsonString = new StringBuilder();
List<ProdCategory> topProdCategory = SysCache.getTopCategories();
if(topProdCategory != null) {
jsonString.append("[");
int i = 0;
for (ProdCategory prodCategory : topProdCategory) {
if (i > 0) {
jsonString.append(",");
}
jsonString.append(toJSONString(prodCategory));
i++;
}
jsonString.append("]");
}
return jsonString.toString();
}

public String generateLinkString(Object obj) {
ProdCategory prodCategory = (ProdCategory) obj;
String link = "<a href='javascript:click_category("+prodCategory.getId()+")' id='link"+prodCategory.getId()+"'>"+prodCategory.getName()+"</a>";
return link;
}

public String toJSONString(Object obj) {
ProdCategory prodCategory = (ProdCategory) obj;
StringBuilder sb = new StringBuilder();
sb.append("{");
sb.append(""text": "" + generateLinkString(prodCategory) + """);
sb.append(","expanded":false");
if (!prodCategory.isLeafNode()) {
sb.append(", "id":" + prodCategory.getId() + "");
sb.append(", "hasChildren":true");
}
sb.append("}");
return sb.toString();
}
}