`
holdbelief
  • 浏览: 707720 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    一个DWR实现table的小例子

    5. **HTML结构**:创建一个HTML表格`&lt;table id="myTable"&gt;...&lt;/table&gt;`,并使用JavaScript动态填充数据。 这个例子展示了DWR如何简化Web应用中的数据获取和显示过程,同时也揭示了如何结合使用DWR和SQL Server 2005...

    dwr城市选择的联动,util.js方法的使用,动态table

    总结起来,"dwr城市选择的联动,util.js方法的使用,动态table"涉及的技术主要包括DWR框架、JavaScript DOM操作以及服务器端与客户端的数据交互。这些技术的综合运用,可以创建出高效、实时的Web应用,满足用户对...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    DWR (编辑Table)

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许Web应用程序在客户端和服务器之间进行实时的、异步的通信。这个技术的核心概念是它打破了传统的HTTP请求-响应模型,使得JavaScript代码可以直接调用服务器端的...

    dwr 自动完成生成表格的例子

    "DWR 自动完成生成表格的例子" 指的是使用 Direct Web Remoting (DWR) 技术来实现一个具有自动完成功能的表格。DWR 是一种允许 JavaScript 与服务器端 Java 代码进行交互的开源库,特别适用于创建动态、交互性强的...

    DWR生成目录树

    在本主题中,我们将深入探讨如何使用DWR生成目录树,这在构建动态的、交互性强的Web应用时尤其有用。 目录树是一种数据结构,通常用于表示文件系统或组织层次结构。在Web应用中,用户可能需要浏览多级目录结构,...

    JAVA AJAX中使用DWR获取后台list并在页面 用表格动态显示

    DWR(Direct Web Remoting)是一个开源框架,它简化了AJAX在Java后端与前端JavaScript之间的通信。在这个项目中,DWR被用来实现在不刷新整个页面的情况下,从后台获取list数据并动态地在表格中展示,同时还有二级...

    简单使用dwr完整例子

    Direct Web Remoting (DWR) 是一个开源Java库,它允许Web应用程序在浏览器和服务器之间进行实时、异步通信,从而实现类似AJAX的功能。在这个"简单使用DWR完整例子"中,我们将深入理解DWR的基本概念、配置、以及如何...

    dwr demo dwr简单使用

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端与服务器端的Java对象进行交互,实现动态的Web应用。DWR简化了AJAX(Asynchronous JavaScript and XML)的开发,使得开发者可以像调用...

    dwr填充表格示例dwr填充表格示例dwr填充表格示例

    DWR (Direct Web Remoting) 是一个开源JavaScript库,它允许Web应用程序在客户端与服务器之间进行实时、异步通信,无需使用XMLHttpRequest(Ajax)或IFrame。在本示例中,我们将深入探讨如何使用DWR填充表格,这是...

    初学dwr时做的一个项目实例(代码全)

    在这个"初学DWR时做的一个项目实例"中,我们将深入探讨DWR的核心概念、工作原理以及如何通过实际代码来运用这些知识。 1. **DWR的基本概念** DWR使得JavaScript可以调用Java方法,仿佛它们都是本地函数一样。这极...

    DWRtree DWR实现AJAX的一个树形

    在标题中提到的"DWRtree DWR实现AJAX的一个树形",指的是使用DWR来创建一个基于AJAX的动态树形结构。这种树形结构通常用于网站导航、文件目录展示或者层级数据的交互操作。通过AJAX,用户可以在不刷新整个页面的情况...

    dwr动态生成表格,显示数据正在加载..窗口

    窗口" 暗示了这是一个关于使用Direct Web Remoting (DWR)技术在Web应用中动态创建表格,并在数据加载期间显示“加载中”提示的教程。DWR是一种JavaScript库,允许在浏览器和服务器之间进行实时的异步通信,类似于...

    DWR技术文档、快速使用DWR、java技术

    DWR作为Java世界中的一个强大工具,极大地简化了AJAX开发,使得JavaScript能够轻松地与服务器进行通信。通过理解其核心功能、配置步骤以及使用流程,开发者可以快速地在项目中引入DWR,构建高效、动态的Web应用。

    DWR 框架使用手册

    DWR (Direct Web Remoting) 是一个开源的Java框架,它允许JavaScript在浏览器端直接调用服务器端的Java方法,从而实现动态Web应用中的Ajax功能,即无刷新更新页面。DWR通过在客户端和服务器之间建立一个通信层,使得...

    dwr跨域访问以及dwr的使用+dwr.jar

    Direct Web Remoting (DWR) 是一个开源Java库,它允许Web应用程序在浏览器和服务器之间进行实时、安全的双向通信,有效地打破了JavaScript和Java之间的壁垒。这个技术在2005年推出,主要解决了AJAX(异步JavaScript...

    学习dwr的一个例子

    DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在浏览器端与服务器端的Java对象进行直接交互,实现动态Web应用。通过DWR,开发者可以在不刷新整个页面的情况下更新部分网页内容,提高了用户体验。...

    DWR小代码小例子

    这个"TestDWR"文件很可能是DWR的一个简单示例项目,用于演示如何配置和使用DWR框架。 在DWR的实例中,主要涉及以下几个关键知识点: 1. **DWR的配置**:首先,你需要在Web应用的`web.xml`文件中配置DWR的Servlet,...

    DWR的使用方法

    **DWR(Direct Web Remoting)使用方法详解** DWR,全称为Direct Web Remoting,是一种开源Java技术,用于在Web应用程序中实现浏览器与服务器之间的实时双向通信。它允许JavaScript直接调用Java方法,就像它们在...

    dwr 包的 使用入门

    Direct Web Remoting (DWR) 是一种开源的Java库,它...以上就是DWR包的使用入门,从安装配置到实际调用,涵盖了一个完整的DWR应用开发流程。通过学习和实践,你可以更好地理解和利用DWR来构建高效、交互性强的Web应用。

Global site tag (gtag.js) - Google Analytics