在Web开发方面,实现主从表的维护需要考虑数据类型的转换以及状态保持等问题,之前使用ASP.NET的服务端控件实现了一套,但反复的页面回传,以及服务端的状态同步,造成代码量巨大,且重复代码非常多,十分让人厌烦,后来使用ExtJs在客户端实现了主从表维护的简单维护,这里从问题的分析和解决方法两方面进行说明,将大致的思路记录下来,具体的实现细节就略过了,欢迎感兴趣的朋友一起讨论。
编程么,重要的是思想和过程,不是么?
问题分析:
1.主从表功能组织的页面元素
主表:FormPanel
从表:EditorGridView
2.状态枚举:
1)主从表都为新增状态(标志符ID为-1),
2)主表为更新状态(如ID为100),从表为新增状态(ID为-1,父ID为100)
3)主表为更新状态(如ID为100),从表部分为新增状态(如ID为150,父ID为100),部分为更新状态(ID为-1,父ID为100)
4)主表为更新状态,从表为更新状态
3.数据提交
1)如何组织主从表数据结构
2)如何标志数据状态
3)如何标志数据ID
4)数据提交后,是否需要更新客户端状态?如果需要,如何更新,否则,多次提交怎么办?
4.服务端解析
1)服务端如何解析
2)解析后的对象,如何存储
3)存储后的数据如何通知到客户端状态
解决思路
1)数据的存储:
FormPanel中添加隐藏域:用于保存从表数据(store...的json格式串)
如果有多个从表对象,则添加多个隐藏域字段
2)数据读取和显示
数据读取到界面时,通过服务端返回xml中(主表),其中xml隐藏域节点中添加从表(store json格式)的数据源,
然后客户端成功接收后,读取store,并更新到从表EditorGridView中
3)数据的编辑
主表通过FormPanel进行数据的编辑,从表使用EditorGridView,每个cell通过对应的Editor进行编辑,新增和更新不需要进行特殊处理,
删除时,注意需要判断当前数据是新增还是已保存到数据库的记录,如果是新增数据,则直接从EditorGridView对应的Store中remove该
条数据,后者则设置该记录的状态字段为field.setValue("delete","true"),新增和更新数据的状态字段为{delete:false},然后调用store.filter("delete","false")
对客户端数据进行过滤,不显示已删除的数据。
4)数据的提交
主表FormPanel提交时,需要读取EditorGridPanel从表中的store同步到隐藏域中,然后通过form提交,
5)服务端数据的解析
服务端接收到客户端传来的数据后,解析数据并还原主从表的业务对象,新增和更新通过主键是否为-1进行区别,是否删除通过删除字段delete来区分,
根据状态调用相应的业务逻辑进行处理。
6)处理结果的返回
注意此处同步骤2)相似,不同在于,处理结果是在表单提交后的回调函数中进行处理。
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛