bootstrap file tree

$.ztreeList = function (set) {
    var opt = $.extend({
        lv: null || 6,
        BoxId: ""
    }, set || {})
    var arridarr=sessionStorage.getItem('areaIds').split(",");
    initTree(set.BoxId, _user.areaId, 0, arridarr);
    $("#" + set.BoxId).unbind('click').on('click', '.switch', function (e) {
        var _event = $(e.target), _li = _event.closest('li'), _area= sessionStorage.getItem('areaIds').split(",");
        if (!_li.hasClass('hasnone')) {
            if (!_event.hasClass('noline_open') && !_event.hasClass('ico_open')) {
                _li.find('span.noline_close').eq(0).removeClass('noline_close').addClass('noline_open');
                _li.find('span.ico_close').eq(0).removeClass('ico_close').addClass('ico_open');
                if (_li.children('ul').length > 0) {
                    _li.children('ul').show();
                } else {
                    var _Ullength = _event.parents('ul').length;
                    var _id = _event.attr('data-id');
                    initTree(_id, _id, _Ullength, _area);
                }
            } else {
                _li.children('ul').hide();
                _li.find('span.noline_open').eq(0).removeClass('noline_open').addClass('noline_close');
                _li.find('span.ico_open').eq(0).removeClass('ico_open').addClass('ico_close');
            }
        }
    })

    $("#" + set.BoxId).on('click', '.chk', function (e) {
        var _event = $(e.target);
        if (_event.hasClass('checkbox_false_full') || _event.hasClass('checkbox_false_part')) {
            _event.removeClass('checkbox_false_full').removeClass('checkbox_false_part').addClass('checkbox_true_full');
            _event.closest('li').find('ul>li>span.chk').removeClass('checkbox_false_full').addClass('checkbox_true_full')
        } else {
            _event.removeClass('checkbox_true_full').addClass('checkbox_false_full');
            _event.closest('li').find('ul>li>span.chk').removeClass('checkbox_true_full').addClass('checkbox_false_full')
        }
        
    })
    function initTree(A, ID, lv,ar) {
        var url = top.$.CONFIG.port + "Area/GetChildArea",
     data = { areaid: ID };
        request(url, function (json) {
            if (json.issuccess == true && json.status == 200) {
                var _html = "", _arr = json.data.list, _div = $("#" + A)
                for (var i = 0; i < _arr.length; i++) {
                    if (_arr[i].HasChild && lv < set.lv) {
                        if (ar.indexOf(_arr[i].Id) > 0) {
                            _html += '<li id="' + _arr[i].Id + '"><span class="button switch noline_close" data-id=' + _arr[i].Id + '></span><span class="button chk checkbox_true_full" data-id=' + _arr[i].Id + '></span>'
                          + '<a><span class="button ico_close"></span><span class="switch ico_close" data-id=' + _arr[i].Id + '>' + _arr[i].Name + '</span></a></li>'
                        } else {
                            _html += '<li id="' + _arr[i].Id + '"><span class="button switch noline_close" data-id=' + _arr[i].Id + '></span><span class="button chk checkbox_false_full" data-id=' + _arr[i].Id + '></span>'
                       + '<a><span class="button ico_close"></span><span class="switch ico_close" data-id=' + _arr[i].Id + '>' + _arr[i].Name + '</span></a></li>'
                        }
                    } else {
                        if (ar.indexOf(_arr[i].Id) > 0) {
                            _div.find('.chk').removeClass('checkbox_false_full').addClass('checkbox_false_part');
                            _html += '<li class="hasnone"><span class="button switch noline_open" style="visibility:hidden"></span><span class="button chk checkbox_true_full" data-id=' + _arr[i].Id + '></span>'
                         + '<a><span class="button ico_docu"></span><span data-id=' + _arr[i].Id + '>' + _arr[i].Name + '</span></a></li>'
                        } else {
                            _html += '<li class="hasnone"><span class="button switch noline_open" style="visibility:hidden"></span><span class="button chk checkbox_false_full" data-id=' + _arr[i].Id + '></span>'
                                                    + '<a><span class="button ico_docu"></span><span data-id=' + _arr[i].Id + '>' + _arr[i].Name + '</span></a></li>'

                        }
                    }
                   

                 
                }
                if (_div.children('ul').length == 0) {
                    _div.append('<ul>' + _html + '</ul>');
                }
            }
        }, 'GET', data);

    }
 
}

 

　//Click to get the data to be assigned to the selected cell from the table and store it in the cache

function assignment() {
var _rowid = $("#gridList").jqGrid('getGridParam', 'selrow');
var _ret = $("#gridList").jqGrid('getRowData', _rowid);
var _number = _ret.number;
var url = top.$.CONFIG.port + "Commercial/GetServiceAreas";
var data = {
commercialId: _number
};
$.ajax({
type: 'GET',
url: url,
date: date,
async:false,
dataType: "json",
success: function (response, status, xhr) {
if (status) {
top.$.loading(false);
}
sessionStorage.setItem("areaIds", response.data.areaIds);
// arrAreaIds = response.data.areaIds;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
top.$.loading(false);
top.$.modalMsg(errorThrown, "error");
}
});

 

Click the button to pop up a pop-up box and call the plugin 
$(".ViewServiceArea").on("click", function () { 
                $( '#itemTree' ).empty();
                assignment(); 
//load file tree
                $.ztreeList({ lv: 1, BoxId: "itemTree"});
           
            });