用DWRUtil动态生成Table

 前几天，做了一个练习项目，顺便练习了一下DWRUtil当中的方法

其中，cellfuncs是一组方法，是用来返回表格中的内容的，一般是返回td中的内容，有几列则需要几个方法

DWRUtil.removeAllRows(id)是删除表格元素的，通常参数id是一个table的tbody的id

rowCreator是列创建器或者叫列生成器，可以生成一个列，也可以在它的方法内设置tr的属性

而cellCreator很显然就是单元格生成器，可以生成一个td，也可以设置它的属性

但是这里有个缺陷，就是不能为不同的列设置不同的样式

故，我在cellfuncs的方法组中返回的都是带有属性的div，相当于在td中添加了div，这样就达到了想要的效果

 

function searchGoods(){
try{
DWRUtil.useLoadingMessage("正在查找...");
GoodsHandle.getSearchGoods(goodsName,salerName,goodsStatus,currentPageNum,function(data){
//alert(data.length);
var cellfuncs = [
function(data){
var div=document.createElement("div");
div.style.textAlign="left";
div.style.width="100px";
div.id="goodsId"+data.goodsId;
var a=document.createElement("a");
a.href=contextPath+"/goods.do?op=toDetail&goodsId="+data.goodsId;
a.innerText=data.goodsName;
div.appendChild(a);
//alert(DWRUtil.toDescriptiveString(div,2));
return div;
},
function(data){
var div=document.createElement("div");
div.style.textAlign="left";
div.style.width="200px";
div.innerText=data.goodsDesc;
return div;
},
function(data){
var div=document.createElement("div");
div.style.width="40px";
div.innerText=data.saler.userName;
return div;
},
function(data){
var div=document.createElement("div");
div.style.width="50px";
div.innerText=data.goodsPrice;
return div;
},
function(data){
var div=document.createElement("div");
div.style.width="80px";
var beginTime = data.beginTime;
var endTime = data.endTime;
beginTime = convertDate(beginTime).substring(0,10);
endTime = convertDate(endTime).substring(0,10);
div.innerHTML = beginTime+"<br />至<br />"+endTime;
return div;
}
];
DWRUtil.removeAllRows('tbSearchGoods');
//for(var i=0;i<goodsList.length;i++){
//var goods = goodsList[i];
//alert(DWRUtil.toDescriptiveString(goods,2));
//DWRUtil.setEscapeHtml(false);
DWRUtil.addRows('tbSearchGoods', data, cellfuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
//var index = options.rowIndex * 50;
//row.setAttribute("id",options.rowData.id);
//row.style.collapse = "separate";
//row.style="border:1px dotted #999999; border-collapse:collapse;";
//row.style.color = "rgb(" + index + ",0,0)";
return row;
},
cellCreator:function(options) {
var td = document.createElement("td");
//var index = 255 - (options.rowIndex * 50);
//td.style.backgroundColor = "rgb(" + index + ",255,255)";
//td.style.backgroundColor = "menu";
//td.style.fontWeight = "bold";
//td.style.align = "center";
//td.style="border:1px dotted #999999; border-collapse:collapse;";
td.style.border="1px dotted #999999";
td.style.collapse="collapse";
return td;
}
}
);
//}
}
);
}catch(e){

}
}