如何用easyui+JAVA 实现动态拼凑datagrid表格

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先给大家看一看效果，最近一段时间都在研究这个东西。

如果我把日期间隔选宽呢？比如5月日到5月5日？下面给大家看看效果，不用担心哦

看到了吧，哈哈，这个日期都是动态生成的，下面就来跟大家分享一下这个的实现方法。

本人是用JAVA EE的后台实现的，

先来贴HTML代码：

HTML代码非常的简单，其中关键的datagrid只有一个TABLE，其实关键在于JS代码哦

下面就把代码发出来：

我来给大家解释下几个关键的地方以及思路吧，代码不是特别的复杂。

formLoader.load(param1,param2,function(s){})这个方法第一个参数就是controller的RequestMapping的名字，因为是用的MVC三层构架弄的，第二个参数可以是字符串的，也可以是一个JSON对象，此方法返回的是一个JSON对象，如果alert(s)就会看到结果,这个公司框架的一个方法，所以大家不用再找，我只是分享思路。
本例子主要是后台构造动态列，使用得比较多的是PUSH方法，用PUSH方法把JSON对象存到数组里面去。

其中有几点需要解释一下：表头名称title，field（JSON对象返回到的对应的Key）,field给大家放张图片就知道了

下面是具体的代码：

本例的难点在于,要构建一个动态的DTO实体类，因为我返回的是一个LIST<DTO的名称>，因为列是不固定的，所以这个是一个难点，这个怎么实现呢？

其实大家细心的注意到了有一个Field叫做DynamicList我们把这个DYNAMICLIST打开看看里面的内部结构。

这里其实是因为我选择了8个日期间隔的时间，所以就有8个元素在里面，如果我选择了4天时间间隔呢？

这个是怎么实现的呢？

下面进入后台时间，其实后台是拼接的SQL，先给大家看看查询SQL是怎么拼凑出来的。

public String querySql(ReservoirDayReportParam param)
{
StringBuffer sb=new StringBuffer();
sb.append("select b.STNM,r.STCD,"); //开始时间和结束时间
String startTime=param.getStartTime();
String endTime=param.getEndTime(); SimpleDateFormat format =new SimpleDateFormat("yyyy-mm-dd");
Calendar start=Calendar.getInstance();
Calendar end=Calendar.getInstance();
try
{
start.setTime(format.parse(startTime));
end.setTime(format.parse(endTime)); }
catch(Exception e)
{
e.printStackTrace();
} //遍历出时间
int count=0;
while(start.compareTo((end))<=0)
{ String time=format.format(start.getTime());
String finalStart=time.concat(" 00:00:00"); //最终获得的每天的开始时间
String finalEnd=time.concat(" 23:59:59"); //最终获得的每天的结束时间 sb.append("max(case when r.TM between '"+finalStart+"' and '"+finalEnd+"' then r.RZ else 0 end) as z"+count+",");
count++;
start.add(Calendar.DAY_OF_MONTH, 1);
//列的别名
}
String tempBuffer=sb.substring(0,sb.length()-1); //把获得的值的最后一个逗号去掉
StringBuffer lastBuff=new StringBuffer(); //新建一个字符串
lastBuff.append(tempBuffer); lastBuff.append(" from ST_RSVR_R r,ST_STBPRP_B b where r.stcd=b.stcd");
if(!param.getStcd().equals(""))
{
lastBuff.append(" and r.STCD='"+param.getStcd()+"'");
} lastBuff.append(" group by b.STNM,r.STCD");
return lastBuff.toString();
}

其中的ReservoirDayReportParam 是一个实体类，代码都有注释的，我就说说关键的，其实的动态列（水位）这一列，其实是根据传入的开始时间和结束时间，来循环去把SQL拼凑出来，代码不是太难，中间使用到了一个count的变量，用来给列起别名，比如z0,z1,z2,z3...等等。那么这样就实现了动态的拼接SQL，就是我有选择了多少个日期间隔，就会在后台AS出多少个动态列，下面先给大家看看实体模型吧。

//开始时间和结束时间
private String startTime;
private String endTime; public Map getDynamicList() {
return dynamicList;
}
public void setDynamicList(Map dynamicList) {
this.dynamicList = dynamicList;
}
//动态实体类
private Map dynamicList;

其中的dynamicList就是动态的，为什么是Map类型的？那是因为可以添加键值对。把形如z0,z1这样的添加到里面去，这就实现了动态化。

开始已经说过了formLoader方法，那么我们要执行的这个方法，在后台优势什么样呢？

public List<ReservoirDayReportParam> queryData(ReservoirDayReportParam param) {
// TODO Auto-generated method stub String sql=querySql(param);
List<Object[]> dataFromSTCD=this.daoHelper.findBySql(sql);
List<ReservoirDayReportParam> arrList=new ArrayList<ReservoirDayReportParam>();
List list = new ArrayList();
try
{ for(Object[] obj:dataFromSTCD)
{
ReservoirDayReportParam params=new ReservoirDayReportParam();
Map map=new LinkedHashMap(); //新建一个ARRLIST，用于存放动态列 params.setStnm(String.valueOf(obj[0]));
params.setStcd(String.valueOf(obj[1])); //把动态列存到Map中去，然后分别设定键值对 for(int i=2;i<dataFromSTCD.get(0).length;i++)
{
map.put("z"+(i-2), obj[i]);
} params.setDynamicList(map); arrList.add(params);
} }
catch(Exception e)
{
e.printStackTrace();
}
return arrList; }

其中的querySql就是刚才的拼接SQL的方法。
首先得到拼接的SQL，那个findbysql方法是返回一个List集合的方法，公司框架，知道意思就行，大家可以无视。
具体思路就是从List中循环出结果，然后添加到实体类中去，然后再把每个实体类添加到arraylist中去，然后再返回。具体的注释已经写了，JS代码是主体，大家如果有不懂的地方，可以留言。