网上有一些关于DWR的文章如：AJAX made simple with DWR ，DWR让AJAX如此简单等，对于DWRUtil.addRows有示例用法。

下面是来自DWR的官访文档中的关于DWRUtil.addRows和DWRUtil.removeAllRows一部分。这是完整的dwr1.1中关于DWRUtil.addRows和DWRUtil.removeAllRows用法。

util.js: Generating Tables

DWR helps you to manipulate tables using 2 functions: DWRUtil.addRows() and DWRUtil.removeAllRows(). The first parameter to both is the id of the table, tbody, thead or tfoot to edit. Generally it makes sense to use tbody because it enables you to keep header and footer rows unaltered, and it is a neat work-around to some hard to track-down Internet Explorer bugs.

DWRUtil.removeAllRows()

Syntax:

DWRUtil.removeAllRows(id);

Description:

Removes all the rows in a table element specified by id.

Parameters:

• id: The id of the table element (preferably a tbody element)

DWRUtil.addRows()

Syntax:

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

Description:

Adds rows to a table element specified by id. It takes it's data from an array and creates a row in the table for each entry in the array. A column is created for each function in the cellfuncs array. The cells are created by passing each array entry to each 'cellfunc' in turn.

As of DWR 1.1, addRows() also works with objects. If you pass in an object in place of an array we will create cells by passing object values to the cell functions.

You could write some pseudo-code that looks something like this:

for each member in array
  for each function in cellfuncs
    create cell from cellfunc(array[i])

Parameters:

• id: The id of the table element (preferably a tbody element)
• array: Array (or object from DWR 1.1) containing one entry for each row in the updated table
• cellfuncs: An array of functions (one per column) for extracting cell data from the passed row data
• options: An object containing various options (see below)

The options available are:

• rowCreator: a function that will create a row for you (e.g. you wish to add css to the tr). The default returns document.createElement("tr")
• cellCreator: a function to create a cell, (e.g. to use a th in place of a td). The default returns document.createElement("td")

Demo

For simplicity in this demo we will be using a simple array of strings, but you can have anything in your array. It's most powerful when used with an array of objects.

For demo purposes, we have a table with a tbody element with id="demo1":

var cellFuncs = [
  function(data) { return data; },
  function(data) { return data.toUpperCase(); },
  function(data) {
    return "<input type='button' value='Test' onclick='alert(\"Hi\");'/>";
  },
  function(data) { return count++; }
];

var count = 1;
DWRUtil.addRows( "demo1", , cellFuncs);

DWRUtil.removeAllRows('demo1');

The cellFuncs can return either an HTML string, or a DOM object to populate more complex controls. Generally HTML strings are a better choice because creating them is more compact, and it's a great workaround to some Internet Explorer bugs. However if a pure XHTML model ever becomes more predominant, DOM manipulation may become required.

Advanced Options

The options object is new in DWR version 1.1

We can use the options object to pass a cell creator function or a row creator function.

By default DWR provides these creator functions for you. They look something like this:

function defaultRowCreator(options) {
  return document.createElement("tr");
};

function defaultCellCreator(options) {
  return document.createElement("td");
};

The options object passed to you by DWR is the same options object that you passed in originally (containing the rowCreator and cellCreator functions). The following fields will have been altered:

• 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)

But you can provide your own versions like this:

DWRUtil.addRows( "demo2", , cellFuncs, {
  rowCreator:function(options) {
    var row = document.createElement("tr");
    var index = options.rowIndex * 50;
    row.style.color = "rgb(" + index + ",0,0)";
    return row;
  },
  cellCreator:function(options) {
    var td = document.createElement("td");
    var index = 255 - (options.rowIndex * 50);
    td.style.backgroundColor = "rgb(" + index + ",255,255)";
    td.style.fontWeight = "bold";
    return td;
  }
});

DWRUtil.removeAllRows('demo2');

Using Arrays of Objects

The Table Editing example contains code that uses an array of objects rather than the more simple array of strings on this page.

发表评论

IT瘾于2007年3月8日 下午01时18分10秒发布 #