“廠長，上一次我們講過了工作流的整體規劃，今天我要動手做啦！我想先把工作流的自定義表單做出來。”
“好的，以前我做這方面的東西，我給你設計了一份表結構，你先拿去看看。”
“廠長，是不是沒發完，怎麼就一個表？”
“我就知道你會這麼問，我現在給你解釋一下重點字段的含義。”
資料表：将表單上的内容儲存到哪個表。
關聯表的主鍵：要儲存表單資料那張表的主鍵。
是否需要建表：是否需要把表單中的資料存入到表中，這裡的意思是，是将表單上面的欄位與資料表的字段一一對應還是直接将整個表單的内容打包存一塊。這裡呢就看使用者的需要啦，如果需要作統計彙總之類的資料分析，就按字段儲存好了，如果不是就可以不用為表單上面每一個欄位都對應到資料字段，這樣操作起來也簡單。
表單内容：注意啦！就是這裡，其實我是想把表單上所有的内容以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;
}
}
就這麼簡單，一個功能就完了。