Ext.TreePanel基本配置参数

最新推荐文章于 2020-12-31 01:55:07 发布

JoveShen

最新推荐文章于 2020-12-31 01:55:07 发布

阅读量2.9k

点赞数

文章标签： stylesheet function jsp java import url

本文链接：https://blog.csdn.net/ShenJiancomputer/article/details/8061487

版权

TreePanel基本配置参数:

// TreePanel配置参数
1 .animate: true // 展开,收缩动画,false时,则没有动画效果
2 .autoHeight: true // 自动高度,默认为false
3 .enableDrag: true // 树的节点可以拖动Drag(效果上是),注意不是Draggable
4 .enableDD: true // 不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5 .enableDrop: true // 仅仅drop
6 .lines: true // 节点间的虚线条
7 .loader:Ext.tree.TreeLoader // 加载节点数据
8 .root:Ext.tree.TreeNode // 根节点
9 .rootVisible: false // false不显示根节点,默认为true
10 .trackMouseOver: false // false则mouseover无效果
11 .useArrows: true // 小箭头

show.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<html>
<head>
  <link rel="stylesheet" type="text/css"
   href="/extBase/resources/css/ext-all.css" />
  <script type="text/javascript" src="/extBase/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/extBase/ext-all.js"></script>
  <title>simple tree1</title>
  <script type="text/javascript">
  /**
   创建一个简单(静态)的树
*/
function createSimpleTreePanel(){
    //因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
    var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
    var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
    var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
    vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
    vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
        renderTo: document.body,//绑定在body元素上.
        width: 300,
         style:"margin:30",
        height: 200,
        root: vRoot
    });
}
/**
   创建异步简单树
*/
function createSimpleTreeLoader(){
    //创建一个由treeLoader.js定义的节点结构[{...},{...}]
    var vNode = new Ext.tree.TreeLoader({url:'/eg/base/tree/treeLoader.jsp'});
    //创建一个根节点,将上面定义的子节点结构与根节点绑定.
    var vRoot = new Ext.tree.AsyncTreeNode({text: '根节点',loader:vNode}) ;
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
        renderTo: document.body,//绑定在body元素上.
        style:"margin:30",
        width: 300,
        height: 200,
        root: vRoot//绑定根节点.
    });
}

/**
   创建动态(从JSP文件动态载入)树
*/
function createSimpleDynamicTreeLoader(){
    //创建一个节点,节点的结构由JSP文件提供
    var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});
    //为该节点添加beforeload(点击节点之前触发)事件监听器.
    vNode.on("beforeload",function(myLoader,node){
        //myLoader.baseParams.parentId是为treeLoader.jsp传递参数,参数名为parentId,可以自己取名.node代表正要点击的节点对象
        myLoader.baseParams.parentId = node.id=='root'?"":node.id;
    }) ;
    var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根节点',loader: vNode}) ;
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
        renderTo: document.body,//绑定在body元素上.
        enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
        width: 300,
        style:"margin:30",
        height: 200,
        root: vRoot//绑定根节点.
    });
}
Ext.onReady(function(){
//createSimpleTreePanel();
//createSimpleTreeLoader();
createSimpleDynamicTreeLoader();
});

  </script>
</head>
<body>

</body>
</html>

treeLoader.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
    String parentId = request.getParameter("parentId") ;
System.out.println(parentId) ;
    if("".equals(parentId) || parentId==null){
        out.print("[{id:\'bj\',text:\'北京\'},"+"{id:\'ll\',text:'辽宁'}]");
    }else if("bj".equals(parentId)){
        out.print("[{text: \'朝阳\',leaf: true},"+"{text: '东城',leaf: true}]");
    }else if("ll".equals(parentId)){
        out.print("[{text: \'沈阳\',leaf: true},"+"{text: '大连',leaf: true}]");
    }
%>

JoveShen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.TreePanel基本配置参数

TreePanel基本配置参数://TreePanel配置参数1.animate:true//展开,收缩动画,false时,则没有动画效果2.autoHeight:true//自动高度,默认为false3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable4.enableDD:true//不仅可以拖动,还可以通过Drag改变节
复制链接

扫一扫