zTree的基本应用
资源中有ztree的基本应用和邮箱中选择联系人的界面,更多的操作请参考官方接口文档。
fusioncharts
1、将需要的js文件和css文件引入到你将要用到图表展示的页面
2、将需要的图表的 "*.swf"(图表展示用的flash文件),copy到项目自定义的目录结构中
3、每种图表(饼图、折线图...)都需要一个数据源,也就是要动态展示到图表中的你封装的后台数据(json或xml格式均可),数据源中包括图表的样式和要展示的数据
例如json格式数据:
{ "chart": { "manageresize": "1", "bgcolor": "C4D283, FFFFFF", "decmials": "0", "numbersuffix": "%", "lowerlimit": "0", "upperlimit": "100" },
"colorrange": { "color": [
{ "minvalue": "0", "maxvalue": "40", "code": "8BBA00" },
{ "minvalue": "40", "maxvalue": "75", "code": "F6BD0F" },
{ "minvalue": "75", "maxvalue": "100", "code": "FF654F" }
]
},
"value": "52"
}
上图为fusionchars中一种图表所需要的json格式数据,
value值才是图表中要展示的数据,
其他数据只是设置了图表样式,依个人需求设置各个实体参数,来得到自己想要的图表样式
后台代码:
按照此例来说的话,你如果对json比较熟悉的话,应建立以下实体,
public class 自定义{
private Char char;
private Colorrange colorrange;
private Value value;
setter...
getter...
}
public class Chart {
private String manageresize;
private String bgcolor;
private String decmials;
private String numbersuffix;
private String lowerlimit;
private String upperlimit;
setter...
getter...
}
public class Colorrange{
List<Color> color;
setter...
getter...
}
public class Color{
private String minvalue;
private String maxvalue;
private String code;
setter...
getter...
}
以上实体只是为了设置图表的样式,
如果对样式没有要求的话,完全可以将字符串写死在页面上,只有value值从后台获取(不建议,但实体可以不用建立)。
样式和展示数据都设置完成后,用此方法 String jsonStr = JSONObject.fromObject(自定义).toString();得到符合图表需要的json数据,
响应来自页面的请求,返回响应的数据json数据
this.getResponse().setCharacterEncoding("utf-8");
this.getResponse().getWriter().write(jsonStr);
this.getResponse().getWriter().flush();
this.getResponse().getWriter().close();
页面中使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="${base}/js/jquery-1.4.2.min.js"></script>
<#--Fusionchars图表插件所需的核心js和css-->
<link href="${base}/commons/fusionWidgets/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base}/commons/fusionWidgets/FusionCharts.js"></script>
<script type="text/javascript">
<#--图表-->
var 自定义图表名称 = new FusionCharts("${base}/commons/fusionWidgets/Pie3D.swf(图表展示用的flash文件绝对路径)", "myChartIdB(定义图表ID,页面中若有其它fusionchars图表,此ID不能重复)", "300", "300", "0", "0");
$.get("异步请求url",
function(data){
(第一种,样式和数据均来自后台)
自定义图表名称.setJSONData(data);
(第二种,样式写死和数据来自后台)
自定义图表名称.setJSONData({ "chart": { "manageresize": "1", "bgcolor": "C4D283, FFFFFF", "decmials": "0", "numbersuffix": "%", "lowerlimit": "0", "upperlimit": "100" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "40", "code": "8BBA00" }, { "minvalue": "40", "maxvalue": "75", "code": "F6BD0F" }, { "minvalue": "75", "maxvalue": "100", "code": "FF654F" } ] }, "value": "动态获取" });
自定义图表名称.render("divId");
});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
4、总之一句话,前台或后台均可设置图表样式,准备好图表flash,页面引入js文件、css文件,页面异步请求后台得到响应的图表数据,展示至此结束。
注:fusionchars的官网免费版flash文件带广告,到破解版压缩包中找需要的flash文件,如果没有你需要的,那继续百度或者花钱买吧。
所需要的js文件和css文件在文件中仔细找吧,demo页面中都有引用。
加密解密技术
加密解密技术,使数据库资料更加安全,防止资料的泄露