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