DWZ生成动态表单

最近在项目中使用了DWZ这一简单实用的国产JQuery UI框架。通过这段时间的接触，感觉DWZ确实很好用，提供了很多常见的UI。

 

通过DWZ，开发人员可以在不写JavaScript的情况下，使用用Ajax做项目和使用各种UI组件。 基本可以保证程序员不懂JavaScript， 也能使用各种页面组件和Ajax技术。 如果有特定需求也可以扩展DWZ做定制化开化。

 

今天主要是来讲解一下如何生成动态表单，首先看一下效果图：

 

这样就可以一次增加多条数据了，如果一次只能增加一条数据，那么要录入多条数据就是一件麻烦的事情了。

 

那么如何实现呢？通过浏览DWZ，发现在dwz\demo\database\db_widget.html文档中，对应的界面是suggest+lookup+主从结构。在这个界面中有一个“主从结构”按钮（如果你没有发现，那就拖动一下右边的垂直滚动条，它就隐藏在下面）。这个样式是非常符合我的要求的，于是果断的将相应的代码copy下来在改动一下，如下：

<div class="tabsContent" style="height: 450px;">
            <div>
                <table class="list nowrap itemDetail" addButton="新建课程" width="100%">
                    <thead>
                        <tr>
                        <th type="lookup" name="teachCourseList[#index#].teacher.teacherName" lookupGroup="teachCourseList[#index#].teacher" lookupUrl="${contextPath }/teachCourse/showAllTeacher.action"  size="12" fieldClass="required">教师</th>
                    <th type="text" name="teachCourseList[#index#].score"  size="12" fieldClass="required digits">学分</th>
                    <th type="text" name="teachCourseList[#index#].totalStudyHour" size="12" fieldClass="required digits">学时</th>
                    <th type="del" width="60">操作</th> 
                        </tr>
                    </thead>
                <tbody>
                </tbody></table>
            </div>
        </div>

首先说明一下，在课程实体（teachCourse.class）中，有一个属性teacher，它的类型是教师实体类（teacher.class）他们之间是mony-to-one 的映射关系。

 

在上面的<th type="lookup"....>中，这是一个查找带回的标签。这样可以得到相应的教师姓名（teacherName）以及教师ID（teacherId）.

前台的jsp页面中的代码就是这些，而在后面的action中，只需要做如下定义：

private ArrayList<TeacherCourse>  teachCourseAList； （注意：要有get  set方法）

 

这样就可以在action中获取界面上输入的值了？通过测试，发现在控制台上总是出现一个错误：Error setting expression 'teachCourseList[0].teacher.id' with value '[Ljava.

可是我的teacher.class类中没有“id”这个属性，而是teacherId这个属性啊。这是怎么回事呢？

 

其实，在<th type="lookup"....>中，它有一个默认的lookupId的属性，它的含义就是默认lookupGroup=“***”中***实体的标示是id，所以改正的方法就是在<th type="lookup"....>中增加lookupPk="teacherId"就可以了。

<th type="lookup" name="teachCourseList[#index#].teacher.teacherName" lookupPk="teacherId" lookupGroup="teachCourseList[#index#].teacher" lookupUrl="${contextPath }/teachCourse/showAllTeacher.action"  size="12" fieldClass="required">教师</th>