开始:
首先大家先了解一下json.
json主要是来传输数据.起着和xml文件相同的作用,用于后台java和前台js的数据交互.
优点:简单,易于操作.可以看做是java中的map
确定:由于简单不适宜,不像xml文件那样可以传输复杂的格式.
至于详细的说明到网上查查吧,下面有个图 很好的说明它的格式:
言归正题
TREE1:
MzTreeView.这里我们说1.0版本.不支持动态加载节点.也就是一次性要读入所有节点.从后台java传入js的数据结构.是一种类似json(java中的map)格式的,对节点数量在五千个内的都不存在问题.(梅花雪大人在文档中说3—5w个都很快.我不太相信.哈哈).
下面先看看它的包结构:
大家一看那么多.其实就一个js文件,MzTreeView.js.
它的构造方法如下
Var 你树的名字 = new MzTreeView(“你树的名字”);
下面是设置一些图标
你树的名字.icons["property"] = "property.gif";
你树的名字.icons["css"] = "collection.gif";
你树的名字.icons["book.gif"] = "book.gif";
你树的名字.setIconPath("${pageContext.request.contextPath}/js/Mtree/"); //可用相对路径
下面构造节点:
你树的名字.nodes["pid_did"]="text:档案室;method:toSearch('001','001','3','-1','','0','');";
(上面method: 是梅花雪提供的调用js的方法.在页面就要有toSearch这个function)
这些节点我都是在页面用java代码写入得.代码如下
<%
String treeData = (String)request.getAttribute("treeData");
out.print(treeData);
%>
你树的名字.write(mlsTree.toString()); //写入页面.亦可用 obj.innerHTML = 写入
这样就构建好一棵树了.页面代码总的如下:
<script language="JavaScript">
var mlsTree = new MzTreeView("mlsTree");
mlsTree.icons["property"] = "property.gif";
mlsTree.icons["css"] = "collection.gif";
mlsTree.icons["book.gif"] = "book.gif";
mlsTree.setIconPath("${pageContext.request.contextPath}/js/Mtree/");
<%
String treeData = (String)request.getAttribute("treeData");
out.print(treeData);
%>
document.write(mlsTree.toString());
后台java代码就是把要显示树的数据库表读出来.成为一个list.然后解析list像上面格式然后放入request就可以了, 解析的代码如下:
String treeName = "mlsTree";//这个是树的名称要和页面的名称相同
StringBuffer tree = new StringBuffer("");
tree.append(treeName).append(".nodes[/"0_1/"]=/"text:根节点/";");
for (SMls mls : mzTree) {
id = String.valueOf( mls.getDid()+1);
pid = String.valueOf(mls.getPid()+1);
text = String.valueOf(mls.getJdmc());
tree.append("/n").append(treeName);
tree.append(".nodes[/"").append(pid);
tree.append("_").append(id).append("/"]=/"");
//method(qzh,jddm,jdsx,libcod,aw,type,bz)页面javascript会使用此参数列表
if (text != null && text.trim() != "") {
tree.append("text:").append(text).append(";");
tree.append("method:toSearch('").append(mls.getQzh()).append("','");
tree.append(mls.getJddm()).append("','").append(mls.getJdsx()).append("','");
tree.append(mls.getLibcode()).append("','").append(mls.getAw()).append("','");
tree.append(mls.getType()).append("','").append(mls.getBz()).append("');");
}
tree.append("/";");
}
request.setAttribute("treeData", tree.toString());
好了.梅花雪树就是这样.具体细节还是要看代码的:
Java: com.thams.search.action. SearchAction. DlaxMzTreeViewTree()
Jsp: WebRoot.search.searchTab.jsp
TREE2:
Dojo树.(dojo0.3版本.目前最新1.2)
说着这个树就很费劲了.他很大.也很强大.我只学了其皮毛.这里大家凑合看.
1. 首先在页面引入dojo:
<script type="text/javascript">
var djConfig = {isDebug: true };//这里是设置是否需要dojo的debug功能
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dojojs/dojo.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/dojojs/json.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*"); 上面的引入大家都知道.这里的require相当于java中的import
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
2. 为dojo加入事件监听:
Dojo的事件监听很复杂.这里我就说说最简单的也是我们用的connect监听:
//分类树 注册单击节点属性
function addListener(){
//得到被监听的元素
var beListener = dojo.widget.manager.getWidgetById(‘被监听id’);
//为上面的元素加监听事件, 参数 1.要被监听的元素,2. 说明单击事件 3.点击后触发的事件处理函数
dojo.event.connect(beListener,'select',' dealWith ');
}
function dealWith(){
alert(“我被单击了”);
}
如果你点击 dojo类型的元素,而且id是‘被监听id’的时候将会弹出对话框”我被单击了”
3. 首次进入也面利用dojo的ajax读入数据,这个和大多ajax都一样.我就不说了.
//加载页面时,自动创建只有根节点的树
dojo.addOnLoad(createTree);
//创建分类树
function createTree()
{
dojo.io.bind({
url: “action.do”
method:'POST',
handler: 回调函数,
content:{dojoLibcode:libcode}
});
}
4. 回调函数处理数据,后台传来的json格式.页面要解析如下:
//创建根节点树的回调函数
Function 回调函数(type, data, evt)
{
if (type == 'error')
{
alert('读取服务器数据时出错');
}
else
{
var tree = dojo.widget.byId("你树的名字.在下面呦");
//将服务器的响应解析成JSON对象
var nodeArr =(data.parseJSON());
//遍历数组元素
for (var i = 0 ; i < nodeArr.length ; i++)
{//每个数组元素对应一个根节点,创建根节点。
var appendNode = dojo.widget.createWidget("TreeNode",
{
isFolder:nodeArr[i].isFolder ,
title:nodeArr[i].title ,
widgetId:nodeArr[i].widgetId ,
childIconSrc:nodeArr[i].childIconSrc ,
flcode:nodeArr[i].flcode //自己需要的别的参数
});
//appendNode.expandLevel="2"; // 默认打开节点
tree.addChild(appendNode);
}
}
5.在div上创建dojo树:
<!—创建控制器 -à
<div dojoType="TreeRPCController" RPCUrl="动态请求的url" widgetId="控制器名字" DNDController="create"></div>
<!—创建监听器 -à
<div dojoType="TreeSelector" widgetId="监听器名字"></div>
<!—创建树 -à
<div dojoType="Tree" DNDMode="onto" selector="监听器名字" toggler="fade" widgetId="mlsTree" DNDAcceptTypes="mlsTree" controller="控制器名字">
好了.页面的就是这样.
6.后台action的java代码如下: (注释都很清楚我就不多说了)
String pid = "0"; //默认pid为0
String result = "[ ]"; //默认结果唯恐.[] 是json格式中的空
JSONArray jsonArray = new JSONArray();//创建json对象
List<SMls> smlsList = null;
PrintWriter out = null;
//得到页面传来参数 data 是dojo默认传递的.要注意,名字就是data!!!
String parentNodeString = request.getParameter("data");
try {
//TODO: 判断如果是第一次 将为 null 得到所有ROOT节点,否则根据父节点得到子节点
if(null != parentNodeString){
//解析json格式得到pid(也就是传入的did,widgtId)
JSONTokener jsonTokener = new JSONTokener(parentNodeString);
JSONObject jsonparentObject = (JSONObject) jsonTokener.nextValue();
JSONObject parentNodeObject = (JSONObject) jsonparentObject.get("node");
pid = parentNodeObject.getString("widgetId");
}
//调用service 得到list
smlsList = service.getSMlsNodeListByParent(Integer.parseInt(pid));
//将list转换为 json格式
if ( null != smlsList || smlsList.size() > 0 ) {
for (SMls mls : smlsList) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("title", mls.getJdmc());
if(mls.getChildNum()>0){
jsonObject.put("isFolder", true);
jsonObject.put("childIconSrc", "js/dojojs//images/tree/folder.png");//设置默认图标 文件夹
}else {
jsonObject.put("isFolder", false);
jsonObject.put("childIconSrc", "js/dojojs/images/tree/file.png");//设置默认图标 文件
}
jsonObject.put("widgetId", mls.getDid());
jsonObject.put("parentId", mls.getPid());
jsonObject.put("qzh", mls.getQzh());
jsonObject.put("libcode", mls.getLibcode());
jsonObject.put("nodeCode", mls.getJddm());
jsonObject.put("nodeAttr", mls.getJdsx());
jsonObject.put("nodeAttr_AW", mls.getAw());
jsonArray.put(jsonObject);
}
result = jsonArray.toString();//把json转为字符串
}
//.设置text/json; charset=UTF-8就可以 否则乱码
response.setContentType("text/json; charset=UTF-8");
out = response.getWriter();
out.println(result);
这2棵树就是这个样子的,本人理解的也很浮浅.如有什么疏漏请于本人联系.luyuwww@126.com
14617107(QQ)