深圳龙岗网站建设公司,网络设计网站,个人网站空间购买,百度推广优化构建ASP.NET MVC4EF5EasyUIUnity2.x注入的后台管理系统#xff08;44#xff09;-工作流设计-设计表单 原文:构建ASP.NET MVC4EF5EasyUIUnity2.x注入的后台管理系统#xff08;44#xff09;-工作流设计-设计表单系列目录 设计表单是比较复杂的一步#xff0c;完成一个表单… 构建ASP.NET MVC4EF5EasyUIUnity2.x注入的后台管理系统44-工作流设计-设计表单 原文:构建ASP.NET MVC4EF5EasyUIUnity2.x注入的后台管理系统44-工作流设计-设计表单系列目录 设计表单是比较复杂的一步完成一个表单的设计其实很漫长主要分为四步。 开始之前先说说表的结构。 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的。我总共是设置最高26个字段从A~Z如果超过26个字段的表单是属于硬编码的。但是我认为26个字段已经足够 因为这里我是单表模式比起表关联无限字段理论上性能会更加快特别是当数据库申请带到千万级数据的时候你自己可以设计更加灵活的表单管理 Flow_Form的A~Z对应的是Flow_FlowAttr表中的数据 Flow_FormContent表中的数据就是用户对表单的申请内容。同样从A~Z对应。这个表设计也有缺陷我把内容全部设置为varchar(2048)字段太大可以根据自己的扩展来确定内容是最佳的方式比如A-F是大字段G-L设置的是中级长度的字段M-O是数字的字段等等 准备开始 1.新建控制器FormController用代码生成器即可 新建视图Create.cshtml这里我设计了一个手风琴设计表单的同时设计字段 把代码生成器生成的Form表单的的Create代码放到 第一步设计表单里面 第二步添加字段添加字段是一个DropDownListeasyui-combogrid来组成。 具体代码实现如下 model App.Models.Flow.Flow_FormModel
using App.Common;
using App.Models.Flow;
using App.Admin;
using App.Models.Sys;
{ViewBag.Title 创建;Layout ~/Views/Shared/_Index_LayoutEdit.cshtml;ListpermModel perm (ListpermModel)ViewBag.Perm;if (perm null){perm new ListpermModel();}
}script typetext/javascript$(function () {jQuery(#accordion).accordion({ //初始化accordionfillSpace: true,fit: false,border: false,animate: false});$(#btnSave).click(function () {if ($(form).valid()) {$.ajax({url: Url.Action(Create),type: Post,data: $(form).serialize(),dataType: json,success: function (data) {if (data.type 1) {window.parent.frameReturnByMes(data.message);window.parent.frameReturnByReload(true);window.parent.frameReturnByClose()}else {window.parent.frameReturnByMes(data.message);}}});}return false;});$(#btnReturn).click(function () {window.parent.frameReturnByClose();});//改变字段列表$(#TypeName).change(function () {$(#attrVal).val();$(#formAttrComboGrid).combogrid(setValue, ).combogrid(clear);$(#formAttrComboGrid).combogrid(grid).datagrid(load, { queryStr: $(#TypeName).val() });});});//添加一个字段到表单function AddAttr() {var currentValue $(#attrVal).val();if (currentValue ) {$.messageBox5s(提示, 请选择要添加的字段);}var charNo $(#AttrList tr).size()1;//第几个字符if (charNo 26){$.messageBox5s(提示, 目前设计最高26个字段);return;}var b false;$(#AttrList input[typehidden]).each(function (i) {//判断是否有重复的项目if ($(this).val() currentValue){b true;return;}});if (b){$.messageBox5s(提示, 已经有重复的项目了);return;}var grid $(#formAttrComboGrid).combogrid(grid);//获取表格对象 var row grid.datagrid(getSelected);//获取行数据 var currentChar Attr getChar(charNo);//获取当前的字母var example getExample(row.AttrType);//添加到候选区$(#AttrList).append(tr idtr currentChar td styletext-align:right row.Title /td td example input id currentChar name currentChar typehidden value currentValue //tdtda href\javascript:deleteCurrentTR(tr currentChar );\[删除]/a/td/tr);//设置combogrid为空$(#formAttrComboGrid).combogrid(setValue, );}function deleteCurrentTR(c){ $.messager.confirm(提示, 删除字段吗, function (r) {if (r) {$(# c).remove();}});}function getExample(v){switch (v){case 文本: return input typetext /;case 多行文本: return textarea/textarea;case 数字: return input typetext /; case 日期: return input typetext /;}}function getChar(i){switch (i){case 1: return A; break;case 2: return B; break;case 3: return C; break;case 4: return D; break;case 5: return E; break;case 6: return F; break;case 7: return G; break;case 8: return H; break;case 9: return I; break;case 10: return J; break;case 11: return K; break;case 12: return L; break;case 13: return M; break;case 14: return N; break;case 15: return O; break;case 16: return P; break;case 17: return Q; break;case 18: return R; break;case 19: return S; break;case 20: return T; break;case 21: return U; break;case 22: return V; break;case 23: return W; break;case 24: return S; break;case 25: return Y; break;case 26: return Z; break;default: break;}}/script
div classmvctool bgbHtml.ToolButton(btnSave, icon-save, 保存, perm, Save, true)Html.ToolButton(btnReturn, icon-return, 返回, false)
/divusing (Html.BeginForm())
{div idaccordion classeasyui-accordiondiv title第一步设计表单 styleoverflow: auto; padding: 10px;Html.HiddenFor(model model.Id)table classfromEditTable setTextWidth300tbodytrtd stylewidth: 100px; text-align: right;Html.LabelFor(model model.Name)/tdtd stylewidth: 310pxHtml.EditorFor(model model.Name)/tdtdHtml.ValidationMessageFor(model model.Name)/td/trtrtd stylewidth: 100px; text-align: right;Html.LabelFor(model model.Remark)/tdtd stylewidth: 310pxHtml.TextAreaFor(model model.Remark, 5, 80, new { })/tdtdHtml.ValidationMessageFor(model model.Remark)/td/trtrtd stylewidth: 100px; text-align: right;Html.LabelFor(model model.UsingDep)/tdtd stylewidth: 310pxHtml.EditorFor(model model.UsingDep)/tdtdHtml.ValidationMessageFor(model model.UsingDep)/td/trtrtd stylewidth: 100px; text-align: right;Html.LabelFor(model model.TypeId)/tdtd stylewidth: 310pxHtml.DropDownListFor(model model.TypeId, ViewBag.FlowType as SelectList)/tdtdHtml.ValidationMessageFor(model model.TypeId)/td/trtrtd stylewidth: 100px; text-align: right;Html.LabelFor(model model.State)/tdtd stylewidth: 310pxHtml.CheckBoxFor(model model.State, new { checked true })/tdtdHtml.ValidationMessageFor(model model.State)/td/trtrtddiv stylefloat: right classpic_204/div/tdtd colspan2 classgray注设计好表单和字段才能组成一个完整的表单,设计好表单后才能设计步骤/td/tr/tbody/table/divdiv title第二步添加字段 styleoverflow: auto;table classfromEditTable setTextWidth300 bgbtrtd stylewidth:40px; text-align: right;类别/tdtd stylewidth: 110px;Html.DropDownListFor(model model.TypeName, ViewBag.FlowType as SelectList, new { style width:100px; })/tdtd stylewidth:40px; text-align: right;字段/tdtd stylewidth: 210pxinput idattrVal nameattrVal typehidden /select classeasyui-combogrid stylewidth:200px idformAttrComboGrid data-optionspanelWidth: 470,idField: Id,textField: Title,rownumbers: true,//行号url: Url.Action(GetFormAttrList)?page1sortIdrows1000orderdesc,page:1,columns: [[{ field: Id, title: ID, width: 80, hidden: true },{ field: Title, title: 字段标题, width: 80, sortable: true },{ field: Name, title: 英文名称, width: 80, sortable: true },{ field: AttrType, title: 类型, width: 80, sortable: true },{ field: CheckJS, title: 校验脚本, width:50, sortable: true },{field: CreateTime, title: 创建时间, width: 80, sortable: true }]], onClickRow: function (index, data) {var value $(#formAttrComboGrid).combogrid(getValue);$(#attrVal).val(value);},onLoadSuccess:function (data) {},fitColumns: true/select/tdtda hrefjavascript:AddAttr(); classeasyui-linkbutton data-optionsiconCls:icon-add添加/a/td/tr/tabletable idAttrList classfromEditTable setTextWidth300/table/div/div
} Create.cshtml FormController核心代码 [HttpPost]public JsonResult GetFormAttrList(GridPager pager, string queryStr){ListFlow_FormAttrModel list attrBLL.GetList(ref pager, queryStr);var json new{total pager.totalRows,rows (from r in listselect new Flow_FormAttrModel(){Id r.Id,Title r.Title,Name r.Name,AttrType r.AttrType,CheckJS r.CheckJS,TypeId r.TypeId,CreateTime r.CreateTime}).ToArray()};return Json(json);} 获取字段列表 代码分析 主要难点在切换类表需要重新加载combogrid然后根据选择的字段组成表单。 利用前端技术控制进行字段类表的筛选获得字段。再添加字段的ID到隐藏的DIV最后序列化整张表单保存。 整个工作流中前端的技术代码量远超后台代码。所以关注点都在前端代码中 posted on 2015-05-04 15:06 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/4476238.html
