前端框架 (一)zTree 从数据库中动态加载树形菜单

2023-10-30

        这几天做动态菜单用到了这个插件,目前用的很广泛的一个开源框架,最新发布的QUI框架就是用这个插件开发的菜单部分,因此还是很值得深入研究和学习,通过使用感觉功能很丰富,好多函数不用自己开发和编写,官网上有很详尽的API可以参考,用着算顺手但学习使用的过程中也遇到了一些困难,听过反复测试和查资料都理解了,但也在思考一个问题,怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程度?

       这个不仅仅是一个树形结构的菜单,每个节点左边可以有一个复选框,看了看也挺简单的,只需要在setting里面配置一个checked属性即可。

       目前经验觉得这个用在组织结构、分类、尤其是权限,如果用这个插件完成会很完美和自己的业务逻辑相结合。

      原理是很容易理解就不过多说它的原理了,大致同ajax异步请求原理相同,看一遍介绍你也就明白了,这个框架全部是异步请求数据,提高了用户体验度。

       在学这个过程中,本人有如下几点浪费了点时间拿出来和大家分享一下,以便大家下次项目中使用更容易上手。

静态数据与动态数据

       这个框架支持XM、json等多种数据格式,建议大家使用json格式数据觉得效果好一些、加载的时候快一些,关于数据格式可以参考官网给的一些数据,官网上面给的都是一些假数据,如果动态生成菜单淡然需要从数据库里面查询出来,然后转换成json字符串了,需要自己解析json字符串。

      在之前做项目中还真没有自己好好研究一下解析字符串,现在用到了只能现学现弄这样减慢了开发效率,这应该属于开发基础。

      我自己试着写几种方法解析、试着引用网上的方法、几种迭代都不能生成正确的字符串,最后一种还是解析出来了,从数据库查询出来的是list列表,然后把他解析成了一个json串,所有数据都显示在顶层菜单,检查json串和给的例子是一样的但是还是出不来折叠效果。

      原来并不是解析json串不对,而是它打印到界面上是一级一级打印,并不是一下全部查出来都打印出去,这样当然就在一个级别上了,这也是所说的静态加载全部节点,很让人恶心的json串,强烈建议大家数量掌握几种解析json、array等以及相互转换的方法,这些是很基本的能力,平时会经常用的。

      isParent节点

       我们一看都知道这个节点表示是不是父节点,它有什么含义呢,在使用中我发isParent为true时,表示的是该节点左边接受单机事件,也就是会有一个展开符号,每次点击会触发一次异步提交数据,请求子节点数据加载到页面上。正常情况下如果你不点击父节点所有子节点是不加载到页面的。

      后台生成树json串代码

     		treeList=resourceService.list(childMap);
     		
     		JSONArray jsonArray=new JSONArray();
     		
			for(Organization organization:treeList)
	    	{
	    		JSONObject jsonObject=new JSONObject();
	    		jsonObject.put("id",organization.getId());
	    		jsonObject.put("pid",organization.getPid());
	    		jsonObject.put("name",organization.getName());
	    		
	    			//判断所选择节点是否是父节点,如果是设置isParent属性为true,不是设置为false
		     		Map subchildMap=new LinkedHashMap();
		     		subchildMap.put("sqlid","SubChildLst");
		     		subchildMap.put("id",organization.getId());
		    		List<Organization> subtreeList=new ArrayList<Organization>();
		    		subtreeList=resourceService.list(subchildMap);
		    		if(subtreeList.size() > 0 )
		    		{
		    			jsonObject.put("isParent","true");
		    		}else {
		    			jsonObject.put("isParent","false");
					}
		    		boolean isChecked=resourceService.IsChecked(contactid,organization.getId());
		    	if (null==contactid || "".equals(contactid) || "null".equals(contactid)) {
		    		jsonObject.put("checked","false");
				}else {
					
					if (isChecked) {
						jsonObject.put("checked","true");
					}else {
						jsonObject.put("checked","false");
					}
				}
	    		
	    		jsonObject.put("open","false");
	    		jsonArray.put(jsonObject);
	    	}
			String json=JsonUtil.toJson(jsonArray);


      checked节点

     该树形是选中的节点,这个节点也很有用,比如加载一个商品它是属于哪些分类的,在加载树的过程中,要把默认选中的项目加载上来,这个你想怎么实现呢。

动态加载默认选中的节点,用了半天的时间才想出怎么弄,有时候并不是我们不会写代码而是没有思路,有时有思路但是行不通这时就需要我们转换思考角度,在编程中也要注意从多角度思考,不要钻到一个点上去。

       解决动态加载默认选中项我用的是传递参数,在一般的页面上面传递参数觉得很容易,我要用的这个页面是一个弹出页面,使用的是window.open属性,在弹出框上动态加载菜单并把选中的选中,ztree从官网上看API说是不能够传递参数,有一个otherparm属性可说是只接受静态参数,是一个一个的键值对,我在value处又加了一个js函数,通过这个函数调用父窗体上的一个变量的值,代码如下;

 

	<SCRIPT type="text/javascript">
		
		var setting = {
			check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType : { "Y" : "", "N" : "" }
			},
			//获取json数据
	        async : {  
	            enable : true, 
	            url : "http://127.0.0.1:8080/contact/resource.do?method=getzTreeNodes", // Ajax 获取数据的 URL 地址  
	            autoParam : [ "id", "name" ], //ajax提交的时候,传的是id值
	        	otherParam: ["contactid",function(){
	        			 return window.opener.document.getElementById("contactid").value;
	        			}]
	        },  
	        data:{ // 必须使用data  
	            simpleData : {  
	                enable : true,  
	                idKey : "id", // id编号命名   
	                pIdKey : "pId", // 父id编号命名    
	                rootId : 0
	            }  
      		},  
	        // 回调函数  
	        callback : {  
	            onClick : function(event, treeId, treeNode, clickFlag) {  
	                if(true) {
	                    alert(" 节点id是:" + treeNode.id + ", 节点文本是:" + treeNode.name);      
	                

	                }  
	                
	            },  
	            //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
	            onAsyncSuccess : function(event, treeId, treeNode, msg){  
	            	//	alert("调用成功!");
	            	//var nodes=getCheckedNodes(true));
	            	//alert(nodes);
	            },
	            beforeClick: beforeClick,
				onCheck: onCheck
	        }  
    	};  
		function beforeClick(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
		}
		var code;
		
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		}
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
			//setCheck();
			
		});

		 function onCheck(e,treeId,treeNode)
		 {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			var ids="";
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
				ids+=nodes[i].id+",";
			}
			
			if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
			alert(ids);
			if (v.length > 0 ) v = v.substring(0, v.length-1);

			 cityObjIds=window.opener.document.getElementById("cateSelIds").value=ids;
			 cityObjName=window.opener.document.getElementById("cateSelName").value=v;
            
         }
    function getSelectedNodes()
    {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			var ids="";
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
				ids+=nodes[i].id+",";
			}
			
			if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
			alert(ids);
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			//var cityObj = $("#citySel");
			//var cityObjIds = $("#citySelIds");
			//给父窗体updateContact.jsp中所属分类赋值
			 window.opener.document.getElementById("cateSelIds").value=ids;
			 window.opener.document.getElementById("cateSelName").value=v;
    }
	function  winClose()
	{
		window.close();
	}
		
</SCRIPT>
   运行效果,动态下拉列表树


      在工作中别人给你讲解代码或者一点点详细的讲解几乎是没有的,我们那个经理只说你用那个ztree做一下那个动态菜单。

作为一个程序员要能读懂别人代码

      让我看别人的代码,我说看着看着就不想看了,还不如我自己动手写呢,其实,看别人代码一直觉得挺没意思的,现在想法改变了些,别人写的代码不管是好是坏,我们都值得看一看借鉴借鉴,一直在提高班学习没有怎么看别人写的代码到底是怎么样的,觉得提高班人写代码无论质量如何,风格都是一样的

       注释多、空行多、格式规范,易读性很强,这就和学英语一样,只听标准音是不行的,需要挺标准音的同时也要听听方言,这样才能让我们的阅读代码的能力真正的提高。

      作为一个程序员或者开发人员有不合适的地方要主动解决,并去优化。

     前几天遇到了一个问题,需要通过一个父节点ID,拿到他下面的所有子节点列表或ID,在给我的代码中用存储过程实现的但用起来运行效率较慢,项目经理让我优化优化存储过程可以看懂但不知道该优化哪里,从网上找了找找到一个算法替换后果然查询变快了。

     说一下学习一个新东西的过程

      有时让你做一个东西往往会用到新东西,一个你没有接触过的东西,在这个时候我们怎么样才能最快的学会了并且把任务做出来。

      觉得在项目中该多思考、有时甚至可以不动手但是一定要多去思考,而不是别人告诉你怎么做怎么做,举一个最简单的例子post提交和get提交有什么区别?一个不起眼的问题如果你没有认真思考过,有时在某个时刻你会因此遇到一个小障碍,觉得这个跟解一道数学题一样,只有把每个知识点理解了、相互之间能联想到一起,达到各种知识综合灵活运用,做项目的过程中才谁能得心应手,也容易达到米老师所讲的最高境界。

转载于:https://www.cnblogs.com/lilongsheng1125/p/4978531.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端框架 (一)zTree 从数据库中动态加载树形菜单 的相关文章

随机推荐

  • 注意力机制:CA - Coordinate Attention for Efficient Mobile Network Design(文末附代码)

    注意力机制 CA Coordinate Attention for Efficient Mobile Network Design 摘要 引言 具体而言 优势 相关工作 Mobile Network 架构 注意力机制 Coordinate
  • java 正则表达式 检测数学公式是否正确_java 正则表达式 检测数学公式是否正

    java 正则表达式 检测数学公式是否正 2021 02 05 13 33 36 简介 java中正则表达式基本用法的使用 1 Test01 java 使用正则表达式使代码变得非常简洁 2 TestMatcher01 java Matche
  • IBM近期扩充Watson认知API服务

    本文转载至 http www infoq com cn news 2016 03 watson cognitive apis 近期 IBM对Watson认知API服务进行了扩充 新增了情绪和语调分析API的测试版本 Watson的情绪分析A
  • Flutter 组件抽取:验证码输入功能(CodeInputContainer)

    简介 验证码输入框 可选需要输入的验证码个数 输入达指定个数后自动回调 效果 范例 class TestPageState extends State
  • 【通信原理】七、数字带通传输系统

    文章目录 一 2ASK振幅键控 2ASK振幅键控原理 2ASK包络检波 2ASK相干解调法 二 2FSK频移键控 过零点检测解调法 三 2PSK相移键控 四 2DPSK差分相移键控 差分相干解调 相位比较法 五 已调信号功率谱密度 六 抗噪
  • VB.Net正则表达式大全(3)

    深入浅出之正则表达式 注 JanGoyvaerts为RegexBuddy写的教程的译文 前言 半年前我对正则表达式产生了兴趣 在网上查找过不少资料 看过不少的教程 最后在使用一个正则表达式工具RegexBuddy时发现他的教程写的非常好 可
  • IDEA插件之输入法自动切换【Smart Input Source】

    MAC系统推荐快捷键 针对输入切换无需快捷键 但是在某些场景下比如Git Diff的时候可能存在自动跳转到源文件的情况 这种时候需要手动关闭自动切换功能 给作者提了个建议对这种场景进行优化 建议使用的快捷键 C代表关闭 O代表打开 介绍 解
  • 量子云计算:实现自我验证!

    量子云计算 实现自我验证 背景 即使对于世界上最强大的经典计算机来说 有些极度复杂的计算仍然需要花费漫长的时间 可是 从理论上说 量子计算机却可以完全胜任非常复杂的计算任务 原因是 不同于经典计算机的比特位 量子计算机拥有 量子位 经典二进
  • 人工智能讲师专家老师叶梓人工智能讲师之机器学习与深度学习-34

    接上一篇 系列博文 人工智能讲师叶梓关于人机器学习与深度学习入门课程课件 为系列博文 更多课程 及老师资料可点击 个人主页 最小二乘法的示意图 R语言实现的一元线性回归 一元回归的PYTHON实现 IMPORT PANDAS AS PD f
  • 前端实现csv文件的解析预览、上传、下载

    最近遇到了一些关于csv文件的上传 下载 解析预览 删除的需求 因为之前没有做过 尤其是关于csv的解析并预览 于是记录一下 上传 关于上传 绝大部分的选择都是通过第三方的OSS进行存储 比如阿里云的 这个其实没什么难度 有文档可以看 对于
  • ServiceLoader SPI的简单认知

    写了这么长时间的代码 竟然没有用过jdk SPI的ServiceLoader 深表遗憾 为什么写这个 因为在看Sentinel配置代码的时候 看到了这个 挺好用的 用法 在jar包中 resources 中建立 META INF servi
  • Java客户端连接不了安装在CentOS7上的redis解决方案

    今天初试了使用Java Redisson 客户端连接安装在CentOS上的redis 发现一直连接不了 报错信息如下 Exception in thread main com lambdaworks redis RedisException
  • HTML教程

    文章目录 HTML 1 HTML 概述 2 第一个 HTML 代码 3 HTML 标签分类 4 HTML基本标签 4 1 结构标签 4 2 排版标签 4 3 块标签和行内标签 4 4 文本标签 已过时 4 5 文本格式标签 4 6 标题标签
  • mybatis TypeHandler详解

    1 TypeHandler概念 TypeHandler 类型转换器 在mybatis中用于实现java类型和JDBC类型的相互转换 mybatis使用prepareStatement来进行参数设置的时候 需要通过typeHandler将传入
  • 简单的LVGL按键例程

    以下是一个简单的LVGL按键例程 使用LVGL的按键事件来处理按钮的单击和长按操作 include lvgl lvgl h void btn click action lv obj t obj 处理按钮单击事件 void btn long
  • ASP.NET -- WebForm -- ScriptManager 类

    ASP NET WebForm ScriptManager 类 通过 ScriptManager 可注册随后将作为页面一部分呈现的脚本 1 注册并立即执行脚本 RegisterStartupScript 方法 例 在ASP NET中实现和
  • 构建Java Web应用实验

    1 创建负责下载WAR文件的镜像 1 创建一个目录fetcher 保存相关的配置信息和内容 在 后输入mkdir fetcher cd fetcher命令 然后按Enter键 创建fetcher目录并进入该目录 示例代码如下 root xi
  • 知识追踪实战:lstm+ Multi-head Attention注意力机制的学生做题成绩预测实战

    项目视频讲解 知识追踪实战 lstm Multi head Attention注意力机制的学生做题成绩预测实战 哔哩哔哩 bilibili from collections import Counter import torch from
  • 小程序蓝牙亲身总结

    问题 1 小程序蓝牙搜索能不能搜到手机设备 2 如何判断蓝牙是否打开 3 搜索指定设备 4 开发者工具和 Android 上获取到的deviceId为设备 MAC 地址 iOS 上则为设备 uuid 因此deviceId不能硬编码到代码中
  • 前端框架 (一)zTree 从数据库中动态加载树形菜单

    这几天做动态菜单用到了这个插件 目前用的很广泛的一个开源框架 最新发布的QUI框架就是用这个插件开发的菜单部分 因此还是很值得深入研究和学习 通过使用感觉功能很丰富 好多函数不用自己开发和编写 官网上有很详尽的API可以参考 用着算顺手但学