用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){ } }