jQuery通讯录树形节点

 查看演示  website  立即下载

数据结构如下：

var obj = {
    "childList": [
        {
            "id": 2,
            "name": "行政部门",
            "parentId": 1,
            "parentIds": "0,1,",
            "childList": [
                {
                    "childList": [],
                    "id": 4,
                    "name": "校长室",
                    "parentId": 2,
                    "parentIds": "0,1,2,",
                    "userList": [
                    {
                    "id": 111,
                   "realName": "杨武1",
                   "userName": "admin",
                   "uuid": "uuidtest1"
               }
                    ]
                },
                {
                    "childList": [],
                    "id": 5,
                    "name": "德育处",
                    "parentId": 2,
                    "parentIds": "0,1,2,",
                    "userList": [
                    {
                    "id": 111,
                   "realName": "杨武(test)2",
                   "userName": "yang",
                   "uuid": "uuidtest2"
               },
               {
               "id": 222,
                   "realName": "杨武(test)3",
                   "userName": "yang",
                   "uuid": "uuidtest2"
               }
                    ]
                }
            ],
            "userList": [
                {
                "id": 333,
                    "realName": "杨武s",
                    "userName": "admin",
                    "uuid": "uuidtest1"
                },
                {
                "id": 444,
                    "realName": "杨武(test)s",
                    "userName": "yang",
                    "uuid": "uuidtest2"
                }
            ]
        },
   {
            "id": 3,
            "name": "学科组",
            "parentId": 1,
            "parentIds": "0,1,",
            "childList": [
                {
                    "id": 6,
                    "name": "文科组",
                    "parentId": 3,
                    "parentIds": "0,1,3,",
                    "childList": [
                    {
                   "id": 6,
                   "name": "语文组",
                   "parentId": 3,
                   "parentIds": "0,1,3,",
                   "childList": [
                   
                   ],
                   "userList": [
                   {
                   "id": 555,
                   "realName": "杨武语文",
                   "userName": "admin",
                   "uuid": "uuidtest1"
               }
                   ]
               },
               {
                   "id": 6,
                   "name": "英语组",
                   "parentId": 3,
                   "parentIds": "0,1,3,",
                   "childList": [],
                   "userList": [
                   {
                   "id": 444,
                   "realName": "杨武英语",
                   "userName": "admin",
                   "uuid": "uuidtest1"
               },
               {
               "id": 777,
                   "realName": "杨武(test)",
                   "userName": "yang",
                   "uuid": "uuidtest2"
               }
                   ]
               }
                    ],
                    "userList": [
                    {
                    "id": 888,
                   "realName": "杨武",
                   "userName": "admin",
                   "uuid": "uuidtest1"
               },
               {
               "id": 999,
                   "realName": "杨武(test)",
                   "userName": "yang",
                   "uuid": "uuidtest2"
               }
                    ]
                },
                {
                    "id": 6,
                    "name": "理科组",
                    "parentId": 3,
                    "parentIds": "0,1,3,",
                    "childList": [],
                    "userList": [
                    {
                    "id": 1010,
                   "realName": "杨武",
                   "userName": "admin",
                   "uuid": "uuidtest1"
               },
               {
               "id": 1111,
                   "realName": "杨武(test)",
                   "userName": "yang",
                   "uuid": "uuidtest2"
               }
                    ]
                }
       ],
            "userList": [
            {
            "id": 1212,
                    "realName": "杨武(test)",
                    "userName": "yang",
                    "uuid": "uuidtest2"
                }
            ]
        }
    ],
    "id": 1,
    "name": "天心岛小学部门",
    "parentId": 0,
    "parentIds": "0,",
    "userList": [
        {
        "id": 1313,
            "realName": "杨武",
            "userName": "admin",
            "uuid": "uuidtest1"
        }
    ]
}

1. 只需要根据树形结构数据就可以自动生成

PREVIOUS:
NEXT:
touchTouch响应式支持移动端相册展示效果
实用的loading插件