使用DWR时动态生成TABLE的一个小技巧

导读：
　　新一篇: 文本框内容可以删除，就是不想让用户手工写入我在使用DWR时，试了很多次都无法在动态生成的table中的一个或多个td中进行动态链接，后来才发现原来在cellfuncs中覆盖了我想定义的输出，不过无意中让我发现了可以用下面的方法来处理(http://www.yumt.com/aeonsun)。
　　方法如下：
　　DWRUtil.addRows(id, array, cellfuncs, [options]);
　　这个函数估计调用的人很多，而且现在支持直接将对象传给这个函数，这就方便了许多（以前只能是数组），而且cellfuncs的功能也很强大，一般都会省略options参数（这个参数只用做定义CSS或其它特殊使用，我这里就是在这个参数里做动态链接的处理）。
　　下面就是处理代码：
　　DWRUtil.addRows('testid', myObject, [
　　function(data) { return data.name; },
　　function(data) {
　　//return data.id;
　　//通常都会在这里直接返回处理的数据，如果要实现动态多链接，
　　//那么这里就什么都别输出（当然也可以输出，但这里所有的html标记都会直接显示在页面上，
　　//无法进行解析）
　　//doNothing
　　}],
　　{rowCreator:function(options) {
　　return document.createElement("tr");
　　},
　　cellCreator:function(options) {
　　if(options.cellNum==1){
　　var td = document.createElement("td");
　　td.setAttribute("align","center");
　　var thtml = "　　'"+options.rowData.testId+"');\">删除";
　　td.innerHTML = thtml;
　　return td;
　　}else{
　　return document.createElement("td");
　　}
　　}
　　});
　　cellfuncs中的处理相当重要，当直接返回值时，会影响[options]参数中的处理内容（比如options中要
　　加入的TD内容会无效，当然，td.setAttribute("align","center")等是有效的）。
　　对DWRUtil.addRows(id, array, cellfuncs, [options])的补充：
　　其中：
　　id是table元素的id，最好使用tbody
　　array数据，从1.1开始支持对象
　　cellfuncs: 函数数组，从传递过来的行数据中提取单元格数据。
　　如：
　　var cellfuncs = [
　　function(data) { return data; },
　　function(data) { return data.toUpperCase(); },
　　function(data) {
　　var input = document.createElement("input");
　　input.setAttribute("type", "button");
　　input.setAttribute("value", "DOM Test");
　　input.setAttribute("onclick", "alert('" + data + "');");
　　return input;
　　},
　　function(data) { return ""; }
　　]
　　注意：这里定义的数组size表示td的数量，面data就是array的引用，如果使用convert转换过bean，那么可以直接调用属性。
　　[options]：这个最为有用，也是这里所要说的重点，包含两个对象
　　rowCreator: 一个用来创建行的函数(例如，你希望个tr加个css). 默认是返回一个document.createElement("tr")
　　cellCreator: 一个用来创建单元格的函数(例如，用th代替 td). 默认返回一个document.createElement("td")
　　一般都用不到这个参数，但对于有特殊要求的朋友来说，这就成了重点
　　定义的例子如下：
　　var custoptions = {rowCreator:function(options) {
　　return document.createElement("tr");
　　},
　　cellCreator:function(options) {
　　if(options.cellNum==1){
　　var td = document.createElement("td");
　　td.setAttribute("align","center");
　　var thtml = "删除";
　　td.innerHTML = thtml;
　　return td;
　　}else{
　　return document.createElement("td");
　　}
　　}
　　}
　　其中 options 参数的属性可用的为:
　　rowData: the element value from the array (the same for all cells in a row)
　　rowIndex: the key (if map) or index (if array) from the collection
　　rowNum: The row number counting from 0 in this section (so if you are using tbody, it counts rows in the tbody and not the whole table)
　　data: The 'computed' data value for the cell (cellCreators only)
　　cellNum: The cell number that we are altering counting from 0 (cellCreators only)
　　我在上面用到了rowNum、rowData属性
　　最后还是说一句，DWR太伟大了，让我这个不懂JS的人也可以轻松上阵。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zxl315/archive/2008/05/26/2484170.aspx