DWR (编辑Table)

[b]创建table[/b]

本例子介绍一些在DWR2.0中才出现的特征。
当页面被第一次加载的时候，onload事件将调用服务器端的People.getAllPeople()函数返回一个people对象的数组。

JavaScript使用cloneNode()在表格内为每一个返回的person建立一列。具体来说，对每一个person
[quote]dwr.util.cloneNode("pattern", { idSuffix:person.id });[/quote]这将建立一个id为pattern节点的copy。

假如原有的node如下：
[quote]<div id="pattern"><input id="edit"/></div>[/quote]经过上述操作后(假定person.id=[color=red]42[/color])，我们将得到：
[quote]<div id="pattern"><input id="edit"/></div>
<div id="pattern42"><input id="edit42"/></div>[/quote]

之后， 我们使用setValue 为新的克隆的列赋值。

dwr.util.setValue("tableName" + id, person.name);
dwr.util.setValue("tableSalary" + id, person.salary);
dwr.util.setValue("tableAddress" + id, person.address);

我们需要将模式列设置为不可见，克隆列设置为可见， 如此，将需要如下操作
[quote]$("pattern" + id).style.display = "table-row";[/quote]


[b]编辑form[/b]

function editClicked(eleid) {
  // we were an id of the form "edit{id}", eg "edit42". We lookup the "42"
  var person = peopleCache[eleid.substring(4)];
  dwr.util.setValues(person);
}

dwr.util.setValues() 用于将为form表单中的各个字段设值。
对于上例来说， 他会将person中的字段与form表单中的名字相同的字段关联起来。
[b]
更新服务器[/b]

function writePerson() {
  var person = { id:viewed, name:null, address:null, salary:null };
  dwr.util.getValues(person);

  dwr.engine.beginBatch();
  People.setPerson(person);
  fillTable();
  dwr.engine.endBatch();
}

dwr.util.getValues() 用于提交变更到服务器
并且我们使用了batch， 用于确保我们和服务器端仅做了一次交互。