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>