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" name="teachCourseList[#index#].teacher.teacherName" lookupPk="teacherId" lookupGroup="teachCourseList[#index#].teacher" lookupUrl="${contextPath }/teachCourse/showAllTeacher.action"  size="12" fieldClass="required">教師</th>