[ECSide文档] ECSide可编辑列表的实现(更新 2007-06-06 15:55)

fins 2007-06-06
ECSide可以帮助开发者相对简单的实现可编辑列表

结合示例 demo.do?actionMethod=doQuery (demo_action.jsp) 为例,该例子crud操作的后台全部采用的是struts+DAO,基于数据库分页.


首先,通过设置 ecside的属性,使列表支持可编辑.
<ec:table editable="true" .... 


此时默认所有列就都支持了可编辑功能.

如果某列不希望被编辑,那么可以使用 列的 editable="false"属性,如示例中的 用户名列
<ec:column width="120" property="USERNAME" title="用户名"  editable="false" />

在把列表设置为可编辑状态后,必须要给 ec:row标签指定recordKey属性.
该属性的值为每条记录的唯一标识,可以理解为列表数据在数据库中对应的主键ID.



下面再以"电子信箱列"为例,详细介绍一下update的操作流程.
"电子信箱列"代码如下.
<ec:column width="120" property="EMAIL" title="电子信箱" />

此时,该列具有这样的特性: "双击"某条记录的该列单元格,则进入"文本框编辑状态",
编辑完后,文本框失去焦点时,该单元格回复文本状态,同时背景色发生变化,标识出曾经被编辑过.

如果您不想使用双击,而希望使用其他事件来触发编辑状态,可使用column的editEvent属性:
editEvent="ondblclick/onclick/onmouserover". 默认是ondblclick


进入编辑状态后,使用了类似js模板技术的技术.默认状态下,ecside会调用id=ecs_t_input的模板.

在jsp页面内,需要引入相应的模板,该模板完全是灵活的可自定义的,代码如下:

<textarea id="ecs_t_input" rows="" cols="" style="display:none">
	<input type="text" class="inputtext" value="" onblur="ECSideUtil.updateEditCell(this)" 
	 style="width:100%;" name="" />
</textarea>


模板写在一个隐藏的 textarea 内,(至于为什么这么做,这么做的好处与不足不在本文讨论范围内)
该模板有一个id,用来区分多个不同的模板.模板的内容就是标准的html页面元素.
这些元素的 name 和value要等于空.
其中onblur="ECSideUtil.updateEditCell(this)" 使得单元格能够"编辑完后,文本框失去焦点时,该单元格回复文本状态".

如果想加入一些自定义的特性,例如校验,那么可以修改模板内的元素,例如加入onkeypress进行输入时校验.
或者修改onblur事件对应的方法,加入验证等等.
在这方面,模板机制为大家提供了足够的灵活性.

编辑完成后的,点击下方的 保存按钮(软盘),ecside会利用js来收集页面上所有被修改过的元素的值,然后将他们提交给后台.
提交采用批量提交,也就是说后台可以使用request.getPrarmeterValues()来取得提交的所有数据的某一列的值.

数据提交到后台所使用的参数名为"column的property".

例如"电子信箱列"提交时,相当于 提交了一个叫 EMAIL 的参数
后台使用 request.getPrarmeterValues("EMAIL")可取得提交的所有的EMAIL的值.


知道了数据提交的方式,后台就可以写一个servlet/action,来接收这些数据以及对他们进行处理.
然后把这个servlet/action的url写到 ec:table 的 updateAction属性中.


(待续...)
vision2000 2007-09-11
大叔,你怎么只写了一半啊,我等着用
aiaiya 2007-10-11
谢谢fins。不同意楼上的说话
gaozengguang 2009-12-02
什么时候您老有空还是补全了吧!我看网上的资料都是转载您的!
Global site tag (gtag.js) - Google Analytics