在開發中常常會使用到多級列表。為了不再重複寫構建列表的程式碼，可以規定列表的資料格式，並將列表封裝成一個可重用的模組，因為遞迴解析列表資料來源，所以支援任意多級，程式碼在最後給出連結。

效果（可拖動列表頭部標題，拉伸列表）：

要使用這個模組，傳入的資料要遵守以下格式

 var node0 = {
        "nodeLevels": 0,
        "type": 0,
        "isChecked": false,
        "nodeData": {"text": "廣東省", "headImgUrl": null}
        "sonNodes"
 
: [{
            "nodeLevels": 1,
            "type": 0,
            "sonNodes": []
    };

其中的 sonNodes一定要賦值為陣列，數組裡面可放置子節點,然後，節點放入陣列內，作為引數，例項化一個列表,如下

<script src="jquery-2.1.0.js"></script>
<script src="require.js"></script>
<script src="LZF.TreeView.js"></script>

   requirejs.config({
    paths: {
        "jquery": "jquery-2.1.0",
    }
});
require(['TreeView'], function (TreeView) {
    var dataSource = [node0];

    //'mBody'是treeView的父元素的id, 
    //dataSource 是列表的資料來源
    //第三個引數，是點選列表後的回撥，返回末節點的nodeData的資料和選中或未選中狀態

    var treeView = TreeView.initWithFrame('mBody', dataSource, function (text) {
        console.log(text);
    });
});
 

原始碼連結

原始碼連結