创建table
本例子介绍一些在DWR2.0中才出现的特征。
当页面被第一次加载的时候,onload事件将调用服务器端的People.getAllPeople()函数返回一个people对象的数组。
JavaScript使用cloneNode()在表格内为每一个返回的person建立一列。具体来说,对每一个person
引用
dwr.util.cloneNode("pattern", { idSuffix:person.id });
这将建立一个id为pattern节点的copy。
假如原有的node如下:
引用
<div id="pattern"><input id="edit"/></div>
经过上述操作后(假定person.id=
42),我们将得到:
引用
<div id="pattern"><input id="edit"/></div>
<div id="pattern42"><input id="edit42"/></div>
之后, 我们使用setValue 为新的克隆的列赋值。
dwr.util.setValue("tableName" + id, person.name);
dwr.util.setValue("tableSalary" + id, person.salary);
dwr.util.setValue("tableAddress" + id, person.address);
我们需要将模式列设置为不可见,克隆列设置为可见, 如此,将需要如下操作
引用
$("pattern" + id).style.display = "table-row";
编辑form
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表单中的名字相同的字段关联起来。
更新服务器
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, 用于确保我们和服务器端仅做了一次交互。
分享到:
相关推荐
表格通常由HTML `<table>`元素构建,每个单元格可能包含一个可编辑的输入控件,如`<input>`或`<textarea>`。JavaScript代码负责监听这些控件的事件,如`onChange`,并在事件触发时调用DWR服务端的方法。 5. **DWR...
在实际开发中,DWR常被用于动态数据展示和用户交互,比如实时查询、表格数据编辑等场景。通过DWR,开发者可以构建更加响应式的Web应用,减少不必要的页面跳转和刷新,提高用户体验。 总结: DWR的 `addOptions()` ...
总的来说,实现"动态添加编辑拖拽的树形表格"需要对EXT和jQuery有深入理解,熟悉前端的事件处理和数据操作,同时还需要掌握一定的后端交互技术,如DWR。这样的功能在企业级应用中非常常见,提高了用户界面的交互性和...
基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD应用 使用jQuery easyUI 创建一... easyui DWR加载 easyUI 主题
此外,DWR(Dreamweaver Remote)可能是指Dreamweaver的远程文件管理功能,允许用户在本地编辑远程服务器上的文件,提高了开发效率。使用这款软件,用户不仅可以学习HTML标签,还能进行实时的查询和实践操作,是提高...
- **保存记录(save())**:保存单条记录,采用DWR实现页面局部刷新。 以上规范与实践不仅限于Web开发的基础要求,还深入到了特定框架与库的使用细节,旨在提高代码可读性、维护性和国际化支持,同时确保页面元素的...