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: ‘添加分类失败‘,});                }            },error: function () {                $.pnotify({                    title: ‘失败提醒‘,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: ‘请先填写名称‘,});                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: ‘请先选择场景‘,});                return;            }            if (text == "" || text.length == 0) {                $.pnotify({                    title: ‘温馨提醒‘,});                return;            }        }        $.ajax({            url: ‘/serverPoint/add‘,type: ‘post‘,data: {                ‘parentId‘: parentId,‘name‘: text            },success: function (data) {                $.pnotify({                    title: ‘成功提醒‘,text: ‘添加成功‘,type: ‘success‘,});                getData();            },});            }        });    }    /* 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",success:function(data){                console.log(JSON.stringify(data));                return JSON.stringify(data);            },error:function() {            }        });    }*/</script>