bootstrap ace treeview树表

Posted 2020-07-05

html部分

<div class="widget-main padding-8" style="height:400px;overflow-y: scroll;"><!-- overflow-y: scroll css样式，切割显示 -->
　　<ul id="res_tree"></ul>
</div>

《jqgrid》部分

var allResTree;//所有菜单tree
$.ajax("${ctx!}/sys/role/getAllResTree", {
　　dataType: "json"
}).done(function(data) {
　　if(SQ.isFAIL(data)){
　　　　allResTree = null;
　　}else{
　　　　allResTree = data;
　　　　$("#role_auth #res_tree").ace_tree({
　　　　　　multiSelect: true,
　　　　　　cacheItems: true,
　　　　　　‘open-icon‘ : ‘ace-icon tree-minus‘,
　　　　　　‘close-icon‘ : ‘ace-icon tree-plus‘,
　　　　　　‘itemSelect‘ : true,
　　　　　　‘folderSelect‘: false,
　　　　　　‘selected-icon‘ : ‘ace-icon fa fa-check‘,
　　　　　　‘unselected-icon‘ : ‘ace-icon fa fa-times‘,
　　　　　　loadingHTML : ‘<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>‘,
　　　　　　dataSource: function(options, callback){
　　　　　　var $data = null;
　　　　　　if(!("text" in options) && !("type" in options)){
　　　　　　　　$data = allResTree;//the root tree
　　　　　　　　callback({ data: $data });
　　　　　　　　return;
　　　　　　}
else if("type" in options && options.type == "folder") {
if("children" in options)
$data = options.children || {};
else $data = {}//no data
}
if($data != null)//this setTimeout is only for mimicking some random delay
setTimeout(function(){callback({ data: $data });} ,0);
}
});
$("#role_auth #res_tree").tree(‘discloseAll‘);

}
});

$("#role_auth").on("show.bs.modal", function() {
$(‘#role_auth #res_tree‘).tree(‘deselectAll‘);
});
$("#role_auth").on("hidden.bs.modal", function() {
//$(this).removeData("bs.modal");
});

var authId;
function authRole(id){
if(!allResTree){
bootbox.alert("数据获取失败，请刷新页面或联系管理员！");
return;
}
$.ajax("${ctx!}/sys/role/getResListByRole/" + id, {
dataType: "json"
}).done(function(data) {
if(SQ.isFAIL(data)){
bootbox.alert(SQ.getMessage(data));
}else{
$("#role_auth").modal({
backdrop :‘static‘
});
authId = id;
//$(‘#role_auth #res_tree‘).tree(‘discloseAll‘);
$("#role_auth #res_tree").tree(‘selectAll‘, data);
//$("#role_auth #role_auth_title").html();
}
});
}

$("#role_auth #btn_save").on(‘click‘, function(){
var ids = $(‘#role_auth #res_tree‘).tree(‘selectedIds‘);
if(SQ.isNullOrEmpty(ids)){
bootbox.alert("请至少给他一个权限！");
return;
}
$("#role_auth #btn_save").prop("disabled", true);//按钮失效
$.ajax("${ctx!}/sys/role/updateRoleRes", {
async: false,type: "POST",
data: {roleId: authId, resIds: ids.toString()},
dataType: "json"
}).done(function(data) {
if(SQ.isFAIL(data)){
bootbox.alert("保存失败："+SQ.getMessage(data), function(){
$("#role_auth #btn_save").prop("disabled", false);
});
}else{
bootbox.alert("保存成功："+SQ.getMessage(data), function(){
$("#role_auth #btn_close").click();
$("#role_auth #btn_save").prop("disabled", false);
//$("#role_grid").jqGrid().trigger("reloadGrid");//重新载入数据
});
}
});
});

//全选
$("#role_auth #btn_all").on(‘click‘,function(){
$("#role_auth #btn_all").prop("disabled", true);//按钮失效
$.ajax("${ctx!}/sys/role/getResAll", {
dataType: "json"
}).done(function(data) {
if(SQ.isFAIL(data)){
bootbox.alert(SQ.getMessage(data));
}else{
$("#role_auth #res_tree").tree(‘selectAll‘, data);//根据ID将对应的选项填充选中
$("#role_auth #btn_all").prop("disabled", false);//按钮有效
}
});
});

后台代码

//所有可授权菜单
public void getAllResTree(){
　　List<MainRes> list = MainRes.dao.queryAllCommonRes();
　　renderJson(StringUtil.getTreeJson(list, MainRes.Id, MainRes.Name, MainRes.Pid));
}

数据库

public List<MainRes> queryAllCommonRes(){
　　String sql = "select id,ifnull(pid,0) as pid,name from main_res where is_delete = 0 and ifnull(permission,0) = 0 ";
　　return dao.find(sql);
}