ext tree 如何根据json对象生成节点?

var jsondata = [ {
                        id: '111',
                        text: '文件夹1_1',

                        children: []
                    },{
                        id: '222',
                        text: '文件夹1_2',
                        children: []
                   }
];

 我现在有上面这样一个json格式的对象jsondata,有一个ext tree 对象,tree对象有一个根节点,tree对象的根节点默认不展开,当点击加号展开时,将jsondada加载为其下的子节点。简单点说,ext tree 加载节点的方式通常是请求服务器print一个json格式的字符串,或者请求一个.json文件,而我现在是在页面上有一个json格式的对象,如何能让tree读取这个json对象来生成节点,而不请求任何外部url。我设想的思路是,实际上就是动态加载树节点,但动态请求的不是url,可以是一个方法,返回一个json格式的对象,类似上面的jsondata。ext tree对象有没有这样的实现方式啊,或者有其他的途径可以解决我的需求!


问题补充:chemzqm 你好,您的回答只是在点击根节点的时候加载一下,我的需求是怎样在点击任何一个节点之前的加号时都可以根据一个已经存在的json对象生成子节点,您还有更全面的方式吗?

回答: ext tree 如何根据json对象生成节点?

  1. 配置上去就可以了啊,例如:
    function getJson(){
    var jsondata = [ { 
                            id: '111', 
                            text: '文件夹1_1',
                            children: [] 
                        },{ 
                            id: '222', 
                            text: '文件夹1_2', 
                            children: [] 
                       } 
    ];
    return jsondata ;
    }
    
    ..
    root: new Ext.tree.AsyncTreeNode({
                expanded: false,
                children: [getJson()]
            }),
    

    expanded属性默认是false,这样只有点击结点前加号的时候子节点才会被渲染

如何读取和操作加载到ext tree上的json的数据

  1. Q
    我加载到tree上的json数据比较复杂,不仅仅是id text children等数据,还有其他数据,我如何来读取和操作这个json的数据
    我的json数据如{id:'',parerntId:'',text:'',name:'',还有其他内容}
    谢谢!


  2. A
    使用node.attributes.你的属性名称

ext tree 定位树节点

  1. Q
    树 : Ext.tree.TreePanel
    树节点 : new Ext.tree.AsyncTreeNode

    现在的问题是。当我通过条件定位树节点的时候。树的竖向滚动条,有的时候不会在可视范围内。

    网上有说是用scrollIntoView(),但是我一直获取不到当前被选择节点的div对象。

    期待解决方案。。。。。。

    问题补充:clue 写道
    node.getUI().getEl()
    


    建议多翻翻API文档
    这个我试了,没成功。
    问题补充:shannon123456 写道其实 直接找到节点 .focus();就可以了 没必要人为的 去定位。
    没有这个方法
  2. A
    node.getUI().getEl()
    


    建议多翻翻API文档

Ext tree 叶子节点 添加链接 点击跳转问题 很急~

  1. Q
    我这个树没有href属性我现在想在判断是叶子节点的话  点击就跳转的问题
    var roleid =document.getElementById('roleid').getAttribute('data');
    
    Ext.BLANK_IMAGE_URL = "/dtjcsy/pages/js/ext/resources/images/default/s.gif";
    Ext.onReady(function() {
    	
    	var Tree= Ext.tree;
    	
    	var loader = new Ext.tree.TreeLoader;
    	var tree = new Tree.TreePanel({
    		el:'rrtree',
            autoScroll:true,
            animate:true,
            enableDD:true,
            frame:false,
            border:false,
            useArrows : true,
            onlyLeafCheckable:false,
            rootVisible:false,
            containerScroll: true,
    		loader: new Tree.TreeLoader({
    			dataUrl:'rightAction!roleright.action',
    			baseParams:{roleId:roleid}
    		})
    		
    	});
    	tree.on('click',function(node){
    		if(node.id==2){
    			//点击节点 如果这个节点的id=2就跳转到a.jsp  怎么实现
    		}
    	});
    	var root = new Tree.AsyncTreeNode({
    			text:"",
    			draggable:false,
    			id:'0'
    		});
    		
    	tree.setRootNode(root);
    	tree.render();
    	root.expand(true);
    	
    	
    });
    
    

    问题补充:myali88 写道引用点击节点 如果这个节点的id=2就跳转到a.jsp  怎么实现 
    这个是什么意思?直接刷新当前页面,还是把这个链接传给其他页面?
    页面分上 左右  这个树是在左边  点击后 在右面出来相对应的页面
    问题补充:myali88 写道引用点击节点 如果这个节点的id=2就跳转到a.jsp  怎么实现 
    这个是什么意思?直接刷新当前页面,还是把这个链接传给其他页面?
    哥们帮我下啊 很急
    问题补充:myali88 写道引用页面分上 左右  这个树是在左边  点击后 在右面出来相对应的页面
    就是左边点击树节点,右边刷新,是吧!整个页面的左右是用iframe分割,还是其他的?
    <frameset rows="70,*" frameborder="no" border="1" framespacing="0" >
    	<frame src="pages/Top.jsp" scrolling="no" noresize="noresize" >
    	<frameset rows="*" cols="161,6,*">
    		<frame src="pages/left.jsp" name="left"/>
    		<frame src="pages/middle.html">
    		<frame src="" name="right"/>
    		<frame>
    	</frameset>
    </frameset>
    
    

    问题补充:解决了
    可能方法比较笨
    tree.on('click',function(node){
    		if(node.id==2){
    			top.right.location='/dtjcsy/pages/EquipmentPlan.jsp';//right 是 frameset里的
    		}
    
  2. A
    这样的话,很简单啊!首先,在返回的节点树数据中,增加一个属性,比如:url,表示当前节点点击要打开的地址,然后你监听选中节点的事件,获取该值,直接赋值到右边frame的src上即可。

ext tree checkbox 中选中父节点,如何让子节点不展开

  1. Q
    我做有关ext tree checkbox的项目,基本上没有是什么大问题,就是在选中父节点时,所有的子节点都会展开,求问怎样才能在选中父节点时,子节点还是处于收缩状态
    问题补充:lizhi92574 写道 默认只有双击节点,或者点击+号才会展开子节点,你是不是哪里写错了。
    应该是某一个属性没有打开吧,代码如下
    var root =new Ext.tree.TreeNode({
        id:"root",
        text:"目录",
                      checked:false
      });
       var tree =new Ext.tree.TreePanel({
            id:'tree_me',
       el:'depTree',
       title:'派单树',
       enableDD:true,
       root:root, 
               animate:true,
                       checkModel: 'multiple',
                       onlyLeafCheckable: true//对树所有结点都可选 
       });

       tree.on('checkchange', function(node, checked) {
                     node.expand();
                     node.attributes.checked = checked;
                     node.eachChild(function(child) {
                                 child.ui.toggleCheck(checked);
                                 child.attributes.checked = checked;
                                 child.fireEvent('checkchange', child, checked);
                             });              
          }, tree);
  2. A
    还得把node.expand();  //展开方法去掉

Ext tree 节点没有定义href, 单击时 自动跳转

  1. Q
    当ext tree 的节点text 含有table标签时, 即使没有定义 href, 也会默认跳转。

    求解决办法。

    之前还出现了一个问题,就是 出现默认的link 菜单,加了一段代码后解决了。
    我想这个问题 还是由于 ext 把 table标签 当link 对待了。

    对这段代码不是很理解,麻烦高手 顺便解释一下, 也许从这里 能找到答案。

    Ext.tree.TreeEventModel.prototype.delegateContextMenu = function(e, A) {
    var t = e.getTarget();
    if (!Ext.get(e.getTarget()).hasClass('x-tree-node-el')) {
        t = e.getTarget('.x-tree-node-icon', 1);
        if (!t) {
            t = Ext.get(e.getTarget()).parent('.x-tree-node-el');
         }
    }
    if (this.beforeEvent(e) && t) {
        var node = null;
        var id = Ext.fly(t, '_treeEvents').getAttributeNS('ext', 'tree-node-id');
        if (id) {
             node = this.tree.getNodeById(id);
        }
        if (node) {
            this.onNodeContextMenu(e, node);
        }
    }
    };
  2. A
    Ext.tree.TreeEventModel.prototype.getNodeTarget = function(e) {
    var t = e.getTarget('.x-tree-node-icon', 1);
    if (!t) {
    t = e.getTarget('.x-tree-node-el');
    }
    return t;
    };

Ext tree 节点的text 含有 table 标签时, 右键菜单 不能正常显示

  1. Q
       当节点的内容,含有 table标签时, 点击 table 部分的内容时,出现的右键菜单 是 浏览器默认的 针对 link 的右键菜单,比如 在新窗口中打开 之类的。而不是 自己定义的菜单。 点击其他部分时  可以正常显示。

      请问大家有遇到过这种情况吗, 有什么好的解决办法



  2. A
    添加以下代码可以解决

    Ext.tree.TreeEventModel.prototype.delegateContextMenu = function(e, A) {
    var t = e.getTarget()
    if (!Ext.get(e.getTarget()).hasClass('x-tree-node-el')) {
    t = e.getTarget('.x-tree-node-icon', 1);
    if (!t) {
    t = Ext.get(e.getTarget()).parent('.x-tree-node-el')
    }
    }
    if (this.beforeEvent(e) && t) {
    var node = null;
    var id = Ext.fly(t, '_treeEvents').getAttributeNS('ext', 'tree-node-id');
    if (id) {
    node = this.tree.getNodeById(id);
    }
    if (node) {
    this.onNodeContextMenu(e, node);
    }
    }
    }

struts2 Action返回的json对象无法绑定到Ext grid中

  1. Q
    大家好:

    后台返回的json对象格式上好像出了点问题,参考成功的例子,json对象应该是以下格式:
    {
        total: 2,
        root : [
            { id: 1, firstname: 'Bill', occupation: 'Gardener' },         // a row object
            { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }  // another row object
        ]
    }

    可是我现在的json对象只有root 里面这部分,如下:
    {
      { id: 1, firstname: 'Bill', occupation: 'Gardener' },         // a row object
      { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }  // another row object
    }

    我从Ext的js文件,struts2的xml文件,后台action,都看了一遍也不知道是什么造成的?
    Ext相关部分:


    我的lib是:struts2-json-plugin-2.1.8.1.jar和json-lib-2.1.jar
    问题补充:upup1000 写道后台写到客户端的json串是什么样子的
    你好,json串如下:
    [{"availDist":false,"conDist":false,"consigneeDist":false,"creditRank":"1","customerCode":"020008","customerName":"","customerRank":"01","dcCompDist":false,"delDist":false,"empty":false,"errMessages":[],"isPageAble":false,"isSortAble":false,"maxRows":1000,"pageAble":false,"resultCode":0,"shippingCompDist":false,"sortAble":false,"supDist":true,"totalRows":0},
    {"availDist":false,"conDist":true,"consigneeDist":true,"creditRank":"4","customerCode":"323232","customerName":"","customerRank":"04","dcCompDist":true,"delDist":true,"empty":false,"errMessages":[],"isPageAble":false,"isSortAble":false,"maxRows":1000,"pageAble":false,"resultCode":0,"shippingCompDist":true,"sortAble":false,"supDist":true,"totalRows":0},
    {"availDist":false,"conDist":true,"consigneeDist":true,"creditRank":"4","customerCode":"test03","customerName":"","customerRank":"04","dcCompDist":true,"delDist":true,"empty":false,"errMessages":[],"isPageAble":false,"isSortAble":false,"maxRows":1000,"pageAble":false,"resultCode":0,"shippingCompDist":true,"sortAble":false,"supDist":true,"totalRows":0}]
    问题补充:babydeed 写道json数据里 "total"和 "root"这2个属性都没有  
    是啊,我就不知道为什么没有啊,JsonReader里面,我已配好了。。。
    问题补充:upup1000 写道在后台写成root:[]或前台reader里边root:""
    你看我问题里,Ext相关部分的代码,root我配好了啊
    问题补充:upup1000 写道前台配好了你就专心改后台,不想改后台就改前台,两个都不改神仙来了也帮不了你
    希望你的回复具体些。
    也就是在后台要加上root和total属性被,谢谢,我知道了。。
  2. A
    在后台写成root:[]或前台reader里边root:""

EXT tree 增加节点

  1. Q
    我写的树当点击右键 然后‘增加子节点’会弹出一个form 然后就进行后台处理 可是这样我的节点插入数据库 只能让tree这个页面刷新一下 新的节点才会显示出来 可以实现页面无刷新就显示吗?
    具体代码:
    items:[
     
              {text:'增加下级',handler:function(){//右键增加下级的菜单 右键代码已省略
             
            
              
                var h=window.open('addjiedian.jsp?node='+node.id,"","width=300,height=120,toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,left=100,top=100");
                width=screen.width;
    height=screen.height;
    h.moveTo((width-300)/2,(height-120)/2);
    }}]
                  
    当点击增加下级 就会打开'addjiedian.jsp这个页面 然后在这个页面写form 并提交到后台 这样实现好像不能无刷新 大家有啥好的方法吗
    问题补充:
    其实我很想用ext的window弹出 但是我做不到 因为ext的window窗口只会弹出在我刚定义的页面 而我刚定义的页面只是一个viewport的子页面 所以这样window的位置很难看 不会在中间!啊 有好的办法吗
    问题补充:
    大家说的自定义window的位置我都试过了 位置是可以更改 但是这个窗口却嵌入到这个页面里面 不会再整个viewport上面 哎 我截个图大家就会明白啦
    大家看着窗口的位置 哎 拉不出来的 我搞了三天 最后搞不定 就只好用window.open了
    问题补充:
    对啊 我右边就是一个iframe啊 自动嵌套进来的页面 整个框架是一个viewport
    这样应该怎么解决啊
    问题补充:
    我发一下我的viewport代码 就是整个框架
    <script>
    function fill(){
    Ext.MessageBox.alert("回调");
    }
    Ext.onReady(

    function (){

    new Ext.Viewport(
    {

    layout:"border",
    items:[
     
    {
    title:"南宁供电局企业门户BI管理",
    width:202,
    region:"west",
    collapsible:true,
    html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="../biManage/tree.jsp"> </iframe>'

    //这个就是左边那棵树
    }
    ,
    {
    xtype:"panel",

        region:"center",
     
    items:
    [{
    id:'center1',
    title:"广西项目",

    html:'<iframe  id="main" name="main" scrolling="auto" frameborder="0" width="100%" height="100%" src="../biManage/ControlNew.jsp" > </iframe>'
    }]
    }]})
    //上面这个就是我右边那么页面




    })
    </script>
    问题补充:
    我的窗口位置已经解决啦 现在就是无刷新添加树的问题 大家看我的代码 应该怎么实现 具体代码如下:
       items:[

        {text:'增加下级',handler:function(){//右键增加下级 会弹出一个window然后 将form嵌入到window里面  var form=new Ext.form.FormPanel({//定义一个form 输入节点名称 defaultType:'textfield',
    labelAlign:'right',
    url:'<%=request.getContextPath()%>/addyezi.do?id='+node.id,

    items:[{fieldLabel:'节点名称',name:'nodename'}],
    buttons:[{text:'新增',handler:function(){
                form.getForm().submit({}}}]
    });
    var win=new Ext.Window({//定义一个弹出window el:'win',
    items:[form]})//将form嵌入到这个window里面
    }
    添加到数据库什么的 这些都能实现啦!就是ext的无刷新  我还不知道在哪个地方应该怎么添加代码 大家能具体一点吗 我谢谢啦 万分感谢 一点没思路
    问题补充:
    阿蔡  我的那个问题已经解决啦 我现在解决的是无刷新问题呀!那个iframe我已经去掉了 不用再考虑这个了 呵呵 帮我解答一下我上面发的那个核心代码 改怎么加代码 变成无刷新 查API 也没头绪
  2. A
    靠,,没法了,,要么就把iframe换掉,,,
    要么就window.open 或者window.showmodaldialog()
    上面不是列出window.open()办法么,,试试吧。
    ext本身不能解决这个问题

怎么做带有提示节点信息的树 Ext.tree.TreePanel

  1. Q
    var tree = new Ext.tree.TreePanel({  
        el:"tree-div",  
            autoScroll:true,
            animate:true,
            width:'100%',
            height:'100%',
            enableDD:false,
            checked :true,      
            containerScroll: true,
            loader: new Ext.tree.TreeLoader({
                dataUrl:'developeproinfo.ejf?cmd=getRootprojects'   
            }
            )
        });
    tree.on('mouseover',function(node){
        alert("mouseover");

    });加入事件也不起作用呢??


    问题1:就是鼠标滑过节点时显示一下节点名称  ?
    问题2:当子节点很多时, TreePanel怎么全部显示呢 如自动加滚动条?


    (使用版本:extjs2.2)
    问题补充:
    Ext.tree.TreeNode
    使用 qtip : String
    这个我倒是查到到了---可如何放在Ext.tree.TreePanel中呢?可以更具体下吗
    问题补充:
    var root = new Ext.tree.AsyncTreeNode({
            text: '【导航】',
            draggable:false,
            id: '1'
        });
        tree.setRootNode(root);
        tree.render();
       root.expand();
    我用的是AsyncTreeNode,菜单树 是动态树,就是没搞定如何loader关联起来?
    我的代码:
    tree.on('beforeload',function(node){
    tree.loader.dataUrl='developeproinfo.ejf?cmd=getRootprojects&id='+node.id; 
    }
    没问题
    问题补充:
    谢谢,yourgame ;问题1解决了。
    问题2 ,子节点过多时不能在一页看到 怎么处理呢 ?autoScroll:true,设置不起作用
  2. A
    引用谢谢,yourgame ;问题1解决了。
    问题2 ,子节点过多时不能在一页看到 怎么处理呢 ?autoScroll:true,设置不起作用

    这种问题属于布局的问题,你参考一下官网示例,看看他的写法怎么就可以看到,而你自己的却看不到,对比两者不同之处