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

bootstrap ace treeview树表的更多相关文章

  1. hangfire+bootstrap ace 模板实现后台任务管理平台

    前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bo ...

  2. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  3. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  4. MVC遇上bootstrap后的ajax表单模型验证

    MVC遇上bootstrap后的ajax表单验证 使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了, ...

  5. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  6. winform中生成TreeView树

    无论是webform还是winform,TreeView都是常用功能.使用递归方法很方便. 下面分享一个小实例. 数据库中3个字段,分别是:ID,itemType_name,itemType_PID ...

  7. Bootstrap系列 -- 12. 水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  8. ext树表

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2UAAAHwCAIAAACpIFDdAAAgAElEQVR4nOy9f5Qb5ZnvWWQZlnO5Oc ...

  9. Asp.net MVC4 Knockoutjs BootStrap Ace NinJect Jqgrid sqlserver2008

    Asp.net MVC4 Knockoutjs  BootStrap Ace NinJect  Jqgrid sqlserver2008

随机推荐

  1. SSH服务器拒绝了密码 请再试一次

    应该是sshd的设置不允许root用户用密码远程登录. 修改: vim /etc/ssh/sshd_config 找到: # Authentication:LoginGraceTime 120Perm ...

  2. Sphinx+MySQL5.1x+SphinxSE+mmseg

    一.不停止mysql的情况下安装SphinxSE 1.确定mysql版本,下载对应源码包 此处下载5.1.69的mysql源码包 #wget ftp://ftp.ntu.edu.tw/pub/MySQ ...

  3. PHP关闭提示、打印配置

    打印配置 PHP.exe -i > Info.txt 关闭 PHP 提示的方法 搜索php.ini: error_reporting = E_ALL 改为: error_reporting = ...

  4. v2.0

    #include <stdio.h>#include <string.h>#include <ctype.h>typedef struct node{ char l ...

  5. Qt 之 使用 https发送 HTTP请求(使用OPENSSL库)

    一.简述 在使用Qt发送HTTP请求中一般使用的链接都是http://前缀,而有的服务器支持 https://前缀的链接,而Qt本身是支持https的,但是https访问需要用到SSL认证,而QT默认 ...

  6. zepto源码--classRE、maybeAddPx、children、defaultDisplay--学习笔记

    1.classRE 对获取className的操作,进行缓存.如果缓存中有,直接读取缓存中的值,如果没有,则先进行缓存的存储,再读取值. 利用前面变量定义的classCache={}进行缓存的操作,如 ...

  7. 兼容的获得event

    function getEvent(e) { var e=window.event || event; return e.srcElement || e.target; }

  8. ArcMap打开越来越慢

    原文:ArcMap打开越来越慢 今天终于找到原因了,原来是 C:\Users\Administrator\AppData\Roaming\ESRI\Desktop10.1\ArcToolbox下 Ar ...

  9. [LeetCode]题解(python):041-First Missing Positive

    题目来源 https://leetcode.com/problems/first-missing-positive/ Given an unsorted integer array, find the ...

  10. 配置 android环境

    1.如上图,下载最新adt-bundle: http://developer.android.com/sdk/index.html   里面集成了 eclipse,SDK,SDK Manager. 2 ...