AdminLTE介绍和zTree的简单使用

一.AdminLTE介绍

1.介绍

AdminLTE是一个开源的后台控制面板和仪表盘 WebApp 模板,是建立在Bootstrap3框架和JQuery之上的开源模板主题工具,它提供了一系列响应的组件,并内置了多个模板页面,包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。通过AdminLTE,我们可以快速的创建一个响应式的Html5网站。

2.下载

我们可以到其官网下载:https://adminlte.io/

也可选择中文版本的地址:http://adminlte.la998.com/index2.html

其中有一些模板是收费的,当然也有挺多免费的,看需求自行选择。

3.AdminLTE的简单使用

AdminLTE的使用并不难,和使用Bootstrap类似。我们将下载的文件导入到我们的工程当中,进行适当的删改即可。当然,我们也可以只使用其中的一小部分,甚至是一个小组件。详见其官方文档:

中文文档:http://adminlte.la998.com/documentation/#introduction

二.zTree的简单使用

1.简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的 Web 显示、权限管理等等。

特点

  • zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载。

  • 采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀。

  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器。

  • 支持 JSON 数据。

  • 支持静态和 Ajax 异步加载节点数据。

  • 支持任意更换皮肤 / 自定义图标(依靠 css)。

  • 支持极其灵活的 checkbox 或 radio 选择功能。

  • 提供多种事件响应回调。

  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟。

  • 在一个页面内可同时生成多个 Tree 实例。

  • 简单的参数配置实现 灵活多变的功能。

2.基本使用

第一步:导入zTree组件

    <link rel="stylesheet" href="${ctx }/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" /><script type="text/javascript" src="${ctx }/components/zTree/js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.core-3.5.min.js"></script><script type="text/javascript" src="${ctx }/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

    第二步:编写页面
    script

      <script type="text/javascript"> // 1.设置树的配置信息 var setting = { check: { // 复选框可用 enable: true }, data: { // 定义使用简单json数据格式,如下所示: simpleData: { enable: true } } }; /** 简单json数据格式: * [{ id:11, pId:1, name:"系统", checked:true}, { id:12, pId:1, name:"财务",checked:false}] * 当前项id 父项id 名称 是否勾选 */
      // 2.页面加载完毕后发起异步请求获得json格式的数据 $(document).ready(function(){ $.get("${ctx}/system/role/initModuleData.do?roleid=${role.id}",function(data) { initZtree(data); },"json"); });
      // 3.定义zTree树 var zTreeObj; // 4.根据获取到的json数据展示ztree树 function initZtree(data) { //第一个参数:树显示的位置,第二个参数:树的配置信息,第三个参数:要展示的数据 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data); zTreeObj.expandAll(true);//true:展开所有节点 }
      // 5.实现权限分配(zTree树复选框提交时) function submitCheckedNodes() { //1.获取所有的勾选权限节点 var nodes = zTreeObj.getCheckedNodes(true);//true:被勾选,false:未被勾选 //2.循环nodes,获取每个节点的id, 拼接模块字符串(以,分隔) var moduleIds = ""; for(var i=0;i<nodes.length;i++) { moduleIds += nodes[i].id +","; } if(moduleIds.length>0) { //substr : 字符串剪切 0 :起始位置, 第二个参数:最大长度 //123456789, 0 9 moduleIds = moduleIds.substr(0,moduleIds.length-1); } $("#moduleIds").val(moduleIds); // 设置表单隐藏域的值 $("#icform").submit(); // 提交表单 }</script>

      树菜单

        <!-- 树菜单 --><form name="icform" id="icform" method="post" action="${ctx}/system/role/updateRoleModule.do"> <input type="hidden" name="roleid" value="${role.id}"/> <input type="hidden" id="moduleIds" name="moduleIds" value=""/> <div class="content_wrap"> <div class="zTreeDemoBackground left" style="overflow: visible"> <!-- 展示zTree树的地方 --> <ul id="treeDemo" class="ztree"></ul> </div> </div></form><!-- 树菜单 /-->

        第三步:Controller返回正确的json格式数据

        Tips: 分析页面所需json数据格式为:

        [{ id:11, pId:1, name:"系统", checked:true}, { id:12, pId:1, name:"财务",checked:false}]

        因此可以将数据查出来后自行转为json格式的。也可通过sql语句直接查出我们所需要的数据格式:

          <!-- 查找角色权限的功能模块(一条语句,包含所有模块及当前角色的模块权限标记)注意返回的是map类型 --><select id="findTreeJson" parameterType="string" resultType="map"> select module_id as id , parent_id as pId, name as name, case when module_id in (select module_id from pe_role_module where role_id = #{roleId}) then 'true' else 'false' end as checked from ss_module;</select>

          Controller返回json数据

            //页面加载完毕后直接发起异步请求初始化 权限菜单树@RequestMapping(value = "/initModuleData",name = "加载角色权限")public @ResponseBody List initModuleData(@RequestParam("roleid") String id){ List<Map> list = roleService.findTreeJson(id); return list;}

            这样,页面就可以根据我们的json数据动态的生成一个zTree树啦!

            (0)

            相关推荐