写在前面
jQuery的 zTree插件
关键代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="/context/mytags.jsp" %> DOCTYPE html > <html> <head> <title>菜单列表title> <t:base type="jquery">t:base> <link rel="stylesheet" type="text/css" href="plug-in/ztree/css/metroStyle.css"> <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js">script> <script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js">script> <script type="text/javascript"> var setting = { check: { enable: false,// 是否启用复选框 chkboxType: {"Y": "", "N": ""} }, data: { simpleData: { enable: true } }, callback: { onExpand: zTreeOnExpand } }; //加载展开方法 function zTreeOnExpand(event, treeId, treeNode) { var treeNodeFuncId = treeNode.id; $.post( 'whiteListController.do?getMenuInfo', {parentFuncId: treeNodeFuncId}, function (data) { var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); var tree = $.fn.zTree.getZTreeObj("menuSelect"); if (!treeNode.zAsync) { tree.addNodes(treeNode, dbDate); treeNode.zAsync = true; } else { tree.reAsyncChildNodes(treeNode, "refresh"); } } } ); } //首次进入加载level为1的 $(function () { $.post( 'whiteListController.do?getMenuInfo', function (data) { var d = $.parseJSON(data); if (d.success) { var dbDate = eval(d.msg); $.fn.zTree.init($("#menuSelect"), setting, dbDate); } } ); }); script> head> <body style="overflow-y: auto" scroll="no"> <ul id="menuSelect" class="ztree" style="margin-top: 30px;">ul> body> html>
jsp代码解读
1."" 是必需的, 进行 W3C 申明
DOCTYPE html >
2.zTree 的容器 className 设置为 "ztree"
<ul id="menuSelect" class="ztree" style="margin-top: 30px;">ul>
3.然后看js部分
3.1页面初始化执行代码
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
init方法为 zTree 初始化方法,创建 zTree 必须使用此方法
1、页面需要进行 W3C 申明,例如:。
2、需要首先加载 jquery-1.4.2.js 或其他更高版本的 jQuery 。
3、需要加载 jquery-ztree.core-3.0.js,如果需要用到 编辑功能 或 checkbox / radio 还需要分别加载 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。
4、需要加载 zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件。
5、如果需要使用自定义图标请参考相应的Demo。
6、请注意设置 zTree 的容器样式 class="ztree",其中 "ztree" 这个 className,可以根据需要随意修改,别忘了修改 css 中对应名字就是了,对于容器如果需要增加其他特殊样式,可根据自己的需要进行修改。
该init方法参数说明(obj, zSetting, zNodes)三个参数
objjQuery Object
用于展现 zTree 的 DOM 容器
zSettingJSON
zTree 的配置数据,具体请参考 “setting 配置详解”中的各个属性详细说明
zNodesArray(JSON) / JSON
zTree 的节点数据,具体请参考 “treeNode 节点数据详解”中的各个属性详细说明
1、v3.x 支持单独添加一个节点,即如果只新增一个节点,不用必须包在数组中
2、如果需要异步加载根节点,可以设置为 null 或 [ ]
3、使用简单数据模式,请参考 setting.data.simpleData 内的属性说明
返回值JSON
zTree 对象,提供操作 zTree 的各种方法,对于通过 js 操作 zTree 来说必须通过此对象
如果不需要自行设定全局变量保存,可以利用 $.fn.zTree.getZTreeObj 方法随时获取
3.2节点展开执行方法即setting中设置的callback函数zTreeOnExpand
该回调函数共有三个参数(event, treeId, treeNode)
参数说明
eventjs event 对象
标准的 js event 对象
treeIdString
对应 zTree 的 treeId,便于用户操控
treeNodeJSON
被展开的节点 JSON 数据对象
被展开的节点json对象可以获取到该节点id, 传到后台通过判断该节点是否为父节点(即是否有子节点), 如果有子节点则后台查询出的子节点信息由前台接收后通过addNodes方法添加子节点.或通过reAsyncChildNodes方法强行异步加载父节点的子节点(parentNode, reloadType, isSilent, callback)
addNodes方法参数说明(parentNode, [index], newNodes, isSilent)
parentNodeJSON
指定的父节点,如果增加根节点,请设置 parentNode 为 null 即可。
请务必保证此节点数据对象 是 zTree 内部的数据对象
[index]Number
新节点插入的位置(从 0 开始)
index = -1 时,插入到最后
此参数可忽略
v3.5.19+
newNodesJSON / Array(JSON)
需要增加的节点数据 JSON 对象集合,数据只需要满足 zTree 的节点数据必需的属性即可,详细请参考“treeNode 节点数据详解”
1、v3.x 支持单独添加一个节点,即如果只新增一个节点,不用必须包在数组中
2、使用简单数据模式,请参考 setting.data.simpleData 内的属性说明
isSilentBoolean
设定增加节点后是否自动展开父节点。
isSilent = true 时,不展开父节点,其他值或缺省状态都自动展开。
返回值Array(JSON)
返回值是 zTree 最终添加的节点数据集合
如果 newNodes 是单个节点数据 JSON,返回值也是将其包在 Array 内
请务必记住:返回值中的数据对象 是 newNodes 被 clone 后的,所以绝对不相等!
reAsyncChildNodes方法参数说明(parentNode, reloadType, isSilent, callback)
parentNodeJSON
指定需要异步加载的父节点 JSON 数据
1、parentNode = null 时,相当于从根节点 Root 进行异步加载
2、parentNode.isParent = false 时,不进行异步加载
3、请务必保证此节点数据对象 是 zTree 内部的数据对象
reloadTypeString
reloadType = "refresh" 表示清空后重新加载。
reloadType != "refresh" 时,表示追加子节点处理。
isSilentBoolean
设定异步加载后是否自动展开父节点。
isSilent = true 时,不展开父节点,其他值或缺省状态都自动展开。
callbackfunction
刷新完成后的回调函数。
返回值无
目前无任何返回值
java代码解读
/** * 查询菜单信息 * @param request * @return */ @RequestMapping(params = "getMenuInfo") @ResponseBody public AjaxJson getMenuInfo(HttpServletRequest request) { AjaxJson j = new AjaxJson(); String parentFuncId = request.getParameter("parentFuncId"); CriteriaQuery cq = new CriteriaQuery(TSFunction.class); if (parentFuncId != null) { cq.eq("TSFunction.id", parentFuncId); } else { cq.eq("functionLevel", Short.valueOf("0")); } cq.addOrder("functionOrder", SortDirection.asc); cq.add(); // 获取装载数据权限的条件HQL cq = HqlGenerateUtil.getDataAuthorConditionHql(cq, new TSFunction()); cq.add(); ListfunctionList = systemService.getListByCriteriaQuery(cq, false); Collections.sort(functionList, new NumberComparator()); List
该方法是从数据表中查询菜单信息并转为json传给前台.
当parentFuncId为空即初始时查询的是一级菜单, 当不为空时即前台点击某个节点将该节点id传到后台查询该节点下的子节点信息同样转为json传给前台.
这么着一看也没太复杂, 接下来看一下通过Vue.js加载树.
效果:https://refined-x.com/Vue-Giant-Tree/
源码:https://github.com/tower1229/Vue-Giant-Tree
感谢
-
http://www.treejs.cn/v3/api.php