Ext Js 树（六）

// 普通树实现代码：（参考g4）

              1）servlet代码实现：

request.setCharacterEncoding("UTF-8");

         response.setCharacterEncoding("UTF-8");

         // 模拟节点数据

         List treeNodes = new ArrayList();

         TreeNode node = new TreeNode();

         node.setId("01");

         node.setName("根节点");

         node.setLeaf("0");

         treeNodes.add(node);

         TreeNode node1 = new TreeNode();

         node1.setId("0101");

         node1.setName("节点一");

         node1.setParentId("01");

         node1.setLeaf("0");

         treeNodes.add(node1);

         TreeNode node11 = new TreeNode();

         node11.setId("010101");

         node11.setName("节点一一");

         node11.setParentId("0101");

         node11.setHref("演示下，装装样子啦");

         node11.setLeaf("1");

         treeNodes.add(node11);

        

         StringBuilder treeScript = new StringBuilder();

         // 生成节点

         for(int i=0; i<treeNodes.size(); i++){

              TreeNode treeNode = (TreeNode)treeNodes.get(i);

              treeScript.append("var node_").append(treeNode.getId())

              .append(" = new Ext.tree.TreeNode({ \n\t ")

              .append("id: '").append(treeNode.getId()).append("',\n\t")

              .append("text: '").append(treeNode.getName()).append("',\n\t")

              .append("listeners: { \n\t\t 'click': function(){\n\t\t\t");

              if("1".equals(treeNode.getLeaf())){ // 如果是叶子节点，href不为空

                // jsp的javascript定义addTab()函数

                   treeScript.append("addTab('"+treeNode.getHref()+"');");

              }

              treeScript.append("}} \n }); \n");

         }

         // 确定树之间的依赖关系

         for(int i=0; i<treeNodes.size(); i++){

              TreeNode treeNode = (TreeNode)treeNodes.get(i);

              if(treeNode.getParentId() != null){ // 根节点（所有目录的）

                   treeScript.append("node_").append(treeNode.getParentId())

                   .append(".appendChild(node_").append(treeNode.getId())

                   .append("); \n");

              }

         }

         System.out.println(treeScript.toString());

         request.setAttribute("treeScript",treeScript.toString());

         request.getRequestDispatcher("/index.jsp").forward(request,response);

     2）jsp代码实现：

         Ext.onReady(function(){

              ${treeScript}

              var tree = newExt.tree.TreePanel({

                   el:"tree"

              });

              tree.setRootNode(node_01);

              tree.render();

          });

          function addTab(href){

              Ext.Msg.alert("HREF",href);

          }

// 异步树实现代码：（jsp）

var tree = new Ext.tree.TreePanel({

el: 'tree',

     loader: new Ext.tree.TreeLoader({dataUrl: '<%=path%>/tree'}) // 树加载器

});

var root = new Ext.tree.AsyncTreeNode({ // 节点采用异步节点的方式

     id: "01",

     text: "树根"

});

tree.setRootNode(root);

tree.render();

 

// 请求的servlet实现代码

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

// 获取节点参数，对应的是正在展开的节点ID

String node =request.getParameter("node");

String json = "";

// 模拟节点树数据,叶子节点添加leaf: true属性

if("01".equals(node)){// 根节点

     json += "[{id: '0101',text: '节点一'},{id: '0102',text: '节点二'}]";

}else if("0101".equals(node)){

     json += "[{id: '010101',text:'节点一一'},{id:'010102',text: '节点一二',leaf:true}]";

}else if("0102".equals(node)){

json += "[{id: '010201',text:'节点二一', leaf: true},{id: '010202',text: '节点二二',leaf: true}]";

}else if("010101".equals(node)){

     json += "[{id: '010101',text:'节点一一一',leaf: true}]";

}   

response.getWriter().write(json);

 

//建表参考：

Create table menutree(

     Id                varchar2(20),     --id

     Name              varchar2(200),   -- 树文本

     parentID        varchar2(20),     -- 父ID

     url              varchar2(200),   -- 请求的url

     sortno          varchar(20),      -- 子节点显示的顺序

     leaf             char(1)           -- 属于树杈还是节点（0表示树杈，1表示节点）

)

 

 

 

// 节点事件

tree.on("click",function(node){

Ext.Msg.alert("节点",node.text);

});

// 节点其他属性：

修改节点默认图标：icon: ‘user_image.png’

节点提示信息： qtip: ‘…’,使用时需要Ext.QuickTips.init()

设置超链接： href: ‘xxxxx’

           hrefTarget: ‘_blank’

树形视图：