Chinaunix首页 | 论坛 | 博客
  • 博客访问: 897988
  • 博文数量: 282
  • 博客积分: 10843
  • 博客等级: 上将
  • 技术积分: 2435
  • 用 户 组: 普通用户
  • 注册时间: 2006-07-01 15:23
文章分类

全部博文(282)

文章存档

2013年(1)

2012年(18)

2011年(14)

2010年(30)

2009年(48)

2008年(55)

2007年(55)

2006年(61)

分类: 系统运维

2010-05-06 17:13:31

    使用 DWR一个常用的操作就是取到的数据往表格里填充,这就是 DWR 的 DWRUtil.addRows() 操作了,本篇就是以例子详细说明这个函数的用法。而另一个移除所有表格行的操作

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" 标记了一个表格的 我们以后的 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>


    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;}
         ]
     );
}


    说明:

    要添加的行数由第二个数组参数 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;}
    ]
);


    下面我们来看第二个参数 array 为对象的情况时的代码:

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;
      }
    ]
);


    简单点想,我们为什么不能在这个函数中直接返回 ""+item.name+"" 这么一段 HTML 代码吗?这个想法不错,只是默认情况下,它会把 Unmi 字符串原样的显示在页面上,而不个链接。所以要引入 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 ""+item.name+""
;
      }
    ],{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;
        }
      }
);


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

    我想,上面那么多例子,对于 DWRUtil.addRows() 函数能应用到的场合应该都述及到了。

参考:1.
        2. http://www.blogjava.net/botson/archive/2008/04/23/194952.html
        3. http://hi.baidu.com/sayjava/blog/item/f2dc1ccbf8ab55f852664f19.html
阅读(1405) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~