sim-tree

一個操作簡單的基於jquery寫的樹展示外掛,支援非同步展示子節點

沒有那麼多複雜功能，迴歸簡單

github地址

npm直接安裝

npm install sim-tree --save

直接下載

• 地址1

• 地址2

簡單使用

引入dist目錄下的simTree.css 和simTree.js

    <div id="tree"></div>
複製程式碼

    // 資料格式1 有children
    var list = [{
        "id": '350102000000',
        "pid": '',
        "name": "鼓樓區",
        "children": [
            {
                "id": '350103000000',
                "pid": '350102000000',
                "name": "東街口"
            }
        ]
    },
    {
        "id": '350103000000',
        "pid": '',
        "name": "臺江區"
    },
    {
        "id": '350104000000',
        "pid": '',
        "name": "倉山區"
    }];
    // 資料格式2 同級
    var list = [{
        "id": '350102000000',
        "pid": '',
        "name": "鼓樓區",
    },
    {
        "id": '350103000000',
        "pid": '350102000000',
        "name": "東街口"
    },
    {
        "id": '350103000000',
        "pid": '350101000000',
        "name": "寶龍"
    },
    {
        "id": '350103000000',
        "pid": '',
        "name": "臺江區"
    },
    {
        "id": '350104000000',
        "pid": '',
        "name": "倉山區"
    }];
    var tree = simTree({
        el: '#tree',
        data: list,
        //check: true, // true 開啟多選
        //linkParent: true, // 父子關聯
        // 點選節點觸發
        onClick: function (item) {
            console.log(item);
        },
        // 改變節點觸發
        onChange: function (item) {
            console.log(item);
        },
        // 樹生成後觸發
        done: function (data) {

        }
    });
    ----或者這樣----
    // 點選節點觸發
    tree.on('click', function (item) {
        console.log(item);
    });
    // 改變節點觸發
    tree.on('change', function (item) {
        console.log(item);
    });
    // 樹生成後觸發
    tree.on('done', function (item) {
        console.log(item);
    })
複製程式碼

簡單說明文件

• [github.com/linjingming…]