`
多去尝试不同的事物
  • 浏览: 4194 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

使用zTree加载角色信息

阅读更多
最近在做一个将用户,角色,权限关联查询的功能,其中需要根据角色的id查询出该角色拥有的所有的权限,然后使用zTree控件进行展示数据思路如下
先要引入zTree的JS文件和样式,这个不通用,根据需要自己引入相应的zTree的js文件和样式文件
<link rel="stylesheet" href="${ctx}/static/plugin/ztree/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/static/plugin/ztree/js/jquery.ztree.all-3.5.min.js"></script>

JSP页面
<script> 
	var zNodes = ${authJson}; 
</script>

setting:zTree的属性
var setting = {
	check: {
		enable: true
	},
	data: {
		simpleData: {
			enable: true
		}
	}
};

zNodes:要加载的数据

使用以下方法加载:
var zTree;
$(document).ready(function(){
	$.fn.zTree.init($("#ztree"), setting, zNodes);
	zTree = $.fn.zTree.getZTreeObj("ztree")
});

根据角色id,获取权限ztree,并且默认选中对应的权限
function getAuthTreeByRole(roleid){
	$("#editAuthRoleId").val(roleid);
	$.post(webContext + "/platform/role/getAuthTreeByRole/"+roleid,function(data){
		//先删除原有的树结构
		$.fn.zTree.destroy("ztree");
		
		//根据获取的信息创建新的
		zNodes = jQuery.parseJSON(data);
		$.fn.zTree.init($("#ztree"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("ztree");
	});
}

以上代码只是提供思路,不能直接粘贴运行,如有疑问,期待你的回复交流
分享到:
评论

相关推荐

    ztree+dwr实现的异步加载树形菜单

    通过这样的方式,ZTree和DWR的结合使用,不仅提升了用户体验,减少了不必要的网络传输,还使得后台数据的更新与前台展示无缝对接,实现了高效、流畅的异步加载树形菜单。在实际项目中,这种技术组合广泛应用在权限...

    Ztree新增角色和编辑角色回显问题的解决

    1、新增角色使用ztree加载权限,由于权限不多,所以使用直接全部加载。 效果图: 具体涉及ztree代码: jsp中导入:/js/ztree/zTreeStyle.css和js/ztree/jquery.ztree.all-3.5.js 页面加入 ”functionTree” class=...

    ztree脚本、ztree下载

    ztree的核心特性在于其能够动态加载数据,支持多选、单选、拖放操作,并且提供了丰富的API接口供开发者进行自定义扩展。 1. **ztree脚本**:ztree的运行依赖于JavaScript,通过编写特定的脚本可以实现各种交互功能...

    zTree-zTree_v3-master.zip_ztree_多功能插件

    同时,zTree支持异步加载,这意味着在处理大量数据时,只需加载可视区域内的节点,大大提升了页面的响应速度。 在配置方面,zTree提供了丰富的参数设置,开发者可以根据实际需求调整节点的样式、行为以及交互效果。...

    ztree树形菜单demo

    3. **异步加载数据**:对于大型数据集,ZTree支持分页和懒加载,以提高用户体验和页面性能。 4. **数据驱动**:ZTree的数据模型是JSON格式,通过JSON数据结构来定义树形结构,便于与后台服务进行数据交换。 5. **...

    树结构zTree

    3. 权限管理:分配角色、用户的权限,展示权限树。 4. 自定义导航菜单:构建可展开收缩的多级导航菜单。 **六、zTree Demo示例** zTree的Demo示例可以帮助开发者快速理解和掌握其用法。通过实际操作,可以了解各种...

    ztree穿梭框.zip

    7. **zTree官网教程**:为了更好地理解和使用zTree,官方提供了详尽的教程和示例,涵盖了zTree的基本用法、高级功能以及常见问题解答。开发者可以参考这些资源,快速上手并解决遇到的问题。 总的来说,"ztree穿梭框...

    select2ztree.zip

    3. 创建ZTree:将ZTree的节点数据作为JSON对象传递给ZTree初始化方法,配置相应的参数,如显示检查框、是否启用异步加载等。 4. 结合Select2与ZTree:将ZTree的容器作为Select2的下拉菜单,通过监听ZTree的节点点击...

    zTree权限的赋予

    用户可以通过输入框指定新节点的名称、所属父节点等信息,然后通过zTree的API进行动态添加。例如,可以使用`treeObj.addNodes()`方法,传入父节点对象和新节点的数据对象,实现节点的动态插入。同时,确保添加的节点...

    ztree easyUI 权限分配

    同时,ZTree支持异步加载数据,对于大型权限系统来说,能够显著提高性能。 EasyUI则是一款基于jQuery的UI库,提供了诸如表格、下拉框、按钮、对话框等多种组件,使得开发者可以快速构建出美观且功能齐全的界面。在...

    JQuery zTree v3.5.47.zip

    - **异步加载**:对于大型数据集,zTree支持分页和按需加载,提高用户体验。 - **节点样式自定义**:可以自定义节点的图标、颜色等样式,满足个性化需求。 2. **API介绍:** - `init`:初始化zTree,设置基本...

    ztree插件实现树形控件

    - **权限管理**:使用ZTree构建角色与权限的关系树,便于用户分配和管理权限。 - **文件系统**:模拟文件夹和文件的层级关系,用户可以浏览、新建、删除和重命名。 - **组织结构**:展示公司内部的部门和员工结构...

    jQuery zTree 3.5.22

    1. **异步加载**:zTree支持懒加载机制,可以按需加载子节点数据,减少初次加载时的数据量,提高页面响应速度。 2. **复选/单选**:zTree提供了复选框和单选按钮功能,允许用户多选或单选节点,同时支持全选、反选...

    zTree插件包

    2. **异步加载**:zTree支持数据的异步加载,对于大数据量的树形结构,可以通过分页或按需加载的方式优化性能。 3. **操作反馈**:提供了丰富的节点操作事件,如点击、展开、收起、拖拽等,便于用户交互设计。 4. **...

    ztree全包 core +check + exhide

    zTree的核心功能、复选框功能和隐藏节点功能可以灵活结合使用,例如在权限管理中,可以根据用户角色权限隐藏部分节点,同时提供复选框进行多选操作。在文件管理系统中,可利用动态加载和隐藏功能,展现层级清晰的...

    zTree的demo及API

    - **权限控制**:zTree支持节点级别的权限控制,可以根据用户角色来决定其可见性或操作权限。 综上所述,zTree是一款强大的树形控件,通过深入理解和充分利用其API,开发者可以构建出满足各种需求的树形结构。在...

    zTree-zTree_v3-master.zip

    2. **数据动态加载**:通过异步加载技术,zTree_v3可以实现节点数据的按需加载,优化了用户体验,尤其在处理大量数据时,显著提高了性能。 3. **丰富的操作事件**:包括点击、展开、折叠、选择、取消选择等事件,...

    JQuery zTree v3.1

    7. **JSON数据格式**:zTree的数据通常以JSON格式传递,包含节点ID、文本、父ID、是否展开等信息。 ### 三、配置与使用 1. **初始化**:通过`$("#treeId").zTree(options)`方法初始化zTree,其中`options`是配置...

Global site tag (gtag.js) - Google Analytics