日记-js树

<div class="page animation-fade">
    <div class="page-content">
        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="input-search" style="width:30rem">
                    <button type="button" class="input-search-btn">
                        <i class="icon wb-search" aria-hidden="true"></i></button>
                    <input class="form-control input-sm jstree-search" name="jstree_search" placeholder="快速查找..." type="text">
                </div>
                <div class="example-wrap">
                    <div class="example">
                        <div id="data"></div>
                    </div>
                </div>
            </div>
        </div>

        <%--悬浮按钮--%>
        <div class="panel area-jstree-buttons">
            <div class="panel-body">
                <div>
                    <button type="button" class="btn btn-block btn-success select-id" data-status="1"
                            data-url="${ctx}<%=Uri.SYS_AREA_JSTREE_SUBMIT%>">启用
                    </button>
                    <button type="button" class="btn btn-block btn-primary select-id" data-status="2"
                            data-url="${ctx}<%=Uri.SYS_AREA_JSTREE_SUBMIT%>">停用
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var areaJson = ${jsonArray};
    var $content = $("#admui-pageContent")

    $(function () {
        /*初始化jstree*/
        $('#data').jstree({
            'core': {
                'data': areaJson
            },
            plugins: ["checkbox", "search"]
        });
        
        
        $('.select-id').on('click', function () {
            var button = $(this);
            var buttonType = '';
            if($(this).data("status") == "1"){
                buttonType = 1
            }else{
                buttonType = 2
            }

            var status = $(this).data("status")
            var url = $(this).data("url")
            var lis = $('#data').find('li');
            var trues = new Array();
            $(this).removeClass("btn-primary btn-success")
            $(this).addClass("btn-dark")
            lis.each(function (index, obj) {
                /*获取jstree节点*/
                if ($(this).attr('aria-selected') == "true") {
                    trues.push($(this).children('a').children('span').text());
                    console.log($(this).children('a').children('span').text())
                }
            })
            console.log(trues)
            console.log(status);
            $.ajax({
                url: url,
                type: 'post',
                data: {
                    'areas': trues,
                    'status': status
                },
                success: function (data) {
                    if (data.status == 200) {
                        console.log(data.areaJson)
                        /*-----------开启jstree刷新-----------*/
                        $("#data").jstree().settings.core.data = data.areaJson;
                        $("#data").jstree().refresh(true);
                        /*-------------*/
                        button.removeClass("btn-dark")
                        if(buttonType == 1){
                            button.addClass("btn-success")
                        }else{
                            button.addClass("btn-primary")
                        }
                        toastr.success('区域设置更新成功！')
//
                    }
                }
            })
        })
        //搜索
        $(".input-search-btn").on("click",function(){
            $("#data").jstree(true).search($(".jstree-search").val());
        })
    })
</script>
/**
 * 区域管理启用停用
 */
@RequestMapping(value = Uri.SYS_AREA_JSTREE_SUBMIT)
@ResponseBody
public Object areasOnAndOff(HttpServletRequest request,String status){
    Map map  = request.getParameterMap();
    Integer sta = Integer.parseInt(status);
    String[] areas = (String[])map.get("areas[]");
    List<Long> parentIds = new ArrayList<Long>();
    //插入所有选中目标
    for(String s:areas){
        parentIds.add(Long.parseLong(s));
    }
    //查出所有区域
    List<SysAreaBean> allAreas = sysAreaService.findAllBeans();
    List<Long> result = sysAreaService.findAllSons(parentIds);

    //更新区域状态
    sysAreaService.changeStatus(sta,result);

    //更新jstree
    List<SysAreaBean> sysAreaBeans = sysAreaService.findAllBeans();
    List<JsTreeView> jsTreeViews = new ArrayList<JsTreeView>();
    JsTreeView jsTreeView = null;
    for(SysAreaBean s:sysAreaBeans){
        jsTreeView = new JsTreeView();
        jsTreeView.setId(s.getId().toString());
        if(s.getParentId() == null) {
            jsTreeView.setParent("#");
        }else{
            jsTreeView.setParent(s.getParentId().toString());
        }
        if(s.getStatus() == 1){
            jsTreeView.setText(s.getName()+"<span class='area-id'data-id='"+s.getId()+"'>"+s.getId()+"</span>"+" <p class='areaOpen'>已启用</p>");
        }else{
            jsTreeView.setText(s.getName()+"<span class='area-id'>"+s.getId()+"</span>"+" <p class='areaOff'>未启用</p>");
        }
        jsTreeViews.add(jsTreeView);
    }
    JSONArray jsonArray =JSONArray.fromObject(jsTreeViews);

    //返回数据
    Map<String ,Object> resultMap = new HashMap<String,Object>();
    map.put("areaJson",jsonArray);
    map.put("status",200);
    return map;
}