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 = 写入

 

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

<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棵树就是这个样子的,本人理解的也很浮浅.如有什么疏漏请于本人联系[e-mail]

14617107(QQ)