@RenderBody() @Html.AntiForgeryToken()
示例页面源码@{ ViewBag.Title = "表单页面"; Layout = "~/Views/Shared/_Form.cshtml"; } 编号/* 企业名称/* 简称
联系人/* 联系电话/* 手机号码/*
联系地址/*
邮政编码 传真号码 电子邮箱
经营范围
评级 登录日期 登录人
企业简介
备注说明
4、数据导入页面
数据导入页面主要应用的基础信息数据，批量初始导入功能。
此页面特点是-可以展示数据导入失败的行，并显示相关失败信息。
页面布局源码
与普通编辑页面布局页相同。
示例页面源码@{ ViewBag.Title = "初始库存导入"; Layout = "~/Views/Shared/Form.cshtml"; } 模板文件 导入模板.xls Excel文件/*
upload"class="btn btn-primary">上 传 cancel"class="btn btn-default">退 出
5、向导式编辑页面
即使用向导式的方式，一步步处理相关信息，然后进行保存的编辑页面。应用于减少多次弹窗的普通编辑页面。比如示例中设备采购申请，只需要选择设备信息，然后下一步，即可保存数据，三次点击操作即完成数据录入功能。
页面布局源码
与普通编辑页面布局页相同。
示例页面源码@{ ViewBag.Title = "进货信息编辑"; Layout = "~/Views/Shared/Form.cshtml"; } 1设备信息 2系统机构 | 选择条件 编号 设备名称 | Keyword"type="text"class="form-control"placeholder="请输入要查询关键字"style="width: 200px;" /> Search"class="btn btn-primary">查询
新增 复制 申请编号/ 申请人/ 申请日期/*
设备编号/* 名称/* 类型/*
规格型号 量程 精度
数量/* 单价 生产厂家
主要用途
性能指标
备注说明
last"disabled class="btn btn-default btn-prev">上一步 next"class="btn btn-default btn-next">下一步 finish"disabled class="btn btn-info">完 成 submit"disabled class="btn btn-primary">保存提交 close"class="btn btn-default">关闭 varkeyValue=request("keyValue"); $(function() { initialPage(); InitEquipmentInfo(); });functioninitialPage() {//加载导向 $('/#wizard').wizard().on('change',function(e, data) {var$finish=$("/#btnfinish");var$submit=$("/#btnsubmit");var$next=$("/#btnnext");if(data.direction== "next") {if(data.step== 1) {varmEquipmentId=$("/#gridTable").jqGridRowValue("Id");if(mEquipmentId==undefined||mEquipmentId== "") { dialogMsg('请选择企业信息！',0);return false; } $.SetForm({ url:"/EquipmentManage/FacilityPurchaseApply/GetNewEntity", param: { equipmentId: mEquipmentId }, success:function(data) { $("/#form1").SetWebControls(data); } }); $finish.removeAttr('disabled'); $submit.removeAttr('disabled'); $next.attr('disabled','disabled'); } }else{ $finish.attr('disabled','disabled'); $submit.attr('disabled','disabled'); $next.removeAttr('disabled'); } }); buttonOperation();//新增企业 $("/#btnAdd").click(function() { dialogOpen({ id:'EquipmentInfoForm', title:'添加', url:'/EquipmentManage/EquipmentInfo/EquipmentInfoForm', width:'1020px', height:'500px', callBack:function(iframeId) { top.EquipmentInfoForm.AcceptClick(function() { $('/#gridTable').trigger('reloadGrid'); }); } }); })//复制 $("/#btnCopy").click(function() {varkeyValue=$("/#gridTable").jqGridRowValue("Id");if(checkedRow(keyValue)) { dialogOpen({ id:'EquipmentInfoForm', title:'复制', url:'/EquipmentManage/EquipmentInfo/EquipmentInfoForm?copyId='+keyValue, width:'1020px', height:'500px', callBack:function(iframeId) { top.EquipmentInfoForm.AcceptClick(function() { $('/#gridTable').trigger('reloadGrid'); }); } }); } }); };//系统按钮being==================================// functionInitEquipmentInfo() {varselectedRowIndex= 0;var$gridTable=$("/#gridTable"); $gridTable.jqGrid({ height: $(window).height()- 220, width: $(window).width()- 12, url:"/EquipmentManage/EquipmentInfo/GetPageList", datatype:"json", colModel: [ { label:'Id', name:'Id', index:'Id', width:100, align:'left', sortable:true, hidden:true}, { label:'编号', name:'Code', index:'Code', width:100, align:'left', sortable:true}, { label:'名称', name:'Name', index:'Name', width:100, align:'left', sortable:true}, { label:'类型', name:'Type', index:'Type', width:100, align:'left', sortable:true}, { label:'规格型号', name:'Spec', index:'Spec', width:100, align:'left', sortable:true}, { label:'设备分类', name:'RefClassifyId', index:'RefClassifyId', width:100, align:'left', sortable:true, hidden:true}, { label:'设备分类', name:'ClassifyName', index:'ClassifyName', width:100, align:'left', sortable:true}, { label:'主要用途', name:'Usage', index:'Usage', width:100, align:'left', sortable:true}, { label:'性能指标', name:'Target', index:'Target', width:200, align:'left', sortable:true}, ], viewrecords:true, rowNum:30, rowList: [30,50,100], pager:"/#gridPager", sortname:'Code', sortorder:'asc', rownumbers:true, shrinkToFit:false, gridview:true, onSelectRow:function() { selectedRowIndex=$('/#' + this.id).getGridParam('selrow'); }, gridComplete:function() { $('/#' + this.id).setSelection(selectedRowIndex,false);//if($.isNullOrEmpty(inDialog)){ //$("/#gridTable").authorizeColModel(); //} }, });//查询条件 $("/#queryCondition .dropdown-menu li").click(function() {vartext=$(this).find('a').html();varvalue=$(this).find('a').attr('data-value'); $("/#queryCondition .dropdown-text").html(text).attr('data-value', value); });//查询事件 $("/#btnSearch").click(function() {varqueryJson={ condition: $("/#queryCondition").find('.dropdown-text').attr('data-value'), keyword: $("/#txtKeyword").val() }; $gridTable.jqGrid('setGridParam', { postData: { queryJson: JSON.stringify(queryJson) }, page:1}).trigger('reloadGrid') });//查询回车 $('/#txtKeyword').bind('keypress',function(event) {if(event.keyCode== "13") { $('/#btnSearch').trigger("click"); } }); }//按钮操作（上一步、下一步、完成、关闭） functionbuttonOperation() {var$last=$("/#btnlast");var$next=$("/#btnnext");varbtnfinish=$("/#btnfinish");varbtnsubmit=$("/#btnsubmit");varbtnclose=$("/#btnclose");//完成提交保存 btnclose.click(function() { $.currentIframe().$("/#gridTable").trigger("reloadGrid"); dialogClose(); })//完成提交保存 btnfinish.click(function() {if(!$("/#form1").Validform()) {return false; }varkeyValue=$("/#Id").val();varpostData=$("/#form1").GetWebControls(keyValue); $.SaveForm({ url:"/EquipmentManage/FacilityPurchaseApply/SaveForm?keyValue=" +keyValue, param: postData, loading:"正在保存数据...", success:function() { $.currentIframe().$("/#gridTable").trigger("reloadGrid"); dialogClose(); } }); });//完成提交保存 btnsubmit.click(function() {if(!$("/#form1").Validform()) {return false; }varkeyValue=$("/#Id").val();varpostData=$("/#form1").GetWebControls(keyValue); $.SaveForm({ url:"/EquipmentManage/FacilityPurchaseApply/SaveSubmit?keyValue=" +keyValue, param: postData, loading:"正在保存数据...", success:function() { $.currentIframe().$("/#gridTable").trigger("reloadGrid"); dialogClose(); } }); }); }//保存表单; functionAcceptClick(callBack) {if(!$("/#form1").Validform()) {return false; }varpostData=$("/#form1").GetWebControls(keyValue); $.SaveForm({ url:"../../BusinessManage/StockBillInfo/SaveForm?keyValue=" +keyValue, param: postData, loading:"正在保存数据...", success:function() {if(callBack!=undefined) { callBack(); }else{ $.currentIframe().$("/#gridTable").trigger("reloadGrid"); } } }); }
6、新页编辑页面
屏幕分辨率有限，当普通编辑页面及向导式编辑页面都无法承载编辑信息内容时，或者说采用弹窗式页面需要滚动的页面，此时，应当采用新页编辑页面编辑内容。
页面布局源码
@ViewBag.Title @//@ @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css", "~/Content/scripts/plugins/tree/css", "~/Content/scripts/plugins/datetime/css", "~/Content/styles/xlib-ui.css") @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js", "~/Content/scripts/plugins/tree/js", "~/Content/scripts/plugins/validator/js", "~/Content/scripts/plugins/datepicker/js", "~/Content/scripts/utils/js") @RenderBody() @Html.AntiForgeryToken()
示例页面源码@{ ViewBag.Title = "表单页面"; Layout = "~/Views/Shared/BillIndex.cshtml"; } 采购申请审批 保存提交 退出 审批结果/ 审批人/ 审批日期/*
审批意见
采购申请审核 审核结果/* 审核人/* 审核日期/*
审核意见
采购申请信息 申请编号/* 申请人/* 申请日期/*
设备编号/* 名称/* 类型/*
规格型号 量程 精度
数量 单价 生产厂家
主要用途
性能指标
备注说明
varkeyValue=request('keyValue');vartabiframeId=request('tabiframeId'); $(function() { $("/#applyInfo .form-control").attr("disabled","disabled"); initialPage(); GetGrid(); });functioninitialPage() {varlayout=$('/#layout').layout({ applyDemoStyles:true, westsize:1, onresize:function() { $(window).resize(); } });//resize重设布局; $(window).resize(function(e) { window.setTimeout(function() { $('.billPanel').css("height", $(window).height()- 75); },200); e.stopPropagation(); }); $(window).resize(); $("/#auditInfo .form-control").attr("disabled","disabled"); $("/#applyInfo .form-control").attr("disabled","disabled");//处理结果 $("/#ApprovalResult").ComboBox({//检查结果 //url: "../../SystemManage/DataItemDetail/GetDataItemListJson", //param: { EnCode: "SuperviseInspect" }, data: [{ Name:"通过", Value:"通过"}, { Name:"退回", Value:"退回"}], id:"Value", text:"Name", description:"== 请选择 ==", height:"200px", });//获取表单 if(!!keyValue) { $.SetForm({ url:"/EquipmentManage/FacilityPurchaseApply/GetApprovalEntity", param: { keyValue: keyValue }, success:function(data) { $("/#form1").SetWebControls(data); } }); }else{ } }//打印 functionbtnFinality() {varkeyValue=$("/#Id").val();varqueryJson={ condition:"Id", keyword: keyValue };//console.log(JSON.stringify(queryJson)); //var win = window.open('/LawEnforceManage/CaseArchivesTemplate/ExportPdf?templateId=CaseRegisterInfo&queryJson=' + JSON.stringify(queryJson)); //win.print(); top.tablist.newTab({ id:"ExportPdf", title:'打印预览', closed:true, icon:"fa fa fa-eye", url: top.contentPath+ "/LawEnforceManage/CaseArchivesTemplate/ExportPdf?templateId=T009&queryJson=" +escape(JSON.stringify(queryJson)) }); }//保存 functionbtnSave() {if(!$("/#form1").Validform()) {return false; }varkeyValue=$("/#Id").val();varpostData=$("/#form1").GetWebControls(); $.SaveForm({ url:"/EquipmentManage/FacilityPurchaseApply/AuditSubmit?keyValue=" +keyValue, param: postData, loading:"正在保存数据...", success:function(result) {if(tabiframeId!= "") top.frames[tabiframeId].$("/#gridTable").trigger("reloadGrid"); } }); }//保存并提交 functionbtnSubmit() {if(!$("/#form1").Validform()) {return false; }varkeyValue=$("/#Id").val();varpostData=$("/#form1").GetWebControls(); $.SaveForm({ url:"/EquipmentManage/FacilityPurchaseApply/ApprovalSubmit?keyValue=" +keyValue, param: postData, loading:"正在保存数据...", success:function(result) {if(tabiframeId!= "") top.frames[tabiframeId].$("/#gridTable").trigger("reloadGrid"); btn_CloseTab(); } }); }functionbtn_CloseTab() { top.tablist.closeTab(window.location.pathname+window.location.search); }
至此Web前端页面介绍完毕，记录于此，便于后续自己开发及分享给大家！
编程之旅，人生之路，不止于编程，还有诗和远方。
阅代码原理，看框架知识，学企业实践；
赏诗词，读日记，踏人生之路，观世界之行；
支付宝红包，每日可领
