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


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

「好的,之前我作這方面的東西,我給你設計了一份表結構,你先拿去看看。」json

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

「廠長,是否是沒有發完,怎麼就一個表?」ide

我就知道你會這麼問,我如今給你解釋一下重點字段的含義。」工具

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

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

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

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

「明白了,這樣作確實好,能夠少用到多表。」orm

「好的,」閒話少說,我給你看第一個界面,咱們在作界面佈局的時候要考慮用戶操做便捷性因此能夠作成嚮導式中。」htm

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

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

相關文章
相關標籤/搜索