zoukankan      html  css  js  c++  java

  • dTree无限级文件夹树和JQuery同步Ajax请求

    曾经都是用JQuery对树的支持来实现文件夹树的，近来闲来无事就弄了下dTree，感觉其无限级文件夹还是挺好的，并且它的使用也比較方便，基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入，另外就是它默认的图片。当然这些图片都是能够自己指定的，它的css样式也能够自己改变的。

     

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

    Js代码
     收藏代码
    1. id //唯一标识。数字型  
    2. pid//父节点的id，假设是根结点那就仅仅能是-1，一般来讲仅仅有一个最顶层的根结点   
    3. name//结点的名字。字符串类型，在页面上显示出来的标签.   
    4. url//字符串类型，表示当点击该叶子结点的时候訪问哪个URL.   
    5. title//title,字符串类型。鼠标进入时显示的字符串.   
    6. target//字符串类型，超链接的目标位置.   
    7. icon //字符串类型，表示该结点图标的图片路径，不指定则使用默认的  
    8. iconOpen//结点打开时候的图片路径。不指定则使用默认的   
    9. open//boolean类型，表示初始状态是否是打开的   

     如：

    Js代码
     收藏代码
    1. mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');  

     

     

    有了node以后就是构建树了

    Java代码
     收藏代码
    1. //引入了dtree.js后，就能够使用new dTree()了  
    2. myTree = new dTree();//这样就新建了一个dTree了，  
    3. //新建了dTree以后就是把刚建的node给添进去了，  
    4. mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');  

     

    在最后还能够指定一些配置參数：

     

    Js代码
     收藏代码
    1. target//全部结点的目标   
    2. folderLinks//非叶子结点是否也是能够链接的，默认是true   
    3. useSelection//结点能否够被选择。默认true.   
    4. useCookies//是否使用cookies来记录当前树的状态，默认是true   
    5. useLines//是否用线来画树。默认是true   
    6. useIcons//是否使用图标来构建树，默认是true   
    7. useStatusText//是否在状态栏显示结点的名字。而不是在URL的位置显示，默认是false  
    8. closeSameLevel//是否同一时候仅仅能有一个目录处于打开状态。默觉得false。当为true的时候关闭全部的目录和打开全部的目录将不会起作用  
    9. inOrder//是否先加入父结点再加入子节点，  默觉得false，为true能够加快载入速度  
    10.   
    11. //比如:  
    12. mytree.config.target = "mytarget";  

     

    像这些结点的相关信息，我们一般都是要从后台来得到的，或者从数据库。或者从配置文件，假设加上复杂的权限控制就得每次都到后台取一次了，
      而从后台得到这些数据的话一般经常使用的是以ajax请求取得json格式的数据。然后在页面上就能够很方便的使用了，可是使用ajax请求的时候
      就会有一个问题出现了，那就是一般的ajax请求都是异步的。这时候。页面不会等ajax的请求返回就已经往以下运行了，等ajax请求返回的时候
      页面已经不能再使用其返回的数据进行操作了。所以这个时候须要使用ajax的同步请求了！ajax的同步请求非常easy仅仅要在ajax的请求的时候加上一个
      差别于ajax请求类型的參数即可了，一般都是async。像JQuery的使用方法就是这种：

    Java代码
     收藏代码
    1. $.ajax( {  
    2.                 url : "module/geneMenu",  
    3.                 async : false//同步。等这个请求完毕后才继续往下运行,这样myTree才干使用返回来的数据  
    4.             });  

     使用了ajax的同步请求以后，页面在解析到ajax请求的时候就会等ajax请求返回以后再继续往以下运行，这样就能够利用
      ajax的返回值来进行对dTree的node的操作了！

     

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

     

    以下是一段完整的代码：

    Html代码
     收藏代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.     <head>  
    4.         <title>menu</title>  
    5.   
    6.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    7.         <meta http-equiv="description" content="this is my page">  
    8.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    9.   
    10.         <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    11.         <link rel="stylesheet" type="text/css" href="css/dtree.css">  
    12.         <style type="text/css">  
    13.             html,body {  
    14.                 background:#afa;  
    15.             }  
    16.         </style>  
    17.         <script type="text/javascript" src="js/dtree.js"></script>  
    18.         <script type="text/javascript" src="js/jquery.js"></script>  
    19.     </head>  
    20.   
    21.     <body>  
    22.         <div>  
    23.         <script type="text/javascript">  
    24.           
    25.             myTree = new dTree('myTree');  
    26.             $.ajax( {  
    27.                 url : "module/geneMenu",  
    28.                 async : false,//同步，等这个请求完毕后才继续往下运行,这样myTree才干使用返回来的数据  
    29.                 dataType: "json",  
    30.                 success: function(myData) {  
    31.                     for ( var i = 0; i < myData.length; i++) {  
    32.                         var obj = myData[i];  
    33.                         //right是window.parent的一个frame的name  
    34.                         myTree.add(obj.id, obj.parentId, obj.name, obj.url, obj.name, "right");  
    35.                     }  
    36.                     document.write(myTree);  
    37.                 }  
    38.             });  
    39.             myTree.config.target = "right";//right是window.parent的一个frame的name  
    40.             myTree.config.useCookies = false;  
    41.             myTree.config.inOrder = true;  
    42.               
    43.         </script>  
    44.         </div>  
    45.     </body>  
    46. </html>  

     
  • 相关阅读:
    23种设计模式全解析
    Dubbo
    存储过程——存储过程与函数（四）
    ADO.NET- 基础总结及实例介绍
    存储过程——存储过程与视图（三）
    存储过程——增删改（二）
    简易三层架构详解
    Ado.Net实现简易（省、市、县）三级联动查询，还附加Access数据
    存储过程——介绍（一）
    SqlBulkCopy批量写入25万条数据只需3s
  • 原文地址：https://www.cnblogs.com/mfmdaoyou/p/6711041.html
Copyright © 2011-2022 走看看