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>