《ztree+数据库数据展示+OnCheck事件的回调函数》

水深无声 2022-05-15 15:19 262阅读 0赞

**1，entity类（也可用map集合）**

package com.books.entity;
    /**
    	 * ztree实体类
    	 * @return
    	 */
    public class ztreeMenu {
    	
    	private String id; //节点id
    	private String pId; //父节点id
    	private String name; //节点名
    	private String checked; //复选框，是否选择（true、false）
    	private String open; //节点是否展开（true、false）
    	//还可以添加其他属性 如：URL等
    	public String getId() {
    		return id;
    	}
    	public void setId(String id) {
    		this.id = id;
    	}
    	public String getpId() {
    		return pId;
    	}
    	public void setpId(String pId) {
    		this.pId = pId;
    	}
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getChecked() {
    		return checked;
    	}
    	public void setChecked(String checked) {
    		this.checked = checked;
    	}
    	public String getOpen() {
    		return open;
    	}
    	public void setOpen(String open) {
    		this.open = open;
    	}
    	
    	@Override
    	public String toString() {
    		return "ztreeMenu [id=" + id + ", pId=" + pId + ", name=" + name + ", checked=" + checked + ", open=" + open + "]";
    	}
    	
    
    }

**2，dao**

/**
    	 * ztree菜单数据--普通方法+实体类
    	 * @return
    	 */
    	public List<ztreeMenu> selzTreeMenu(){
    		List<ztreeMenu> list=new ArrayList<>();
    		try {
    			String sql=" select MENUBID as id,PARENTBID as pId,MENUBNAME as name,Root as checked,open from t_books_menu where Extend1 like 'root' ";
    			Connection con=DBAccess.getConnection();
    			PreparedStatement ps = con.prepareStatement(sql);
    			ResultSet rs=ps.executeQuery();
    			ztreeMenu zm=null;
    			while(rs.next()) {
    				zm=new ztreeMenu();
    				zm.setId(rs.getString("id")); //节点id
    				zm.setpId(rs.getString("pId")); //节点父id
    				zm.setName(rs.getString("name")); //节点名
    				zm.setChecked(rs.getString("checked")); //复选框，是否选择（true、false）
    				zm.setOpen(rs.getString("open")); //节点是否展开（true、false）
    				list.add(zm);
    			}
    		} catch (SQLException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return list;
    	}

**3,Action**

/**
    	 * 展示数据的方法--ztree
    	 * @param req
    	 * @param resp
    	 * @return
    	 */
    	public String zTreeRootList(HttpServletRequest req, HttpServletResponse resp) {
    		try {
    			List<ztreeMenu> rootList = rd.selzTreeMenu();
    			ObjectMapper om = new ObjectMapper();
    			ResponseUtil.write(resp, om.writeValueAsString(rootList));
    		} catch (JsonProcessingException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		return "null";
    	}

**4,js**

//-------------------------------------ztree树形菜单展示权限数据-------------------------------------------
    					
    		     //setting:zTree的参数配置
    			 var setting = {
    					 view: {
    						    selectedMulti: true, //设置是否能够同时选中多个节点
    						    showIcon: true,  //设置是否显示节点图标
    						    showLine: true,  //设置是否显示节点与节点之间的连线
    						    showTitle: true,  //设置是否显示节点的title提示信息
    						   },
    						   data: {
    						     simpleData: {
    						     enable: true, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
    						      idKey: "id",  //设置启用简单数据格式时id对应的属性名称
    						      pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pId层级关系构建树结构
    						    }
    						   },
    						   check:{
    						    enable: true,  //设置是否显示checkbox复选框
    						    chkStyle: "checkbox",
    							chkboxType: { "N": "ps", "Y": "ps" },//子节点（s），父节点（p）；('Y','N'是否选中)
    						    autoCheckTrigger: true,
    						   },
    						   callback: {
    							    onClick: function(treeId, treeNode) {
    									var treeObj = $.fn.zTree.getZTreeObj(treeNode);//拿到zTree对象
    									var selectedNode = treeObj.getSelectedNodes()[0];//拿到被选择的第一个节点对象
    									alert("权限:"+selectedNode.name+"; 是否授权:"+selectedNode.root);
    								   },    //定义节点单击事件回调函数
    						         onCheck: zTreeOnCheck
    							   },
    						   //获取数据
    						   async : {
    								enable : true, //设置启用异步加载
    								contentType : "application/json", //定义ajax提交参数的参数类型，一般为json格式
    								dataType : "text", //数据类型
    								url : rUrl+'/userAction.action?methodName=zTreeRootList', //请求路径
    								dataFilter : ajaxDataFilter //返回数据（不能直接用，需要打印）
    						}
    								   
    			 };
    					 
    			// 打印数据库加载的数据
    			function ajaxDataFilter(treeId, parentNode, responseData) {
    					if (responseData) {
    						console.log(responseData);
    					}
    					return responseData;
    				};
    						
    			 $.fn.zTree.init($("#zTreeBookRoot"), setting); //加载数据				
    					
    			         }
    		
    		    }]
    	
    	});
    	
        //用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
    	//修改权限
    	function zTreeOnCheck(event, treeId, treeNode) {
    		
    //		if(treeNode.checked==false){
    //			alert(treeNode.name + ", 权限已撤销！" );
    //		}else{
    //			alert(treeNode.name + ", 授权成功！" );
    //		}
    	    
    	    $.ajax({
    			   url:rUrl+'/userAction.action?methodName=setRoot&&MenuBid='+treeNode.id+'&&Root='+treeNode.checked,
    			  });
    	    
    	};

**5,jsp 展示**

**6，ztree插件导入–见**  
[ztree插件导入][ztree]

[ztree]: https://blog.csdn.net/weixin_42585871/article/details/83308664