树的创建与赋值jsp与js

jsp代码
<div class="col-xs-8 col-sm-8" id='treeContainer'>
                        <div class="tree-deom1" id='tree2'>
                            <ul>
                                <li class='tree-all'>所有文件</li>
                            </ul>
                        </div>
                    </div>

js代码
var i = 0; // 控制初始化行数
var a = 5; // 控制具体进行修改或者删除或者增加之中的哪个操作
var $table = $('#tabelrole');
var datar = null;

function nonedisplay() { // 显示为空状态
    $('#nonelist').show();
    $('#nonetable').show();
};

function nonedisappear() { // 隐藏为空状态
    $('#nonelist').hide();
    $('#nonetable').hide();
}

function disappearBut() { // 隐藏左上角的删除按钮

    $('#delrole').hide();
}

function displayBut() { // 显示左上角的删除按钮

    $('#delrole').show();
}

function displayTopMessage() { // 显示右上角详细信息
    $('#message').show();
}

function disapperTopMessage() { // 隐藏右上角详细信息
    $('#message').hide();
}

function displayTopAdd() { // 显示右上角新增配置
    $('#add').show();
}

function disapperTopAdd() { // 隐藏右上角新增配置
    $('#add').hide();
}

function disapperListRole() { // 隐藏右边列表
    $('#listrole').hide();
}

function displayListRole() { // 显示右边列表
    $('#listrole').show();
}

function disapperTable() { // 隐藏左边的table
    $('#tabelrole').hide();
}

function displayTable() { // 显示左边的table
    $('#tabelrole').show();
}

function setdata(data) { // 得到左边table里边的值向右边的list进行赋值

    $('#id').val(data.data[i].id);
    $('#name').val(data.data[i].name);
    $('#code').val(data.data[i].code);
    $('#description').val(data.data[i].description);
    var idArry = data.data[i].resourceIds;
    checkTree(idArry);

}

function checkTree(idArry) {
    var $ulLis = $('#tree2 .tree-all>ul').children('li');
    for (var k = 0; k < idArry.length; k++) {
        forInTree($ulLis, idArry[k]);
    }
    function forInTree($lis, idStr) {
        var saveIndex;
        for (var j = 0; j < $lis.length; j++) {

            if ($lis.eq(j).data('id') == idStr) {
                if ($lis.eq(j).attr('aria-selected') == "false") {// 判断我
                                                                    // 将要选中的那个是不是没有被选中
                    $lis.eq(j).children('a').click();// 让其选中
                }
                break;
            } else {
                if ($lis.eq(j).attr('class').indexOf('jstree-leaf') == -1) {// 判断有没有子节点
                    forInTree($lis.eq(j).children('ul').children('li'), idStr)
                }
            }
        }
    }
}


function cleanTree($trees) {

    for (var a = 0; a < $trees.length; a++) {
        if ($trees.eq(a).attr('aria-selected') == "true") {
            $trees.eq(a).children('a').click();// 让其取消
        }else{
            if($trees.eq(a).attr('class').indexOf('jstree-leaf') == -1){// 有子节点
                cleanTree($trees.eq(a).children('ul').children('li'))
            }
        }
    }
}

function getIds($trees,arry){
    for (var a = 0; a < $trees.length; a++) {
        if ($trees.eq(a).attr('aria-selected') == "true") {
            var id = $trees.eq(a).data('id');
            arry.push(id);
        }
        if($trees.eq(a).attr('class').indexOf('jstree-leaf') == -1){// 有子节点
            getIds($trees.eq(a).children('ul').children('li'), arry);
        }
    }       
}




function getdata($trees) {// 获得右边列表离得数据包括右边的table里选择的数据
    var ids=[];
    getIds($trees,ids);

    return {
        name : $('#name').val(),
        code : $('#code').val(),
        description : $('#description').val(),
        ids:ids
    }

}

function initTableRadio() {
    $('#tabelrole').bootstrapTable('destroy');
    $("#tabelrole").bootstrapTable({
        method : "get",
        striped : false,
        url : "./role/list.do",
        onClickRow : function(row, tr) {
            var $treeList= $('#tree2 .tree-all>ul').children('li');
            cleanTree($treeList)           
            tr.addClass('checkedTr');
            tr.siblings().removeClass('checkedTr');
            displayTopMessage();
            disapperTopAdd();
            i = tr[0].rowIndex - 1;
            $('#id').val(row.id);
            $('#name').val(row.name);
            $('#code').val(row.code);
            $('#description').val(row.description);                        
            checkTree(row.resourceIds);
        },
        onLoadSuccess : function(data) {

            if (data.length == 0) {
                nonedisplay();
                disapperListRole();
                disappearBut();
                disapperTable();
                displayTopMessage();
            } else {
                nonedisappear();
                displayTable();
                if (a == 0) { // 添加刷新时
                    displayBut();
                    disapperTopAdd();
                    displayTopMessage();
                    i = data.data.length - 1;
                    setdata(data);
                } else if (a == 3) { // 修改刷新时(也就是下边的$table.bootstrapTable("refresh",
                                        // a = 3);这个方法执行时)
                    displayTopMessage();
                    setdata(data);
                } else { // 刚进来页面或者删除刷新时
                    disapperTopAdd();
                    displayTopMessage();
                    setdata(data);
                }
            }
        }
    });
    $("#tabelrole").removeClass('table-hover');
}

$(function() {

    // 所有树操作
    var treeOperate = (function() {
        function createTree(data, $this) {
            $this.append('<ul></ul>');
            for (var i = 0; i < data.length; i++) {
                var li = '<li data-id ="' + data[i].id
                        + '" class="jstree-open">' + data[i].text + '</li>';
                $this.children('ul').append(li);
                var _this = $this.children('ul').children('li').eq(i);
                if (data[i].children && data[i].children.length > 0) {
                    createTree(data[i].children, _this);
                }
            }
        }
        ;

        function drawTree($this) {
            $this.jstree({
                plugins : [ "wholerow", "checkbox", "types" ],
                core : {
                    themes : {
                        responsive : !1
                    }
                },
                types : {
                    "default" : {
                        icon : "fa fa-folder icon-state-warning icon-lg"
                    },
                    file : {
                        icon : "fa fa-file icon-state-warning icon-lg"
                    }
                }
            })
        }
        ;

        var initTree = function() {
            var url = "./resource/tree.do?type=1"; // 菜单 type:1
            $.get(url, function(data) {
                // console.info(data.data)
                if (data.data.length == 0) {
                    $('#nonetable').show();
                    $('#nonelist').show();
                } else {
                    $('#nonetable').hide();
                    $('#nonelist').hide();
                }
                createTree(data.data, $('#tree2 .tree-all'));
                drawTree($('#tree2'));
                $('#tree2').find('i').click();
            });
        }

        return {
            "initTree" : initTree
        }
    })();

    treeOperate.initTree();

    initTableRadio();

    $('#addrole').click(function() {
        displayListRole();
        displayTopAdd();
        disapperTopMessage();
        $('#nonelist').hide();
        $('#name').val("");
        $('#code').val("");
        $('#description').val("");

        var $treeList= $('#tree2 .tree-all>ul').children('li');
        cleanTree($treeList)
    });

    $('#addsave').click(function() {
        var url = "./role/insert.do";
        var $treeList= $('#tree2 .tree-all>ul').children('li');        
        var option = getdata($treeList);
        console.log(option);
        etl.ajaxJson(url, option, function(data) {
            $table.bootstrapTable("refresh", a = 0);
        });
    });

    // 根据这个id得到修改这个按钮的值
    $('#modifysave').click(function() {
        var url = "./role/update.do";
        id = $('#id').val();
        var $treeList= $('#tree2 .tree-all>ul').children('li');    
        var data = getdata($treeList);
        data.id = id;
        console.log(data)
        var option = data;
        etl.ajaxJson(url, option, function(data) {
            $table.bootstrapTable("refresh", a = 3);
        });
    });

    $('#delrole').click(function() {
        var rows = $table.bootstrapTable("getSelections");
        if (rows.length < 1) {
            zdalert("提示", "请至少勾选一个!");
            return;
        }
        var ids = [];
        $.each(rows, function(index, row) {
            ids.push(row.id);
        });
        zdconfirm('确认提示', "确认删除任务？", function(r) {
            if (r) {
                var url = "./role/del.do";
                var option = {
                    ids : ids,
                };
                etl.ajaxJson(url, option, function(data) {
                    $table.bootstrapTable("refresh", {
                        silent : true
                    }, i = 0, a = 2);
                });
            }
        })

    });

})