bootstrap treeview 樹形數據生成

這個問題還是挺經典的，后台只是負責查出所有的數據，前台js來處理數據展示給treeview;
show you the code below:
<script>
    $(function () {
        getData();

    })
    var displaySeach = function(){
        if($("#search-page .x_content").is(":hidden"))
            $('#search-page .x_content').slideDown(300);
        else
            $('#search-page .x_content').slideUp(300);
    }
    function getTree() {
        //節點上的數據遵循如下的格式：
        var tree = [{
            text: "場地列表", //節點顯示的文本值   string
            icon: "glyphicon glyphicon-play-circle", //節點上顯示的圖標，支持bootstrap的圖標 string
            selectedIcon: "glyphicon glyphicon-ok", //節點被選中時顯示的圖標     string
            color: "#ff0000", //節點的前景色    string
            backColor: "#1606ec", //節點的背景色    string
            selectable: true, //標記節點是否可以選擇。false表示節點應該作為擴展標題，不會觸發選擇事件。 string
            state: { //描述節點的初始狀態   Object
                checked: true, //是否選中節點
                /*disabled: true,*/ //是否禁用節點
                expanded: true, //是否展開節點
                selected: true //是否選中節點
            }
        }]
        return tree;
    }

    function getData() {
        $.ajax({
            type: "GET",
            url: "/serverPoint/index",
            success: function (data) {
                console.log("data", data);
                for (var k = 0; k < data.length; k++) {
                    data[k]['text'] = data[k]['Name'];
                }
                var tree = [{
                    text: "場地列表", //節點顯示的文本值   string
                    icon: "glyphicon glyphicon-play-circle", //節點上顯示的圖標，支持bootstrap的圖標 string
                    selectedIcon: "glyphicon glyphicon-ok", //節點被選中時顯示的圖標     string
                    color: "#ff0000", //節點的前景色    string
                    backColor: "#1606ec", //節點的背景色    string
                    selectable: true, //標記節點是否可以選擇。false表示節點應該作為擴展標題，不會觸發選擇事件。 string
                    state: { //描述節點的初始狀態   Object
                        checked: true, //是否選中節點
                        /*disabled: true,*/ //是否禁用節點
                        expanded: true, //是否展開節點
                        selected: true //是否選中節點
                    },
                    nodes: toTree(data)
                }]

                $('#tree').treeview({
                    data: tree,//節點數據
                    showBorder: true, //是否在節點周圍顯示邊框
                    showCheckbox: true, //是否在節點上顯示復選框
                    showIcon: true, //是否顯示節點圖標
                    highlightSelected: true,
                    levels: 2,
                    multiSelect: true, //是否可以同時選擇多個節點
                    showTags: true
                });
            },
            error: function () {
                    $.pnotify({
                        title: '失敗提醒',
                        text: '請求服務器失敗',
                        type: 'error',
                        nonblock: {
                            nonblock: false
                        },
                    });
            }
        });

    }

    function toTree(data) {
        // 刪除 所有 children,以防止多次調用
        data.forEach(function (item) {
            delete item.nodes;
        });

        // 將數據存儲為 以 id 為 KEY 的 map 索引數據列
        var map = {};
        data.forEach(function (item) {
            map[item.ID] = item;
        });
//        console.log(map);
        var val = [];
        data.forEach(function (item) {
            // 以當前遍歷項，的pid,去map對象中找到索引的id
            var parent = map[item.ParentID];
            // 好繞啊，如果找到索引，那么說明此項不在頂級當中,那么需要把此項添加到，他對應的父級中
            if (parent) {
                (parent.nodes || (parent.nodes = [])).push(item);
            } else {
                //如果沒有在map中找到對應的索引ID,那么直接把 當前的item添加到 val結果集中，作為頂級
                val.push(item);
            }
        });
        return val;
    }

    $('.place-choice').on('change', function () {
        var cityNum = $(this).val();
        console.log("cityNum:", cityNum);
        addPlaceSelect($(this), cityNum);
    });

    var addPlaceSelect = function (obj, cityNum) {
        console.log("addPlaceSelect....................");
        obj.nextAll().remove();
        $.ajax({
            url: '/serverPoint/getChild/' + cityNum,
            type: 'get',
            data: {},
            success: function (data) {
                if (data) {
                    if (data.length > 0) {
                        console.log('data.length > 0');
                        var select = $('<select></select>');
                        select.addClass('select2_single form-control place-choice').css('margin-right', '5px').css('width', '100px').css('float', 'left');
                        $('.place-choice-td').append(select);
                        select.on('change', function () {
                            var cityNum = $(this).val();
                            addPlaceSelect($(this), cityNum);
                        });
                        var str = '<option value="">請選擇</option>';
                        select.append(str);
                        for (var i = 0; i < data.length; i++) {
                            var str = '<option value="' + data[i]['ID'] + '">' + data[i]['Name'] + '</option>';
                            select.append(str);
                        }
                    }
                } else {
                    $.pnotify({
                        title: '失敗提醒',
                        text: '添加分類失敗',
                        type: 'error',
                        nonblock: {
                            nonblock: false
                        },
                    });
                }
            },
            error: function () {
                $.pnotify({
                    title: '失敗提醒',
                    text: '請求服務器失敗',
                    type: 'error',
                    nonblock: {
                        nonblock: false
                    },
                });
            }
        });

    }

    function addNode(pid=null) {
        var parentId='';
        if (pid == -1) {
            var text = $('#postition-name').val();
            console.log('text:',text);
            parentId = 0;
            if (text == "" || text.length == 0) {
                $.pnotify({
                    title: '溫馨提醒',
                    text: '請先填寫名稱',
                    type: 'error',
                    nonblock: {
                        nonblock: false
                    },
                });
                return;
            }
        } else {
            parentId = $('.place-choice-td select:last-child').val();
            console.log(parentId);
            var text = $('#sub-postition-name').val();
            if (parentId == "" || parentId.length == 0) {
                $.pnotify({
                    title: '溫馨提醒',
                    text: '請先選擇場景',
                    type: 'error',
                    nonblock: {
                        nonblock: false
                    },
                });
                return;
            }
            if (text == "" || text.length == 0) {
                $.pnotify({
                    title: '溫馨提醒',
                    text: '請先填寫名稱',
                    type: 'error',
                    nonblock: {
                        nonblock: false
                    },
                });
                return;
            }
        }
        $.ajax({
            url: '/serverPoint/add',
            type: 'post',
            data: {
                'parentId': parentId,
                'name': text
            },
            success: function (data) {
                $.pnotify({
                    title: '成功提醒',
                    text: '添加成功',
                    type: 'success',
                    nonblock: {
                        nonblock: false
                    },
                });
                getData();
            },
            error: function () {
                $.pnotify({
                    title: '失敗提醒',
                    text: '請求服務器失敗',
                    type: 'error',
                    nonblock: {
                        nonblock: false
                    },
                });
            }
        });

    }
    /* function getTree() {
         //節點上的數據遵循如下的格式：
         var tree = [{
             text: "Node 1", //節點顯示的文本值    string
             icon: "glyphicon glyphicon-play-circle", //節點上顯示的圖標，支持bootstrap的圖標    string
             selectedIcon: "glyphicon glyphicon-ok", //節點被選中時顯示的圖標    string
             color: "#ff0000", //節點的前景色       string
             backColor: "#1606ec", //節點的背景色       string
             href: "#http://www.baidu.com", //節點上的超鏈接
             selectable: true, //標記節點是否可以選擇。false表示節點應該作為擴展標題，不會觸發選擇事件。    string
             state: { //描述節點的初始狀態  Object
                 checked: true, //是否選中節點
                 /!*disabled: true,*!/ //是否禁用節點
                 expanded: true, //是否展開節點
                 selected: true //是否選中節點
             },
             //tags: ['標簽信息1', '標簽信息2'], //向節點的右側添加附加信息（類似與boostrap的徽章）    Array of Strings
             nodes: getData()
         }]
         return tree;
     }*/
    /*function getData(){
        $.ajax({
            type: "GET",
            url: "/serverPoint/index",
            success:function(data){
                console.log(JSON.stringify(data));
                return JSON.stringify(data);
            },
            error:function() {
            }
        });

    }*/
</script>