dTree无限级目录树和JQuery同步ajax请求

之前都是用JQuery对树的支持来实现目录树的,近来闲来无事就弄了下dTree,感受其无限级目录仍是挺好的,并且它的使用也比较方便,基本上 就是先把要用的js文件即dtree.js和css文件dtree.css引入,另外就是它默认的图片,固然这些图片都是能够本身指定的,它的css样式 也能够本身改变的!css

关于dTree就先谈谈它的node,dTree的node的构造方法能够指定下列参数,html

            id //惟一标识,数字型
            pid//父节点的id,若是是根结点那就只能是-1,通常来说只有一个最顶层的根结点
            name//结点的名字,字符串类型,在页面上显示出来的标签.
            url//字符串类型,表示当点击该叶子结点的时候访问哪一个URL.
            title//title,字符串类型,鼠标进入时显示的字符串.
            target//字符串类型,超连接的目标位置.
            icon //字符串类型,表示该结点图标的图片路径,不指定则使用默认的
            iconOpen//结点打开时候的图片路径,不指定则使用默认的
            open//boolean类型,表示初始状态是不是打开的 java

mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');


有了node之后就是构建树了node

//引入了dtree.js后,就可使用new dTree()了
myTree = new dTree();//这样就新建了一个dTree了struts2的interceptor实现权限管理
//新建了dTree之后就是把刚建的node给添进去了,
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');ajax

在最后还能够指定一些配置参数:数据库

             target//全部结点的目标
            folderLinks//非叶子结点是否也是能够连接的,默认是true
            useSelection//结点是否能够被选择,默认true.
            useCookies//是否使用cookies来记录当前树的状态,默认是true
            useLines//是否用线来画树,默认是true
            useIcons//是否使用图标来构建树,默认是true
            useStatusText//是否在状态栏显示结点的名字,而不是在URL的位置显示,默认是false
            closeSameLevel//是否同时只能有一个文件夹处于打开状态,默认为false,当为true的时候关闭全部的文件夹和打开全部的文件夹将不会起做用
            inOrder//是否先添加父结点再添加子节点,  默认为false,为true能够加快加载速度
            
            //例如:
            mytree.config.target = "mytarget";json

像这些结点的相关信息,咱们通常都是要从后台来获得的,或者从数据库,或者从配置文件,若是加上复杂的权限控制就得每次都到后台取一次了,
  而从后台获得这些数据的话通常经常使用的是以ajax请求取得json格式的数据,而后在页面上就能够很是方便的使用了,可是使用ajax请求的时候
  就会有一个问题出现了,那就是通常的ajax请求都是异步的,这时候,页面不会等ajax的请求返回就已经往下面执行了,等ajax请求返回的时候
  页面已经不能再使用其返回的数据进行操做了,因此这个时候须要使用ajax的同步请求了!ajax的同步请求很简单只要在ajax的请求的时候加上一个
  区别于ajax请求类型的参数就好了,通常都是async,像JQuery的用法就是这样的:$.ajax( {
                url : "module/geneMenu",
                async : false//同步,等这个请求完成后才继续往下执行,这样myTree才能使用返回来的数据
            });cookie

使用了ajax的同步请求之后,页面在解析到ajax请求的时候就会等ajax请求返回之后再继续往下面执行,这样就能够利用
  ajax的返回值来进行对dTree的node的操做了!异步

 

还有一个问题就是咱们经常会利用Frame来将页面进行布局成左边是menu栏,而右边是主页面,上边是一些基本信息这样的结构
  这样咱们就须要在点击menu栏的叶子结点时,在mainFrame里面显示请求返回后的内容,其实要实现这个要求挺简单的,只须要
  把node的target指定为mainFrame的name便可
async

相关文章
相关标签/搜索