3.12Json和Ztree的使用及树状显示

最新推荐文章于 2022-03-06 22:27:09 发布

哈西哈希

最新推荐文章于 2022-03-06 22:27:09 发布

阅读量926

点赞数

分类专栏： Struts2

本文链接：https://blog.csdn.net/shan_111/article/details/79457773

版权

Struts2 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（1）Json(服务端Json和客户端Json)

(2) Ztree

(3)角色管理中的角色权限的树状显示

1：Json

a:客户端Json

json的转换：要引入json.js文件
A：将json对象转为字符串，发送到服务端。

B：服务端的是一个字符串，客户端将字符串转为json对象。

代码如下：

json_client.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>/script/json.js"></script>
<script language="javascript">
function json_obj(){
	/**
     * 定义json的对象
     */
    var children = new Array("aa","bb","cc");
	var gril = {
		"username":		"mary",
		"age":			20
	};
	
    var obj = {
		"userid":		100,
		"username":		"admin",
		"birthday":		new Date(),
		"ismarry":		false,
		"remark":		null,
		"children":		children,
		"gril":			gril
	};
    
	//从json对象中取值。
	var userid = obj.userid;
	var username = obj["username"];
	var children = obj.children;
	
	//与java中的map格式区分{key=value,key_2=value};
	window.alert(obj);
	window.alert(userid + "\t" + username + "\t" + children[2] +"\t" + obj.gril.age);
}

function json_array(){
	/**
     * 定义json的数组
     */
    var strArray = ["a","b","c"];
	
	var objArray = [
		{
			"username":		"mary_1",
			"age":			21
		},
		{
			"username":		"mary_2",
			"age":			22
		},
		{
			"username":		"mary_3",
			"age":			23
		},
		{
			"username":		"mary_4",
			"age":			24
		}         
	]
	window.alert(strArray +"\t" + strArray[0]);
	
	window.alert(objArray);
	//for(var i = 0;i<objArray.length;i++){
	//	var obj = objArray[i];
	//	var username = obj.username;
	//	var age = 	   obj["age"];
	//	window.alert("username = " + username + "\tage = " +age);
	//}
}

//json的转换：

//A：将json对象转为字符串，发送到服务端。
//B：服务端的是一个字符串，客户端将字符串转为json对象。
function json_to_str(){
    var obj = {
    		"userid":		100,
    		"username":		"admin",
    		"birthday":		new Date(),
    		"ismarry":		false,
    		"remark":		null
    };	

	var objArray = [
	        		{
	        			"username":		"mary_1",
	        			"age":			21
	        		},
	        		{
	        			"username":		"mary_2",
	        			"age":			22
	        		},
	        		{
	        			"username":		"mary_3",
	        			"age":			23
	        		},
	        		{
	        			"username":		"mary_4",
	        			"age":			24
	        		}         
	        	]    
    
    var jsonStr = obj.toJSONString();
    
    window.alert(jsonStr);
    
    window.alert(objArray.toJSONString());
    //document.write(objArray.toJSONString());
}

function str_to_json(){
	var str_1 = "[{\"username\":\"mary_1\",\"age\":21},{\"username\":\"mary_2\",\"age\":22},{\"username\":\"mary_3\",\"age\":23}]";
	
	var objArray = str_1.parseJSON();
	
	window.alert(str_1);
	window.alert(objArray);
	for(var i = 0;i<objArray.length;i++){
		var obj = objArray[i];
		var username = obj.username;
		var age = 	   obj["age"];
		window.alert("username = " + username + "\tage = " +age);
	}
}

str_to_json();
</script>
</head>
<body>
<pre>

</pre>
</body>
</html>

b:服务端Json:

Json字符串格式可以转换成object或Map

要引入gson-2.3.1.jar这个包，使用里面的toJson和fromJson这两个方法进行转换。

代码如下：

TestJson.java

package com.test;

import java.util.Map;

import com.bean.DogBean;
import com.bean.UserBean;
import com.google.gson.ExclusionStrategy;
import com.google.gson.FieldAttributes;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class TestJson {
	public static void main(String[] args) {

		TestJson testJson = new TestJson();

//		 testJson.str_to_obj();

//		 testJson.obj_to_str();
//
//		 testJson.opt_field();
//
//		testJson.error();
	}

	private void error() {
		DogBean dogBean = new DogBean();
		dogBean.setDogid(20);
		dogBean.setDogname("aaaaa");
		dogBean.setDogcolor("black");

		UserBean userBean = new UserBean();
		userBean.setUserid(1);
		userBean.setUsername("admin");
		userBean.setPassword("11111");
		userBean.setGender_1("男1");
		userBean.setGender_2("男2");
		userBean.setGender_3("男3");

		

		Gson gson = new Gson();
		String jsonStr = gson.toJson(userBean);

		System.out.println(jsonStr);

	}

	private void str_to_obj() {
		String str = "{'dogid':'11','dogname':'xxxx','dogcolor':'blue'}";

		Gson gson = new Gson();
		DogBean dogBean = (DogBean) gson.fromJson(str, DogBean.class);

		System.out.println(dogBean.getDogid() + "\t" + dogBean.getDogname()
				+ "\t" + dogBean.getDogcolor());

		Map<String, String> dogMap = (Map<String, String>) gson.fromJson(str,
				Map.class);

		System.out.println(dogMap.get("dogid") + "\t" + dogMap.get("dogname")
				+ "\t" + dogMap.get("dogcolor"));
	}

	private void obj_to_str() {
		DogBean dogBean = new DogBean();
		dogBean.setDogid(20);
		dogBean.setDogname("aaaaa");
		dogBean.setDogcolor("black");

		Gson gson = new Gson();
		String jsonStr = gson.toJson(dogBean);

		System.out.println(jsonStr);
	}

	// 一些属性不想转换

	// 1：不想转换的属性加上private transient int userid的修饰。

	// 2：不想转换的属性使用指定的修饰来进行排除。protected String gender_1;
	
	// 3: 使用策略的方式

	private void opt_field() {
		UserBean userBean = new UserBean();
		userBean.setUserid(1);
		userBean.setUsername("admin");
		userBean.setPassword("11111");
		userBean.setGender_1("男1");
		userBean.setGender_2("男2");
		userBean.setGender_3("男3");
		userBean.setGender_4("男4");
		userBean.setProvince("省份");

		Gson gson = new Gson();
		String jsonStr = gson.toJson(userBean);
		System.out.println(jsonStr);

		Gson gson_2 = new GsonBuilder().excludeFieldsWithModifiers(
				java.lang.reflect.Modifier.PROTECTED).create();
		String jsonStr_2 = gson_2.toJson(userBean);
		System.out.println(jsonStr_2);

		Gson gson_3 = new GsonBuilder().setExclusionStrategies(
				new ExclusionStrategy() {
					@Override
					public boolean shouldSkipField(FieldAttributes attributes) {
						String fieldName = attributes.getName();
						if (fieldName.equals("province")
								|| fieldName.equals("gender_1")
								|| fieldName.equals("gender_2")) {
							return true;
						}
						return false;
					}

					@Override
					public boolean shouldSkipClass(Class<?> class1) {
						return false;
					}
				}).create();
		String jsonStr_3 = gson_3.toJson(userBean);
		System.out.println(jsonStr_3);
	}
}

2:角色管理模块中的角色权限里菜单的树状显示

a:客户端jsp

首先要加入JQuery_zTree v3.3这个包因为json.js与这个包里的js有冲突所以换成jquery.json-2.4.js

jquery.json-2.4.js中用到的两个方法为toJson()和evalJson()这两个方法。

然后在jsp页面引入路径，在加入相关的配置和div

代码如下：

add.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="<%=path%>/script/ztree_3.3/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="<%=path%>/script/ztree_3.3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path%>/script/ztree_3.3/js/jquery.ztree.all-3.3.min.js"></script>
<script type="text/javascript" src="<%=path%>/script/jquery.json-2.4.js"></script>
<script language="javascript">
var setting = {
	data: {
		simpleData: {
			enable: true
		}
	},
	check: {
		enable: true
	}
	
};
var jsonStr = '${requestScope.jsonStr}';
var jsonArrayObj = jQuery.evalJSON(jsonStr);

var zNodes = jsonArrayObj;
$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

function saveData(){
	//获取勾选的角色的树形节点。
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	var nodeArray = treeObj.getCheckedNodes(true);
	if (nodeArray == null || nodeArray.length == 0){
		window.alert("添加角色时，必须勾选角色所对应的权限");
	}else{
		var idArray = new Array();
		for(var i = 0;i<nodeArray.length;i++){
			var treeNode = nodeArray[i];
			var id = treeNode.id;
			idArray.push(id);
		}
		var role_select_menuid = idArray.join(",");
		document.getElementById("role_select_menuid").value = role_select_menuid;
		
		var form1 = document.getElementById("form1");
		form1.submit();
	}
	
}

</script>
<title>角色添加</title>
</head>
<body>
添加使用模型驱动：
<s:form method="post" namespace="/" action="roleAction!save" id="form1">
	<table width="100%" border="1" style="font-size:12px;">
		<tr>
			<td>角色编码</td>
			<td><s:textfield name="role_id"/> </td>
		</tr>
		<tr>
			<td>角色名称</td>
			<td><s:textfield name="role_name"/> </td>
		</tr>
		<tr>
			<td>角色备注</td>
			<td>
			<s:textarea name="role_remark" cols="60" rows="7"></s:textarea>
			</td>
		</tr>
		<tr>
			<td>角色权限</td>
			<td>
				<div class="zTreeDemoBackground left" style="height: 180px;overflow-y: scroll;">
					<ul id="treeDemo" class="ztree"></ul>
				</div>
				<s:hidden name="role_select_menuid" id="role_select_menuid"/>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<Input type="button" value="保存数据" οnclick="saveData();"/>
				<Input type="reset" value="重新输入"/>
			</td>
		</tr>								
	</table>
</s:form>
</body>
</html>