<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;
}