web tree dojo 0.3 和梅花雪 MzTreeView1.0 - luyu

公告

web tree dojo 0.3 和梅花雪 MzTreeView1.0

开始:

首先大家先了解一下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 = 写入

这样就构建好一棵树了.页面代码总的如下:

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:

var djConfig = {isDebug: true };//这里是设置是否需要dojo的debug功能

</script>

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树:

<!—创建控制器 -à

<!—创建监听器 -à

<!—创建树 -à

好了.页面的就是这样.

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)

posted on 2008-11-03 00:01 luyu 阅读(175) 评论(0) 收藏举报

刷新页面返回顶部

LuYu

公告