zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    mysql主从复制
    gitlab安装
    nginx新加模块编译
    flask编写prometheus采集指标脚本
    powerdns的安装
    grafana中prometheus的查询语句
    python编写prometheus的监控指标
    maven常用命令参数
    flask架构中的方法学习
    Java命名规范
  • 原文地址:https://www.cnblogs.com/c-cccc/p/10060096.html
Copyright © 2011-2022 走看看