【treeview】 基於jQuery的簡單樹形插件

【treeview】

效果圖：

　　前幾天想把后台的目錄結構通過樹形插件的方法反映到前端來，在網上搜了半天只找到了這個treeview，雖然不是很好看，不過還是夠用的。。用treeview的前提是要有jquery.treeview.js、jquery.treeview.css以及一些靜態文件。這些可以通過網上去下載jquery-treeview這個包，解壓縮后放到我們自己的項目下合適的目錄即可。要注意必須把整個目錄都拷貝過去，因為里面還有很多treeview要用的靜態圖片等等。然后在我們的HTML頁面上分別引用上面說的兩個文件。

　　另外注意treeview需要jQuery的支持，所以別忘了在用<script>標簽引用jquery.treeview.js之前先引用jquery.js

　　之后我們就可以進行靜態的treeview插件的編寫，基本的HTML結構如下所示：

<ul class="filetree" id="treeTest">
  <li><span class="folder">一級目錄</span>
    <ul>
        <li><span class="file">一級目錄下文件</span></li>
        <li><span class="folder">二級目錄</span>
            <ul>
                <li><span class="file">二級目錄下文件</span></li>
            </ul>
        </li>
        <li><span class="folder">第二個二級目錄</span>
        </li>
    </ul>
  </li>
</ul>

<script>
    $("ul#treeTest").treeview();
</script>

　　幾個class基本上是treeview文件定義的，最外面的ul的id是我自己定義的，因為光寫完html界面之后還沒有完成必須在js中手動調用一下treeview方法以初始化整個文件樹。另外這里引用jquery和treeview的幾個文件的部分都沒有寫出。

　　做出來的效果圖是這樣的：

 

　　treeview插件說這么多也就差不多了，其實困難的是如何把一個目錄轉化成上面那樣的html結構。我自己用python寫的一個小方法結合Jinja2的模板語言，把一個目錄名直接轉化成上面那樣的HTML結構，供參考。

 

Python函數（將一個目錄名對應的目錄轉化為一個序列化JSON格式的數據）：

def dir_to_json(root):
    simple_root = root.rsplit(os.sep,1)[1]
    if not os.path.isdir(root):
        raise Exception('%s is not a directory' % root)
    res = {simple_root:[]}
    for sub in lis(root):
        sub = sub.decode('gbk')
        if os.path.isfile(join(root,sub)):
            res.get(simple_root).append(sub)
        elif os.path.isdir(join(root,sub)):
            res.get(simple_root).append(dir_to_json(join(root,sub)))

    return res

　　簡單說明下產出物的結構，從根目錄開始是一個字典結構，其中key是目錄名，value是一個列表。列表中是直屬於該目錄的文件名。當直屬於該目錄的子目錄存在時，子目錄又是一個字典結構。就這樣的一個嵌套結構。然后把這樣一種結構的JSON數據傳遞給JINJA2模板：

    {% macro render(root) %}
        {% for rootname,subitems in root.iteritems() %}
            <li><span class="folder">{{ rootname }}</span>
                <ul>
                    {% for subitem in subitems %}
                        {% if not subitem is string %}
                            {{ render(subitem) }}
                        {% else %}
                            <li><span class="file">{{ subitem }}</span></li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    {% endmacro %}
    <ul class="filetree" id="packInfo">
        {{ render(packInfo) }}
    </ul>

　　用遞歸的方法來生成文件樹即可。這樣生成的文件樹有一個缺點，就是所有目錄都是打開狀態的。。如果嵌套目錄很多層的話會有點難看。可以通過加載時執行一些JS來修復

　　*一個小坑

　　上面這個macro，最好不要放在block里面，雖說macro和block是互相獨立的，但是這個macro涉及到了遞歸，可能jinja2機制上有什么缺陷。總之我把這個macro放在content -> page_content這兩重block下面之后老是報錯找不到render方法。。放到contentblock外面就恢復正常了