基于WebForm.Panel控件的单据模板(增强版)
前段时间写了篇类似的文章,自己在使用过程中,也没出现什么问题.不过,上周出差的时候,客户的一个需求,使用那篇文章的思路就不可以了.原因如图-1所示.简单说,是某一面板下,即有TextBox这样的单条数据控件,也同时会有GridView这样的多表控件.
而且,像TextBox这样的单条数据控件,它所对应的Db表可能也不止是一个.因此,它的思路要有所调整.现调整过程如下:
图-1
在调整之前,额外说下如图-1所示多条数据控件,微软提供了GridView,其他第三方控件也有自己的这种控件.实现方式有很多种,这里我选用了JQueryEasyUI V1.2.1类库中的datagrid控件,稍加整理,还是挺好用的,轻便简单.看下实际效果图,如图-2所示.
图-2
需要说明的是,他提供的录入方式有很多,除了截图中的text编辑框录入方式,还提供了textarea,checkbox,numberbox,validatebox,datetbox,combobox,combotree的多种方式.如何使用,大家可以参考JQuery EasyUI的示例demo,很全的.
我们再看它如何加载栏目和填充数据的,如图-3和图-4所示
图-3
图-4
说得简单些,就是拼接htmltable的字符串,加载的时候,如图-5所示.
这里还有一点要说明,我不是在后台直接使用HtmlTable的类,而且使用了HtmlGenericControl这个通用控件,创建时生成一个div对象,然后再对div内容赋值就可以了.至于为何不直接使用HtmlTable类,原因是我并没有找到相应的thead和tbody类,而EasyUI的datagrid格式必须要包含这几个对象,所以没有使用它.感觉使用div也是比较简便的,呵呵,看大家喜好了.我这里只提供一个思路.
好了,现在我们正式开始调整
步骤1: XML配置文件没有变动,只是创建控件的时候,增加了对button和webhtmltable控件的动态创建.webhtmltable控件就是我上面介绍的用于明细数据录入的控件,如图-6所示
图-6
从代码来看,controltitle就是栏目标题,controlid就是栏目名称,width和editor(编辑类型)目前都是写死的,当然也是可以配置出来的
步骤2:创建Panel子控件的时候,如图-7所示.这是页面Page_Load事件的代码,Create部分放在了!IsPostBack的外面,绑定下拉菜单数据源的部分放在了里面,之前测试发现全放外面,每次在后台取值的时候,总取不到下拉菜单的值,原来是每次都重新加载一次.如果在前台获取就不会有这个问题
图-7
我们看下根据XML文件中的配置生成的单据页面效果图,如图-8所示
图-8
说明
1. 在Create控件过程中,记录了控件名称和编辑类型,作用是在前台获取控件值的时候,直接可以获取用到的值就可以,如图-9所示.控件名称和编辑类型是通过json格式存储的,字符串的方式在前后台交互是最方便快捷的
图-9
2. 在Create控件过程中,也记录了哪些控件是必输的,这样判断哪些控件必输时,直接通过修改XML配置文件即可
图-10
至此,改造工作已经完成.现在我们继续处理数据取值的问题.这里我建议在前台获取控件值,然后通过Ajax方式提交到后台,而不是直接触发页面后台某个按钮的单击事件.因为在处理有级联操作的下拉菜单时,有的下拉菜单的数据项,是在前台通过Ajax方式加载的,这种下拉菜单选中项在后台是无法获取到的.
取完值以后,交给后台的控件值数据,也是json格式字符串,现在我们就要对控件值进行解析了.
在前面我们已经说过,一个Panel面板内,控件所对应的Db表可能是多个,因此,我们在取值时,是依据Db表名称进行分类取值,控件和Db表和栏目对应关系在配置文件有所对应.这样处理还有一个好处,就在多个Panel控件同时使用的时候,一个Db表的栏目可以放在多个Panel控件中同时维护.这样我们从每个Panel控件中获取到的Db栏目值,可以拼接在一起,然后再统一执行数据的增删修改操作就可以了.
不知道说得是否清楚?有问题或者其他思路,欢迎大家留言!
示例代码