使用dwr时动态生成table的一个小技巧

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里。留着记录用。

我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个td中进行动态链接,后来才发现原来在cellfuncs中覆盖了我想定义的输出,不过无意中让我发现了可以用下面的方法来处理

方法如下:

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 = "<a href='#' onclick=\"javascript:mydel(

'"+options.rowData.testId+"');\">删除</a>";

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 "<input type='button' value='innerHTML Test'

onclick='alert(\"" + data + "\");'>"; }

]

注意:这里定义的数组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 = "<a href='#' onclick=\"Javascript:mydel

('"+options.rowData.testId+"');\">删除</a>";

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的人也可以轻松上阵。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航