“厂长，上一次我们讲过了工作流的整体规划，今天我要动手做啦！我想先把工作流的自定义表单做出来。”

“好的，以前我做这方面的东西，我给你设计了一份表结构，你先拿去看看。”

“厂长，是不是没发完，怎么就一个表？”

“我就知道你会这么问，我现在给你解释一下重点字段的含义。”

数据表：将表单上的内容保存到哪个表。

关联表的主键：要保存表单数据那张表的主键。

是否需要建表：是否需要把表单中的数据存入到表中，这里的意思是，是将表单上面的栏位与数据表的字段一一对应还是直接将整个表单的内容打包存一块。这里呢就看用户的需要啦，如果需要作统计汇总之类的数据分析，就按字段保存好了，如果不是就可以不用为表单上面每一个栏位都对应到数据字段，这样操作起来也简单。

表单内容：注意啦！就是这里，其实我是想把表单上所有的内容以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;}}

就这么简单，一个功能就完了。