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

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

“廠長，是不是沒發完，怎么就一個表？”

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

數據表：將表單上的內容保存到哪個表。

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

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

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

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

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

“演示地址就是下面這個，你可以去看看”

http://www.learun.cn:8090?、 用戶名：System，密碼：0000

“廠長，這里點下一步就是跳到一個新的頁面嗎？”

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

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

<div?class="widget-body"><div?id="wizard"?class="wizard"?data-target="#wizard-steps"?><ul?class="steps"><li?data-target="#step-1"?class="active"><span?class="step">1</span>基本配置<span?class="chevron"></span></li><li?data-target="#step-2"><span?class="step">2</span>表單設計<span?class="chevron"></span></li><li?data-target="#step-4"><span?class="step">3</span>創建完成<span?class="chevron"></span></li></ul></div><div?class="step-content?wizard-step-content"?id="wizard-steps"><div?class="step-pane?wizard-step-pane?active"?id="step-1"></div><div?class="step-pane?flowapp"?id="step-2"><div?id="frmdesign"></div></div><div?class="step-pane"?id="step-4"><div?class="drag-tip"><i?class="fa?fa-check-circle"></i><p?>設計完成,請點擊保存</p></div></div></div><div?class="form-button"?id="wizard-actions"><a?id="btn_last"?disabled?class="btn?btn-default?btn-prev">上一步</a><a?id="btn_next"?class="btn?btn-default?btn-next">下一步</a><a?id="btn_caogao"?class="btn?btn-info">保存草稿</a><a?id="btn_finish"?disabled?class="btn?btn-success"?οnclick="finishbtn();">保存</a></div> </div>

再來看一下JS

????????//加載導向$('#wizard').wizard().on('change',?function?(e,?data)?{var?$finish?=?$("#btn_finish");var?$next?=?$("#btn_next");if?(data.direction?==?"next")?{switch?(data.step)?{case?1:return?bindingBase();break;case?2://綁定表單if?(!bindingFrm())?{return?false;}$finish.removeAttr('disabled');$next.attr('disabled',?'disabled');$('#btn_caogao').attr('disabled',?'disabled');break;default:break;}}?else?{$finish.attr('disabled',?'disabled');$next.removeAttr('disabled');$('#btn_caogao').removeAttr('disabled');}});

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

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

?function?setFrmInfo(data){var?_height?=?$(window).height()?-?87?<?410???410?:?$(window).height()?-?87;postData.FrmContent?=?data.FrmContent;if?(data.isSystemTable?==?"0")?{frmapp?=?$('#frmdesign').frmDesign({Height:?_height,frmContent:?postData.FrmContent});}else?{var?_frmdatabase?=?[];for?(var?i?in?frmdatabase){if?(frmdatabase[i].column?!=?postData.FrmTableId){_frmdatabase.push(frmdatabase[i]);}}frmapp?=?$('#frmdesign').frmDesign({Height:?_height,tablefiledJsonData:?_frmdatabase,isSystemTable:?postData.isSystemTable,frmContent:?postData.FrmContent});}}function?bindingFrm()?{var?frmcotentls?=?frmapp.getData();if?(!frmcotentls)?{return?false;}postData.FrmContent?=?JSON.stringify(frmcotentls);return?true;}/*=========表單選擇（end）====================================================================*//*=========創建完成（begin）==================================================================*/function?finishbtn()?{postData["EnabledMark"]?=?1;$.SaveForm({url:?"../../FlowManage/FormDesign/SaveForm?keyValue="?+?keyValue,param:?postData,loading:?"正在保存數據...",success:?function?()?{$.currentIframe().$("#gridTable").trigger("reloadGrid");}})}

后臺代碼：

????????///?<summary>///?保存用戶表單（新增、修改）///?</summary>///?<param?name="keyValue">主鍵值</param>///?<param?name="userEntity">用戶實體</param>///?<returns></returns>[HttpPost][ValidateAntiForgeryToken][AjaxOnly]public?ActionResult?SaveForm(string?keyValue,?WFFrmMainEntity?userEntity){wfFrmMainBLL.SaveForm(keyValue,?userEntity);return?Success("操作成功。");}

????????///?<summary>///?保存表單///?</summary>///?<param?name="entity">表單模板實體類</param>///?<param?name="keyValue">主鍵</param>///?<returns></returns>public?int?SaveForm(string?keyValue,WFFrmMainEntity?entity){try{if?(string.IsNullOrEmpty(keyValue)){entity.Create();this.BaseRepository().Insert(entity);}else{entity.Modify(keyValue);this.BaseRepository().Update(entity);}return?1;}catch(Exception){throw;}}

就這么簡單，一個功能就完了。

轉載于:https://blog.51cto.com/2165201/1791376

總結

以上是生活随笔為你收集整理的如何提高码农产量，基于ASP.NET MVC的敏捷开发框架之自定义表单开发随笔四的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。