bootstrap ace treeview树表

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

时间: 2024-10-06 23:51:57

bootstrap ace treeview树表的相关文章

在bootstrap ace样式框架上修改的后台管理型模板

后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstrap ace的后台管理模板,觉得挺漂亮的,所以拿来修改了下,以前是单页型的页面,每个页面都有导航什么的,现在把导航做成公共的了,然后在顶部添加了tab页,双击tab页关闭当前页面,tab页里的内容能够自适应了,然后顺便排列了下表单,差不多就这样,拿出来共享下,觉得不错的给个赞哈..嘿嘿. 下载地址:h

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

前言 前端时间刚开始接触Hangfire就翻译了一篇官方的教程[翻译+山寨]Hangfire Highlighter Tutorial,后来在工作中需要实现一个异步和定时执行的任务管理平台,就结合bootstrap ace模板和hangfire实现了一下.效果图如下: 遇到的坑 1.Hangfire的任务持久化很耗性能 生产环境部署时数据库Hangfire相关表已经手动创建好,可能忽略了哪些东西,站点运行时还是要创建,因为DBA给的权限没有Create所以报错了.最好的方案是给个大点的权限让Ha

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

Bootstrap系列 -- 12. 水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form>元素是使用类名“form-horizontal”. 2.配合Bootstrap框架的网格系统. 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1.设置表单控件padding和margin值. 2.改变“form-group”的表现形式,类似于网格系统的

bootstrap的treeview checked属性 ----解决方案

今天在开发过程中遇到了两个小问题,因为在做树形结构展示,用的是bootstrap的treeview,在获取json data的时候有几点需要注意 1)"pid":5,"id":4,"text":"xx"  这三个属性是必须要获取到的,其中pid为父节点id,id为该条数据的id,text为你要显示的文本 2)"state":{"checked":true}  state属性 其中chec

C# TreeView 树节点:递归显示整个系统盘符文件目录及文件

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; namespace Demo { /// <summary> /// 有关对于TreeView节点的填充的相关处理类 /// </summary> class TreeViewUtils { #region 有关将整个系统盘

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.com/preview/WB0B30DGR Ace模板功能介绍地址:http://www.cnblogs.com/txw1958/p/Ace-Responsive-Admin-Template.html 一.效果展示 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以

ext树表

如上是效果图: 做成简单的树表: 具体代码如下: 前台jsp: <%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ include file="/WEB-INF/views/commons/taglibs.jsp"%> <html> <head> <script type="text/javasc