如何提高碼農產量,基於ASP.NET MVC的敏捷開發框架之自定義表單開發


“廠長, 上一次我們講過了工作流的整體規劃,今天我要動手做啦!我想先把工作流的自定義表單做出來。”

“好的,以前我做這方面的東西,我給你設計了一份表結構,你先拿去看看。”

http://img1.mukewang.com/5dbbc88c00017fdc03540314.jpg

“廠長,是不是沒有發完,怎麼就一個表?”

我就知道你會這麼問,我現在給你解釋一下重點字段的含義。”

數據表:將表單上的內容保存到那個表。

關聯表的主鍵:要保存表單數據張表的主鍵。

是否需要建表:是否要把表單中的數據存入到表中,這裏的意思是,是將表單上面的欄位與數據表的字段--對應還是直接將整個表單的內容打包一塊。這裏呢就看用戶的需要啦,如果需要作統計彙總之類的數據分析,就按字段保存好了,如果不是就可以不用爲表單上面每一個欄位都對應數據字段,這樣操作起來也簡單。

表單內容:注意啦!就是這裏,其實我是想把表單上所有的內容以json形式全部保存到一個字段裏這樣後臺不用再單獨去建一張表來保存這些東西,前臺統一去解析就好了。

“明白了,這樣做確實好,可以少用到多表。”

“好的,”閒話少說,我給你看第一個界面,我們在做界面佈局的時候要考慮用戶操作便捷性所以可以做成嚮導式中。”

http://img3.mukewang.com/5dbbc8fb0001bc3c12670713.jpg

“廠長,這裏點一下一步就是跳到一個新的頁面嗎?”

“當然不是,其實是多個DIV之間的切換。來我給你看看代碼。”

“別個這個頁面看起來很複雜的樣子,其實就是幾個div+js實現的。先看html”

http://img2.mukewang.com/5dbbc9dd0001a1b809440625.jpg

再來看一下JS

http://img1.mukewang.com/5dbbc9eb000188ff09610593.jpg

http://img3.mukewang.com/5dbbc9ec0001dda912670713.jpg

“哇,真的呢,這種效果好,果然是可以跳來跳去的,那你現在講一下這個拖拽的表單是怎麼實現的吧。”

“恩,你看看,這個東西的原理其實就是拼接html,左邊放工具欄,工具欄上選擇不同的工具其實就是不同類型的控件,右邊設置控件的屬性。中間顯示效果。”

http://img3.mukewang.com/5dbbca210001871a09450725.jpg

http://img2.mukewang.com/5dbbca21000116ee09610358.jpg

後臺代碼:

http://img3.mukewang.com/5dbbca33000194a609330318.jpg

http://img.mukewang.com/5dbbca330001a33e09580610.jpg

就這麼簡單,一個功能就完成了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章