1.看介面

2.介面html

      
            
       
                        Folders
       
            
       
                
        
                    
         
                        Mail (4)                        
          
                            
           
 Calendar 
                            
           
 Contacts 
                            
           
  Inbox (2) 
            
 
             
 jQWidgets (4) 
              
 
               
 Admin 
 
               
 Corporate 
 
               
 Finance 
 
               
 Other 
 
              
 
 
             
 Personal 
 
            
 
                            
           
  Deleted Items (6) 
            
 
             
 Today 
 
             
 Last Week 
 
             
 Last Month 
 
             
 Notes 
 
             
 Settings 
 
             
 Favorites 
 
            
 
                        
          
                    
                
        
            
       
        
      

3.css

ul{
      list-style:none;}#jqxExpander{
        width:300px;    float:left;    position:relative;    border: 2px solid  Black;}#jqxExpander div:first-child{
        height:30px;    line-height:30px;    background-color:Black;    color:White;}.imgPic{
         cursor:pointer;     float: left; margin-left: 5px;}.liPor{
         padding-left:22px;}

4.jquery 擴展

(function ($) {        $.extend({            jqxTree: {                info: {                    imgPic: "",                    iconright: "/images/icon-right.png",                    icondown: "/images/icon-down.png",                    jqxTreeobj: "#jqxTree"                },                ///这个函数是全部选择所有的元素                iniTree: function () {                    $(this.info.jqxTreeobj).find("ul li").addClass("liPor");                    $(this.info.jqxTreeobj).find("ul li[item-expanded]").removeClass("liPor");                    var jqxLi = $(this.info.jqxTreeobj).find("ul li[item-expanded]");                    var imgPic = this.info.imgPic;                    jqxLi.each(function () {                        var preImg = $(this).find("img").first();                        $(preImg).before(imgPic);                    });                    var iconright = this.info.iconright;                    var icondown = this.info.icondown;                    var jqxLi = $(this.info.jqxTreeobj).find(".imgPic");                    jqxLi.live('click',                                  function () {                                      var itemexpanded = $(this).parent().parent().find("li[item-expanded]").attr("item-expanded");                                                                           if (itemexpanded == "true") {                                          $(this).attr("src", iconright);                                          $(this).parent().parent().find("li[item-expanded]").attr("item-expanded", false);                                          $(this).parent().find("ul").css("display", "none");                                                                               }                                      else if (itemexpanded == "false") {                                          $(this).parent().parent().find("li[item-expanded]").attr("item-expanded", true);                                          $(this).attr("src", icondown);                                          $(this).parent().find("ul").css("display", "block");                                      }                                  }            );                },                iniIfo: function (info) {                    $.extend(this.info, info);                    this.iniTree();                }            }        });    })(jQuery);    $(document).ready(function () {        $.jqxTree.iniIfo({ jqxTreeobj: "#jqxTree" });    });

5.自己寫一下html，然後執行

    $(document).ready(function () {

        $.jqxTree.iniIfo({ jqxTreeobj: "#jqxTree" });

    });

6. 目錄樹全部採用ul li。下面有子項目的的全部用ul。同時li 加上

   <li item-expanded='true'>

html，可以由c#語言實現。