bootstrap ace treeview树表
html部分
<div class="widget-main padding-8" ><!-- overflow-y: scroll css样式，切割显示 -->
<ul ></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);
}
