DWR中 DWRUtil.addRows() 方法详解

 始终在DWR 门口转悠，扰于资源的限制，每次做东西都是用到DWR才遍地翻找资料，这次被个table中增加行的问题弄得是头破血还是没流， 找到一篇比较好的资料，以作收藏，亦便利了大家

 

本篇就是以例子详细说明这个函数的用法。而另一个移除所有表格行的操作 DWRUtil.removeAllRows() 使用简单就不多说明了。

　　开始的时候我们还是要对这个函数的原型加以说明，虽然有些俗套，但还是必要的：

DWRUtil.addRows(id, array, cellfuncs, [options]);

　　描述:

　　向指定id的table元素添加行。它使用数组中的每一个元素(对象)在table中创建一行。然后用 cellfuncs 数组中的对应的函数创建一个列。单元格是依次用 cellfunc 根据没有数组中的元素创建出来的。

　　DWR1.1开始，addRows()也可以用对象(遍历对象的属性创建行)做为数据。如果你用一个对象代替一个数组来创建单元格，这个对象会被传递给cell函数。

　　参数(前三个函数 id, array, cellfuncs 是必须的):

　　id: table元素的id(最好是tbody元素的id)

　　array: 数组(DWR1.1以后可以是对象，这种用法会有代码说明)，做为更新表格数据。

　　cellfuncs: 函数数组，从传递过来的行数据中提取单元格数据。每个函数对应于一列

　　options: 一个包含选项的对象(见下面)

　　选项包括:

　　rowCreator: 一个用来创建行的函数(例如，你希望个tr加个css). 默认是返回一个document.createElement("tr")

　　cellCreator: 一个用来创建单元格的函数(例如，用th代替td). 默认返回一个document.createElement("td")

　　escapeHtml: true 或 false，设定是忽略创建列时 cellfunc 函数中返回的 HTML 代码，默认为 true

　　现在来看个最常用的例子，两列的表格，代码中用到的 util.js 文件可以直接从 dwr.jar 中的 uk/ltd/getahead/dwr(1.x) 或 org/directwebremoting(2.x 及上) 目录中取得：

页面元素的代码如下，我们用 id="listTable" 标记了一个表格的 <tbody> 我们以后的 js 操作都是基于这个表格的。

 

<script type='text/javascript' src='util.js'></script>　
<table border=1 width="200">　
　　　 <tr><th>ID</th><th>Name</th></tr>　
　　　 <tbody id="listTable"></tbody>　
</table>　
<script type='text/javascript' src='util.js'></script>
<table border=1 width="200">
　<tr><th>ID</th><th>Name</th></tr>
　<tbody id="listTable"></tbody>
</table>

　　JS 操作代码，你可以把这段对 DWRUtil.addRows() 函数的调用放在自定义的 function window.onload(){......} 中就能在文档加载完后自动调用。

 

//页面加载完后自动执行　　
function window.onload(){　　
　　　　 var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组　　
　　　　 DWRUtil.addRows("listTable",arr,[　　
　　　　　　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容, 即 id 值　　
　　　　　　　　　　 function(item){return item.id;},　　　
　
　　　　　　　　　　 //创建第二列的函数，传入 arr 中的对象,返回单元格内容, 即 name 值　　
　　　　　　　　　　 function(item){return item.name;}　　
　　　　　　　　 ]　　
　　　　 );　　
}　
//页面加载完后自动执行
function window.onload(){
　　　　 var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组
　　　　 DWRUtil.addRows("listTable",arr,[
　　　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容, 即 id 值
　　　　　　　　　　 function(item){return item.id;},

　　　　 //创建第二列的函数，传入 arr 中的对象,返回单元格内容, 即 name 值
　　　　 function(item){return item.name;}
　　　　　　　　 ]
　　　　 );
}

说明：

　　要添加的行数由第二个数组参数 arr 的元素个数(arr.lengh) 决定的。如果第二个参数为一个对象，则该对象的每个属性对应一行。

　　每行要创建多少列是由第三个参数 cellfuncs 中的函数个数决定的。所以上面代码中的 cellfuncs 函数数组中可以是一个函数，也可以是三个甚至更多，只是显示出来对不齐的。只要记住这些函数的参数是 arr 中的元素，且 cellfuncs 不能为空。

　　如果 arr 是个普通的数组，addRows() 会遍历每一个数据元素：

 

var arr = ['Unmi','Kypfos'}]; //定义一个含有两个字符串的数组　　
DWRUtil.addRows("listTable",arr,[　　
　　　　　 //创建第一列的函数，传入 arr 中的字符串,返回单元格内容, 即参数　　
　　　　　 function(item){return item;},　　　
　
　　　　　 //创建第二列的函数，传入 arr 中的字符串,返回单元格内容, 即参数　　
　　　　　 function(item){return item;}　　
　　　 ]　　
);　
　　　　 var arr = ['Unmi','Kypfos'}]; //定义一个含有两个字符串的数组
　　　　 DWRUtil.addRows("listTable",arr,[
　　　　　　　　　　 //创建第一列的函数，传入 arr 中的字符串,返回单元格内容, 即参数
　　　　　　　　　　 function(item){return item;},

　　　　　　　　　　 //创建第二列的函数，传入 arr 中的字符串,返回单元格内容, 即参数
　　　　　　　　　　 function(item){return item;}
　　　　　　　　 ]
　　　　 );

var obj = {line1:'1,Unmi',line2:'2,Kypfos'}; //定义一个对象，两属性 line1 和 line2　　
DWRUtil.addRows("listTable",obj,[　　
　　　　　 //创建第一列的函数，传入 arr 中某个属性,返回单元格内容, 即逗号前部分　　
　　　　　 function(item){return item.split(',')[0]},　　　
　
　　　　　 //创建第二列的函数，传入 arr 中某个属性,返回单元格内容, 即逗号后部分　　
　　　　　 function(item){return item.split(',')[1];}　　
　　　 ]　　
);　
　　　　 var obj = {line1:'1,Unmi',line2:'2,Kypfos'}; //定义一个对象，两属性 line1 和 line2
　　　　 DWRUtil.addRows("listTable",obj,[
　　　　　　　　　　 //创建第一列的函数，传入 arr 中某个属性,返回单元格内容, 即逗号前部分
　　　　　　　　　　 function(item){return item.split(',')[0]},

　　　　　　　　　　 //创建第二列的函数，传入 arr 中某个属性,返回单元格内容, 即逗号后部分
　　　　　　　　　　 function(item){return item.split(',')[1];}
　　　　　　　　 ]
　　　　 );

　　说明：

　　可以看到，要添加的行数由第二个对象参数 obj 的属性个数(for(i in obj))决定的。

　　创建行时传入到 cellfuncs 函数数组中函数的参数是当前遍历的对象 obj 的属性，如上面第一遍是 line1 属性，然而是 line2 属性。cellfuncs 中函数的个数也是不一定的，但不能为空。

　　如果要在某列显示一个 HTML 元素，比如一个链接，我们可以这样写某个列的创建函数。我们第一个例子的基础上修改 cellfuncs 参数中的第二个函数如下：

 

 

 

var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组　　
DWRUtil.addRows("listTable",arr,[　　
　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容，即 id 值　　
　　　　　 function(item){return item.id;},　　　
　
　　　　　 //创建第二列的函数，传入 arr 中的对象,显示 name，并在 name 上加上一个连接　　
　　　　　 function(item){　　
　　　　　　　　 var hLink = document.createElement("a");　　
　　　　　　　　 hLink.setAttribute("href","show.do?id="+item.id);　　
　　　　　　　　 hLink.innerHTML=item.name;　　
　　　　　　　　 return hLink;　　
　　　　　 }　　
　　　 ]　　
);　
　　　　 var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组
　　　　 DWRUtil.addRows("listTable",arr,[
　　　　　　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容，即 id 值
　　　　　　　　　　 function(item){return item.id;},

　　　　　　　　　　 //创建第二列的函数，传入 arr 中的对象,显示 name，并在 name 上加上一个连接
　　　　　　　　　　 function(item){
　　　　　　　　　　　　　 var hLink = document.createElement("a");
　　　　　　　　　　　　　 hLink.setAttribute("href","show.do?id="+item.id);
　　　　　　　　　　　　　 hLink.innerHTML=item.name;
　　　　　　　　　　　　　 return hLink;
　　　　　　　　　　 }
　　　　　　　　 ]
　　　　 );

简单点想，我们为什么不能在这个函数中直接返回 "<a href='show.do?id="+item.id+"'>"+item.name+"</a>" 这么一段 HTML 代码吗？这个想法不错，只是默认情况下，它会把 <a href='show.do?id=1'>Unmi</a> 字符串原样的显示在页面上，而不个链接。所以要引入 DWRUtil.addRows() 的可选的第四个参数中的一个属性 escapeHtml，把它设置为 false 就能显示超链接了。

　　还是在第一个例子的情况下，我们把 DWRUtil.addRows() 函数的调用代码改写成如下：

 

var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组　　
DWRUtil.addRows("listTable",arr,[　　
　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容，即 id 值　　
　　　　　 function(item){return item.id;},　　　
　
　　　　　 //创建第二列的函数，传入 arr 中的对象,显示 name，并在 name 上加上一个连接　　
　　　　　 function(item){　　
　　　　　　　 return "<a href='show.do?id="+item.id+"'>"+item.name+"</a>";　　
　　　　　 }　　
　　　 ],{escapeHtml:false}　　
);　
　　　　 var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'}]; //定义一个含有两个对象的数组
　　　　 DWRUtil.addRows("listTable",arr,[
　　　　　　　　　　 //创建第一列的函数，传入 arr 中的对象,返回单元格内容，即 id 值
　　　　　　　　　　 function(item){return item.id;},

　　　　　　　　　　 //创建第二列的函数，传入 arr 中的对象,显示 name，并在 name 上加上一个连接
　　　　　　　　　　 function(item){
　　　　　　　　　　　　 return "<a href='show.do?id="+item.id+"'>"+item.name+"</a>";
　　　　　　　　　　 }
　　　　　　　　 ],{escapeHtml:false}
　　　　 );

 

到此为止，DWRUtil.addRows() 中的四个参数都用到了，具体的第四个参数 [options] 中还有两个函数属性 rowCreator 和 cellCreator 未涉及到。这两个属性分别是用来创建行(tr) 和单元格(td) 的，所以它们的默认行为分别是

　　return document.createElement("tr");　 和 return document.createElement("td");

　　我们定制这两个创建函数可以对创建的行与单元格用样式来润色，或者在其中附着上事件。看如下的代码：

 

var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'},{id:3,name:'Fantaisa'}];　　
DWRUtil.addRows("listTable",arr,[　　
　　　　　 function(item){return item.id;},　　　
　　　　　 function(item){return item.name;}　　
　　　 ],{　　
　　　　　　　 rowCreator:function(options) { //自定义 tr 的创建行为　　
　　　　　　　　　　　 var row = document.createElement("tr");　　　
　　　　　　　　　　　 row.style.backgroundColor = "rgb(" + (options.rowIndex * 50) + ",100,100)";　　　
　　　　　　　　　　　 return row;　　　
　　　　　　　 },　　　
　　　　　　　 cellCreator:function(options) { //自定义 td 的创建行为　　
　　　　　　　　　　　 var td = document.createElement("td");　　　
　　　　　　　　　　　 td.style.fontWeight = "bold";　　　
　　　　　　　　　　　 return td;　　　
　　　　　　　 }　　　
　　　　　 }　　
);　
　　　　 var arr = [{id:'1',name:'Unmi'},{id:2,name:'Kypfos'},{id:3,name:'Fantaisa'}];
　　　　 DWRUtil.addRows("listTable",arr,[
　　　　　　　　　　 function(item){return item.id;},
　　　　　　　　　　 function(item){return item.name;}
　　　　　　　　 ],{
　　　　　　　　　　　　 rowCreator:function(options) { //自定义 tr 的创建行为
　　　　　　　　　　　　　　　　 var row = document.createElement("tr");
　　　　　　　　　　　　　　　　 row.style.backgroundColor = "rgb(" + (options.rowIndex * 50) + ",100,100)";
　　　　　　　　　　　　　　　　 return row;
　　　　　　　　　　　　 },
　　　　　　　　　　　　 cellCreator:function(options) { //自定义 td 的创建行为
　　　　　　　　　　　　　　　　 var td = document.createElement("td");
　　　　　　　　　　　　　　　　 td.style.fontWeight = "bold";
　　　　　　　　　　　　　　　　 return td;
　　　　　　　　　　　　 }
　　　　　　　　　　 }
　　　　 );

 

 

　　上面两个函数 rowCreator 和 cellCreator 需传入一个对象参数，这个参数有七个属性，分别是 rowCreator cellCreator rowData rowIndex rowNum data cellNum。

　　

 一曲终了！