利用layer前端组件1.8版本和3.0版本去做显示图片效果的不同

功能简述：在struts2的一个小项目中，想要在用户列表的页面上在表格中加入超链接照片，即显示一个用户的照片信息，这里用到了layer前端组件。

这个前端组件的官方网站：http://layer.layui.com/  可以对照API中的 ajax和layer.photos({}) 方法来使用该模块。

但是layer组件有两种版本，旧版本layer 1.8.5和新版本3.0，这两个在使用过程中还有不一样的地方和需要注意的几点。

1.在jsp上面引入的不同：

新版本：（对应着jQuery3.1）

旧版本：（对应着jQuery1.1）

这里需要注意，低版本的jQuery对应着低版本的layer.js ，高版本对应高版本的，否则会出现一些关于jQuery的问题

2.ajax和layer.photos 方法使用的不同

可以根据layer 的官方API 去看两个版本的很多方法不同的使用，这里不仅仅可以看到新的3.0.1版本，也可以选择更旧版本1.8.5

旧版本：可以明确看到layer.photos是一个拓展方法，这里要引入一个拓展类

新版本：官方API中没有让你引入拓展类，直接在引入整个js文件后，这个layer.photos方法直接可以实现：（这里下载的3.0版本中也没有extend这个文件夹）

3.返回json的形式有变化：可以看到新版本的json形式更加简洁一些，但是还是要细心一点才能在后端将图片信息解析成Json时候不报错

旧版本：

新版本：

4.检测自己的json格式是否正确：可以在测试功能的时候将json信息打印在控制台上，然后复制在 http://jsonlint.com/ 中，可以在线检测你的json格式是否正确。

这里举一个新版本的layer 返回json格式的检测，结果为valid json,即合法的json。

在src 设置的值一定要是原图路径，且json中的斜杠都是向右斜的：形式如："/Struts2Pro/images/IMG_0996.JPG"（这个取决于往服务器上传照片的URL是怎么设置的）

5.json的解析代码：我是在一个service层创建一个类，写了一个静态方法，在这个方法中将json设置为StringBuilder对象进行拼接json信息，然后在Action中的方法也是用到这个方法将得到的照片信息解析成json传回前端进行显示：

package Service;

import java.util.ArrayList;

import javabean.Picture;
//这个方法是service层对DAO方法中拿到所以照片的集合加工成前端layer组件显示照片用的json类型
//json类型其实是一句句的属性拼接成的字符串，用到拼接，我们用stringBuilder类 不用String类
public class PictureService {
public static String getJson(ArrayList<Picture> list,String ContextPath)
{
StringBuilder str=new StringBuilder();
//处理相册的一些信息
str.append("{");
str.append("\"title\":\"用户相册 \",");
str.append("\"id\":123,");
str.append("\"strat\":0,");
str.append("\"data\":[");
//处理照片的信息
for(int i=0;i<list.size();i++)
{
str.append("{");
str.append("\"alt\":\""+list.get(i).getName()+"\",");
str.append("\"pid\":123,");
str.append("\"src\":\""+ContextPath+"/"+list.get(i).getUrl()+"\",");
str.append("\"thumb\":\"\",");
str.append("\"area\":[638,851]");
str.append("}");
//因为处理的照片不止一张，所以要循环在list中的每个Piction对象转变成Json中data的形式
//而且循环处理的每一张图片（除最后一张）加工成Json信息后在{。。。}加上逗号。
if(i<list.size()-1){
str.append(",");
}
}
str.append("]");
str.append("}");
return str.toString();
}
}

6.这里没有太多讲使用这个流程和一些配置，可以参考：http://blog.csdn.net/litiammmm/article/details/51027813

补充： 这里高版本的前端回调函数中要遵循官方API的形式

有问题还请指出