爱威尔-easyui-datagrid列动态生成和后台数据展示

首先我假定你已经知道easyui并有所了解，对于datagrid也并不陌生，那我想你也会知道后台的数据是怎么组装的，我就直接拿出来封装好的数据类：


	package com.tw.util;


	import java.util.ArrayList; 
import java.util.Dictionary; 
import java.util.Hashtable; 
import java.util.List;


	public class DataGridObject {


	private Long total = 0L; 
public List<Hashtable<String, Object>> rows = new ArrayList<Hashtable<String, Object>>(); 
public DataGridObject() { 
super(); 
}


	public DataGridObject(Long total, List<Hashtable<String, Object>> rows) { 
super(); 
this.total = total; 
this.rows = rows; 
}


	public Long getTotal() { 
return total; 
}


	public void setTotal(Long total) { 
this.total = total; 
}


	public List<Hashtable<String, Object>> getRows() { 
return rows; 
}


	public void setRows(List<Hashtable<String, Object>> rows) { 
this.rows = rows; 
}


	}


	我想你应该理解这个东西，我就不多说了，这里需要提的是


	public List<Hashtable<String, Object>> rows = new ArrayList<Hashtable<String, Object>>();


	为什么是List<Hashtable<String, Object>>?


	为什么用Hashtable<String, Object>？


	这跟datagrid的数据格式有关，我们先看看datagrid的数据格式是什么样子的，如果你用firebug就可以看到：


	 


	{“total”:28,”rows”:[ 
{“productid”:”FI-SW-01″,”productname”:”Koi”,”unitcost”:10.00,”status”:”P”,”listprice”:36.50,”attr1″:”Large”,”itemid”:”EST-1″}, 
{“productid”:”K9-DL-01″,”productname”:”Dalmation”,”unitcost”:12.00,”status”:”P”,”listprice”:18.50,”attr1″:”Spotted Adult Female”,”itemid”:”EST-10″}, 
{“productid”:”RP-SN-01″,”productname”:”Rattlesnake”,”unitcost”:12.00,”status”:”P”,”listprice”:38.50,”attr1″:”Venomless”,”itemid”:”EST-11″}, 
{“productid”:”RP-SN-01″,”productname”:”Rattlesnake”,”unitcost”:12.00,”status”:”P”,”listprice”:26.50,”attr1″:”Rattleless”,”itemid”:”EST-12″}, 
{“productid”:”RP-LI-02″,”productname”:”Iguana”,”unitcost”:12.00,”status”:”P”,”listprice”:35.50,”attr1″:”Green Adult”,”itemid”:”EST-13″}, 
{“productid”:”FL-DSH-01″,”productname”:”Manx”,”unitcost”:12.00,”status”:”P”,”listprice”:158.50,”attr1″:”Tailless”,”itemid”:”EST-14″}, 
{“productid”:”FL-DSH-01″,”productname”:”Manx”,”unitcost”:12.00,”status”:”P”,”listprice”:83.50,”attr1″:”With tail”,”itemid”:”EST-15″}, 
{“productid”:”FL-DLH-02″,”productname”:”Persian”,”unitcost”:12.00,”status”:”P”,”listprice”:23.50,”attr1″:”Adult Female”,”itemid”:”EST-16″}, 
{“productid”:”FL-DLH-02″,”productname”:”Persian”,”unitcost”:12.00,”status”:”P”,”listprice”:89.50,”attr1″:”Adult Male”,”itemid”:”EST-17″}, 
{“productid”:”AV-CB-01″,”productname”:”Amazon Parrot”,”unitcost”:92.00,”status”:”P”,”listprice”:63.50,”attr1″:”Adult Male”,”itemid”:”EST-18″} 
]}


	这下你明白了，跟上面封装的类是不是很像呀。那Hashtable<String, Object>的作用是什么呢？


	{“productid”:”AV-CB-01″,”productname”:”Amazon Parrot”,”unitcost”:92.00,”status”:”P”,”listprice”:63.50,”attr1″:”Adult Male”,”itemid”:”EST-18″}


	我们看它又是什么组成的很显然属性加值，所以Hashtable很合适。


	我先把datagrid 的js拿出来：


	$(‘#user_datagrid’).datagrid({ 
//url : ”, 
url : ‘${pageContext.request.contextPath}/schedulingPlan/plan’, 
//fit : true, 
width : ${wit}, 
fitColumns : true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。 
//border : false,//定义是否显示面板边框 
//pagination : true,//如果为true，则在DataGrid控件底部显示分页工具栏 
//idField : ”, 
//pagePosition : ‘both’,//定义分页工具栏的位置。可用的值有：’top’,’bottom’,’both’。 
//checkOnSelect:true, 
//selectOnCheck:true, 
columns : [${cols}], 
onRowContextMenu:function(e, rowIndex, rowData){ 
e.preventDefault(); 
$(this).datagrid(‘unselectAll’); 
$(this).datagrid(‘selectRow’,rowIndex); 
$(‘#user_menu’).menu(‘show’, { 
left : e.pageX, 
top : e.pageY 
}); 
} 
});


	 


	当你看到${cols} 是不是既熟悉又奇怪呀，怎么把它直接放到js里面了，这里面是什么数据呀？


	首先你应该知道columns  存放的是什么内容？ 是不是表头信息。因为表头信息是动态的 ，所以要通过后台程序获取封装成columns可以解析的格式，这个我行不用教你了吧。


	表头信息封装好了我们就开始拿数据了。我们知道”productid”:”AV-CB-01″  这两个信息都是动态的，你现在清楚Hashtable<String, Object>发挥的重要作用了吧，您能够明白数据怎么来的了么？


	 


	Hashtable<String, Object> dic = new Hashtable<String, Object>(); 
dic.put(“FItemID”, rs.getString(“FItemID”).trim()); 
dic.put(“FNumber”, rs.getString(“FNumber”).trim()); 
dic.put(“FName”, rs.getString(“FName”).trim()); 
dic.put(“FModel”, rs.getString(“FModel”).trim()); 
dic.put(“CLQty”, rs.getString(“CLQty”).trim()); 
dic.put(“DJQty”, rs.getString(“DJQty”).trim()); 
dic.put(“TLFQty”, rs.getString(“TLFQty”).trim()); 
dic.put(“PlanNum”, rs.getString(“PlanNum”).trim()); 
dic.put(“TXqty”, fnum.format(rs.getFloat(“FQty”)+rs.getFloat(“TLFQty”))); 
dic.put(“TSqty”, fnum.format(rs.getFloat(“CLQty”)+rs.getFloat(“DJQty”)-rs.getFloat(“FQty”)-rs.getFloat(“TLFQty”))); 
rows.add(dic);


	 


	这是我拿的一些信息，你做做参考。


	这样一来动态表头和动态数据的问题就解决了。


	如果大家还是不理解，欢迎留言。