Domino平臺如何實現自定義表單
做過Domino程序開發的程序猿們都知道一個事情,在這個平臺上開發Web的表單是個頭疼的事兒。因爲開發表單必須使用設計器,而設計器是沒法做到所見即所得。一般是在DW裏編輯好頁面,一點一點往表單裏粘貼,還是挺麻煩的。很多時候,系統的表單頁面是需要修改的,甚至需要由維護人員來修改,這就有點麻煩了。能不能實現一種設計,系統的表單頁面可以靈活的進行修改,而且不是通過設計器來完成,就像用Web上的多文本編輯器一樣修改,那多方便呀?
我們先來分析一下,HTML頁面包含的元素。一般的表單都是具備<html><head><body><form>這些基本元素的。可視部分都在<body>中,與使用這進行數據交互的一般在<form>中(其實沒有<form>標籤也可以提交數據)。就我們此文來講,應該是修改外觀及form表單中的各種控件。有時候甚至只需要增刪文字。而這些內容通通位於<body>標籤內。
這裏有個比較麻煩的問題,如何讀取或爲動態表單中的各控件賦值?如何與後臺數據庫中的字段對應上?如何提交動態表單的數據?
要想實現Web上編輯製作自定義表單,首先我們要集成一個多文本編輯器。筆者就用CKEditor舉例來說吧(本文不涉及怎麼集成CKEditor)。 如下圖所示,這是筆者在Web編輯器中設計的一個用於輸入的表單。爲了方便設計的很簡單,甚至有點磕磣!這是在編輯狀態下顯示的。
再看下面的圖,這是嵌入網頁中後,在瀏覽器中顯示的樣子,與編輯器中看到的基本一致。當然,這只是實現了第一步。
輸入數據後,還要把數據上傳到服務器上。此時應該點擊保存按鈕觸發一個提交的動作。對應的保存按鈕就要寫上一點JS代碼了。
加上這些JS代碼後,只需利用ajax,將JSON格式的數據提交到服務器端即可。是不是很簡單啊?在服務器端,筆者再利用xagent將JSON數據轉換爲POJO對象,然後利用JAVA的反射機制就可以實現數據的保存了,甚至都不用關心字段的名稱。當然這只是簡單的一種場景,如果是複雜的場景就要對數據進行處理了。
剛纔回看了下,截圖裏的代碼格式都是亂的,而且也不清晰,其實就是將form序列化成JSON格式的數據。
完整的例子如下:
<script type="text/javascript">
$(function() {
$("#btsave").click(function() {
var params = $("#frminfo").serializeObject();
console.info(params);
})
});
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
</script>
注意事項:
1.代碼裏最好不要有註釋。
2.CKEditor會把文本中的換行符過濾掉,因此你在編輯器寫好的代碼上傳服務器後再打開會發現換行符都沒了,因此推薦在DM中編輯好後再粘貼到CKEditor中保存。
以上是自定義表單中數據的提交,提交不算完事,還有數據的回顯如何解決那?
<未完>