bootstrap ace treeview树表

时间:2022-09-15 17:22:24

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