“厂长,上一次我们讲过了工作流的整体规划,今天我要动手做啦!我想先把工作流的自定义表单做出来。” “好的,以前我做这方面的东西,我给你设计了一份表结构,你先拿去看看。” &ldqu ...
“厂长,上一次我们讲过了工作流的整体规划,今天我要动手做啦!我想先把工作流的自定义表单做出来。”
“好的,以前我做这方面的东西,我给你设计了一份表结构,你先拿去看看。”
“演示地址就是下面这个,你可以去看看”
http://www.learun.cn:8090 、 用户名:System,密码:0000
“厂长,这里点下一步就是跳到一个新的页面吗?”
“当然不是,其实是多个DIV之间的切换。来我给你看看代码。”
“别个这个页面看起来很复杂的样子,其实就是几个div+js实现的。先看html”
<div > <div id="wizard" data-target="#wizard-steps" > <ul > <li data-target="#step-1" ><span >1</span>基本配置<span ></span></li> <li data-target="#step-2"><span >2</span>表单设计<span ></span></li> <li data-target="#step-4"><span >3</span>创建完成<span ></span></li> </ul> </div> <div id="wizard-steps"> <div id="step-1"> </div> <div id="step-2"> <div id="frmdesign"></div> </div> <div id="step-4"> <div > <i ></i> <p >设计完成,请点击保存</p> </div> </div> </div> <div id="wizard-actions"> <a id="btn_last" disabled >上一步</a> <a id="btn_next" >下一步</a> <a id="btn_caogao" >保存草稿</a> <a id="btn_finish" disabled 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"); } }) }
原标题:如何提高码农产量,基于ASP.NET MVC的敏捷开发框架之自定义表单开发随笔四
关键词:ASP.NET
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。