您现在的位置: 365建站网 > 365文章 > 使用ExtJs在客户端实现主从表的简单维护

使用ExtJs在客户端实现主从表的简单维护

文章来源:365jz.com     点击数:949    更新时间:2009-09-14 10:27   参与评论

      在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)相似,不同在于,处理结果是在表单提交后的回调函数中进行处理。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (949人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号