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， 用於確保我們和服務器端僅做了一次交互。