本 Web 系统框架基于C# EF6+MVC+WebApi的快速应用开发平台。本节主要介绍Web前端页面设计与实现。Web前端页面主要分为普通列表页面、树状导航列表页面、普通编辑页面、数据导入页面、向导编辑页面以及新页编辑页面。

1、普通列表页面

普通列表页面是系统框架最基础的列表页面，采用JqGrid组件。

页面布局源码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>@ViewBag.Title</title>
  8.     <!--框架必需start-->
  9.     <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script>
  10.     <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
  11.     <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
  12.     <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
  13.     <script src="~/Content/scripts/plugins/cookie/jquery.cookie.js"></script>
  14.     <!--框架必需end-->
  15.     <!--bootstrap组件start-->
  16.     <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
  17.     <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script>
  18.     <!--bootstrap组件end-->
  19.     <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script>
  20.     @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css",
  21.     "~/Content/scripts/plugins/tree/css",
  22.     "~/Content/scripts/plugins/datetime/css",
  23.     "~/Content/styles/xlib-ui.css")
  24.     @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js",
  25.     "~/Content/scripts/plugins/tree/js",
  26.     "~/Content/scripts/plugins/validator/js",
  27.             "~/Content/scripts/plugins/datepicker/js",
  28.     "~/Content/scripts/utils/js")
  29.     <style>
  30.         body {
  31.             margin: 10px;
  32.             margin-bottom: 0px;
  33.         }
  34.     </style>
  35.     <script>
  36.         //列表页默认选择条件 gxlqssjf 20180117
  37.         $(function () {
  38.             if ($("#queryCondition .dropdown-text").length > 0) {
  39.                 var selDropItem = $("#queryCondition .dropdown-text").attr("data-value");
  40.                 if ($.isNullOrEmpty(selDropItem)) {
  41.                     if ($("#queryCondition ul li").length > 0) {
  42.                         var firstItem = $("#queryCondition ul li:first a");
  43.                         $("#queryCondition .dropdown-text").html(firstItem.text()).attr('data-value', firstItem.attr("data-value"));
  44.                     }
  45.                 }
  46.             }
  47.         });
  48.     </script>
  49. </head>
  50. <body>
  51.     @RenderBody()
  52.     @Html.AntiForgeryToken()
  53. </body>
  54. </html>

示例页面源码

  1. @{
  2.     ViewBag.Title = "列表页面";
  3.     Layout = "~/Views/Shared/_Index.cshtml";
  4. }
  5. <script>
  6.     var inDialog = request('inDialog');
  7.     $(function () {
  8.         InitialPage();
  9.         GetGrid();
  10.     });
  11.     //初始化页面
  12.     function InitialPage() {
  13.         //resize重设布局;
  14.         $(window).resize(function (e) {
  15.             window.setTimeout(function () {
  16.                 $('#gridTable').setGridWidth(($('.gridPanel').width()));
  17.                 $('#gridTable').setGridHeight($(window).height() - 136.5);
  18.             }, 200);
  19.             e.stopPropagation();
  20.         });
  21.     }
  22.     //加载表格
  23.     function GetGrid() {
  24.         var selectedRowIndex = 0;
  25.         var $gridTable = $('#gridTable');
  26.         $gridTable.jqGrid({
  27.             autowidth: true,
  28.             height: $(window).height() - 136.5,
  29.             url: "/EquipmentManage/EquipmentSupplier/GetPageList",
  30.             datatype: "json",
  31.             colModel: [
  32.                  { label: 'Id', name: 'Id', index: 'Id', width: 100, align: 'left', sortable: true, hidden: true },
  33.                 { label: '编号', name: 'Code', index: 'Code', width: 100, align: 'left', sortable: true },
  34.                 { label: '企业名称', name: 'Name', index: 'Name', width: 100, align: 'left', sortable: true },
  35.                 { label: '简称', name: 'ShortName', index: 'ShortName', width: 100, align: 'left', sortable: true },
  36.                 { label: '联系人', name: 'Linkman', index: 'Linkman', width: 100, align: 'left', sortable: true },
  37.                 { label: '联系电话', name: 'Phone', index: 'Phone', width: 100, align: 'left', sortable: true },
  38.                 { label: '联系地址', name: 'Address', index: 'Address', width: 200, align: 'left', sortable: true },
  39.             ],
  40.             viewrecords: true,
  41.             rowNum: 30,
  42.             rowList: [30, 50, 100],
  43.             pager: "#gridPager",
  44.             sortname: 'Code',
  45.             sortorder: 'asc',
  46.             rownumbers: true,
  47.             shrinkToFit: false,
  48.             gridview: true,
  49.             onSelectRow: function () {
  50.                 selectedRowIndex = $('#' + this.id).getGridParam('selrow');
  51.             },
  52.             gridComplete: function () {
  53.                 $('#' + this.id).setSelection(selectedRowIndex, false);
  54.                 if($.isNullOrEmpty(inDialog)){
  55.                    //$("#gridTable").authorizeColModel();
  56.                 }
  57.             }
  58.         });
  59.         //查询条件
  60.         $("#queryCondition .dropdown-menu li").click(function() {
  61.              var text = $(this).find('a').html();
  62.              var value = $(this).find('a').attr('data-value');
  63.              $("#queryCondition .dropdown-text").html(text).attr('data-value', value);
  64.         });
  65.  
  66.         //查询事件
  67.         $("#btn_Search").click(function() {
  68.              var queryJson = {
  69.                  condition: $("#queryCondition").find('.dropdown-text').attr('data-value'),
  70.                  keyword: $("#txt_Keyword").val()
  71.             };
  72.              $gridTable.jqGrid('setGridParam', {
  73.                  postData: { queryJson: JSON.stringify(queryJson) },
  74.                  page: 1
  75.              }).trigger('reloadGrid');
  76.         });
  77.        //查询回车
  78.        $('#txt_Keyword').bind('keypress', function (event) {
  79.            if (event.keyCode == "13") {
  80.               $('#btn_Search').trigger("click");
  81.            }
  82.        });
  83.     }
  84.     //新增
  85.     function btn_add() {
  86.         dialogOpen({
  87.             id: 'SupplierInfoForm',
  88.             title: '添加',
  89.             url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm',
  90.             width: '1020px',
  91.             height: '600px',
  92.             callBack: function (iframeId) {
  93.                 top.SupplierInfoForm.AcceptClick(function () {
  94.                     $('#gridTable').trigger('reloadGrid');
  95.                 });
  96.             }
  97.         });
  98.     }
  99.     function btn_copy() {
  100.         var keyValue = $('#gridTable').jqGridRowValue('Id');
  101.         if (checkedRow(keyValue)) {
  102.             dialogOpen({
  103.                 id: 'SupplierInfoForm',
  104.                 title: '编辑',
  105.                 url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm?copyId=' + keyValue,
  106.                 width: '1020px',
  107.                 height: '600px',
  108.                 callBack: function (iframeId) {
  109.                     top.SupplierInfoForm.AcceptClick(function () {
  110.                         $('#gridTable').trigger('reloadGrid');
  111.                     });
  112.                 }
  113.             });
  114.         }
  115.     }
  116.     function btn_import() {
  117.         dialogOpen({
  118.             id: 'SupplierInfoForm',
  119.             title: '批量导入',
  120.             url: '/EquipmentManage/EquipmentSupplier/SupplierInfoImport',
  121.             width: '1020px',
  122.             height: '600px',
  123.             btn:null,
  124.             callBack: function (iframeId) {
  125.                 top.SupplierInfoForm.AcceptClick(function () {
  126.                     $('#gridTable').trigger('reloadGrid');
  127.                 });
  128.             }
  129.         });
  130.     }
  131.     //编辑
  132.     function btn_edit() {
  133.         var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  134.         if (checkedRow(keyValue)) {
  135.             dialogOpen({
  136.                 id: 'SupplierInfoForm',
  137.                 title: '编辑',
  138.                 url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm?keyValue=' + keyValue,
  139.                 width: '1020px',
  140.                 height: '600px',
  141.                 callBack: function (iframeId) {
  142.                     top.SupplierInfoForm.AcceptClick(function () {
  143.                          $('#gridTable').trigger('reloadGrid');
  144.                     });
  145.                 }
  146.             });
  147.         }
  148.     }
  149.     //删除
  150.     function btn_delete() {
  151.         var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  152.         if (keyValue) {
  153.             $.RemoveForm({
  154.                 url: '/EquipmentManage/EquipmentSupplier/RemoveForm',
  155.                 param: { keyValue: keyValue },
  156.                 success: function (data) {
  157.                     console.log(data);
  158.                     $('#gridTable').trigger('reloadGrid');
  159.                 }
  160.             })
  161.         } else {
  162.             dialogMsg('请选择需要删除的数据！', 0);
  163.         }
  164.     }
  165.     //对话框回调
  166.     function AcceptClick(callBack) {
  167.        var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  168.        if (checkedRow(keyValue)){
  169.           var row = $('#gridTable').jqGridRow();
  170.           callBack(row);
  171.           dialogClose();
  172.        }
  173.     }
  174. </script>
  175. <div class="titlePanel">
  176.     <div class="title-search">
  177.         <table>
  178.             <tr>
  179.                 <td>
  180.                     <div id="queryCondition" class="btn-group">
  181.                         <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
  182.                         <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  183.                         <ul class="dropdown-menu">
  184.                             <li><a data-value="Code">编号</a></li>
  185.                             <li><a data-value="Name">企业名称</a></li>
  186.                             <li><a data-value="ShortName">许可证号</a></li>
  187.                             <li><a data-value="Linkman">联系人</a></li>
  188.                         </ul>
  189.                     </div>
  190.                 </td>
  191.                 <td style="padding-left:2px;">
  192.                     <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  193.                 </td>
  194.                 <td style="padding-left: 5px;">
  195.                     <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查询</a>
  196.                 </td>
  197.             </tr>
  198.         </table>
  199.     </div>
  200.     <div class="toolbar">
  201.         <div class="btn-group">
  202.             <a id="btnReload" class="btn btn-default" onclick="reload()"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  203.             <a id="btnAdd" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
  204.             <a id="btnCopy" class="btn btn-default" onclick="btn_copy()"><i class="fa fa-plus"></i>&nbsp;复制</a>
  205.             <a id="btnImport" class="btn btn-default" onclick="btn_import()"><i class="fa fa-upload"></i>&nbsp;导入</a>
  206.         </div>
  207.         <div class="btn-group">
  208.             <a id="btnEdit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
  209.             <a id="btnDelete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  210.         </div>
  211.         <script>
  212.          if($.isNullOrEmpty(inDialog)){
  213.              $('.toolbar').authorizeButton();
  214.          }
  215.         </script>
  216.     </div>
  217. </div>
  218. <div class="gridPanel">
  219.     <table id="gridTable"></table>
  220.     <div id="gridPager"></div>
  221. </div>

2、树状导航列表页面

树状导航列表页面是在普通列表页面的基础上，增加左边或右边树状导航功能的列表页面。应用于列表数据有上级、分类功能的页面。便于数据查找、过滤或者新增时，作为主信息先选择，减少弹窗，降低操作复杂性。

页面布局源码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>@ViewBag.Title</title>
  8.     <!--框架必需start-->
  9.     <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script>
  10.     <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
  11.     <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
  12.     <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
  13.     <!--框架必需end-->
  14.     <!--bootstrap组件start-->
  15.     <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
  16.     <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script>
  17.     <!--bootstrap组件end-->
  18.  
  19.     <script src="~/Content/scripts/plugins/layout/jquery.layout.js"></script>
  20.     <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script>
  21.     @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css",
  22.     "~/Content/scripts/plugins/tree/css",
  23.     "~/Content/scripts/plugins/datetime/css",
  24.     "~/Content/styles/xlib-ui.css")
  25.     @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js",
  26.     "~/Content/scripts/plugins/tree/js",
  27.     "~/Content/scripts/plugins/validator/js",
  28.             "~/Content/scripts/plugins/datepicker/js",
  29.     "~/Content/scripts/utils/js")
  30.  
  31.     <style>
  32.         html, body {
  33.             height: 100%;
  34.             width: 100%;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     @RenderBody()
  40.     @Html.AntiForgeryToken()
  41. </body>
  42. </html>

页面示例源码

  1. @{
  2.     ViewBag.Title = "列表页面";
  3.     Layout = "~/Views/Shared/_LayoutIndex.cshtml";
  4. }
  5. <script>
  6.     var inDialog = request('inDialog');
  7.     $(function () {
  8.         InitialPage();
  9.         GetTree();
  10.         GetGrid();
  11.     });
  12.     //初始化页面
  13.     function InitialPage() {
  14.         //layout布局
  15.         $('#layout').layout({
  16.             applyDemoStyles: true,
  17.             onresize: function () {
  18.                 $(window).resize()
  19.             }
  20.         }).sizePane("west", 250);
  21.         //resize重设(表格、树形)宽高
  22.         $(window).resize(function (e) {
  23.             window.setTimeout(function () {
  24.                 $('#gridTable').setGridWidth(($('.gridPanel').width()));
  25.                 $("#gridTable").setGridHeight($(window).height() - 172);
  26.  
  27.                 $("#itemTree").setTreeHeight($(window).height() - 52);
  28.             }, 240);
  29.             e.stopPropagation();
  30.         });
  31.         $(window).resize();
  32.     }
  33.     //加载树
  34.     var selectItemId = "0";
  35.     function GetTree() {
  36.         var item = {
  37.             height: $(window).height() - 52,
  38.             url: "/EquipmentManage/EquipmentClassify/GetTreeList",
  39.             onnodeclick: function (item) {
  40.                 selectItemId = item.id;
  41.                 //展开下级
  42.                 //$(".bbit-tree-selected").children('.bbit-tree-ec-icon').trigger("click");
  43.                 $('#btn_Search').trigger("click");
  44.             },
  45.         };
  46.         //初始化
  47.         $("#itemTree").treeview(item);
  48.     }
  49.     //加载表格
  50.     function GetGrid() {
  51.         var selectedRowIndex = 0;
  52.         var $gridTable = $('#gridTable');
  53.         $gridTable.jqGrid({
  54.             autowidth: true,
  55.             height: $(window).height() - 136.5,
  56.             url: "/EquipmentManage/EquipmentInfo/GetPageList",
  57.             datatype: "json",
  58.             colModel: [
  59.                  { label: 'Id', name: 'Id', index: 'Id', width: 100, align: 'left', sortable: true, hidden: true },
  60.                 { label: '编号', name: 'Code', index: 'Code', width: 100, align: 'left', sortable: true },
  61.                 { label: '名称', name: 'Name', index: 'Name', width: 100, align: 'left', sortable: true },
  62.                 { label: '类型', name: 'Type', index: 'Type', width: 100, align: 'left', sortable: true },
  63.                 { label: '规格型号', name: 'Spec', index: 'Spec', width: 100, align: 'left', sortable: true },
  64.                 { label: '设备分类', name: 'ClassifyName', index: 'ClassifyName', width: 100, align: 'left', sortable: true },
  65.                 { label: '主要用途', name: 'Usage', index: 'Usage', width: 100, align: 'left', sortable: true },
  66.                 { label: '性能指标', name: 'Target', index: 'Target', width: 200, align: 'left', sortable: true },
  67.             ],
  68.             viewrecords: true,
  69.             rowNum: 30,
  70.             rowList: [30, 50, 100],
  71.             pager: "#gridPager",
  72.             sortname: 'Code',
  73.             sortorder: 'asc',
  74.             rownumbers: true,
  75.             shrinkToFit: false,
  76.             gridview: true,
  77.             onSelectRow: function () {
  78.                 selectedRowIndex = $('#' + this.id).getGridParam('selrow');
  79.             },
  80.             gridComplete: function () {
  81.                 $('#' + this.id).setSelection(selectedRowIndex, false);
  82.                 if($.isNullOrEmpty(inDialog)){
  83.                    //$("#gridTable").authorizeColModel();
  84.                 }
  85.             }
  86.         });
  87.         //查询条件
  88.         $("#queryCondition .dropdown-menu li").click(function() {
  89.              var text = $(this).find('a').html();
  90.              var value = $(this).find('a').attr('data-value');
  91.              $("#queryCondition .dropdown-text").html(text).attr('data-value', value);
  92.         });
  93.  
  94.         //查询事件
  95.         $("#btn_Search").click(function() {
  96.             var queryJson = {
  97.                 RefClassifyId:selectItemId,
  98.                  condition: $("#queryCondition").find('.dropdown-text').attr('data-value'),
  99.                  keyword: $("#txt_Keyword").val()
  100.             };
  101.              $gridTable.jqGrid('setGridParam', {
  102.                  postData: { queryJson: JSON.stringify(queryJson) },
  103.                  page: 1
  104.              }).trigger('reloadGrid');
  105.         });
  106.        //查询回车
  107.        $('#txt_Keyword').bind('keypress', function (event) {
  108.            if (event.keyCode == "13") {
  109.               $('#btn_Search').trigger("click");
  110.            }
  111.        });
  112.     }
  113.     //新增
  114.     function btn_add() {
  115.         dialogOpen({
  116.             id: 'EquipmentInfoForm',
  117.             title: '添加',
  118.             url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm',
  119.             width: '1020px',
  120.             height: '500px',
  121.             callBack: function (iframeId) {
  122.                 top.EquipmentInfoForm.AcceptClick(function () {
  123.                     $('#gridTable').trigger('reloadGrid');
  124.                 });
  125.             }
  126.         });
  127.     }
  128.     function btn_copy() {
  129.         var keyValue = $('#gridTable').jqGridRowValue('Id');
  130.         if (checkedRow(keyValue)) {
  131.             dialogOpen({
  132.                 id: 'EquipmentInfoForm',
  133.                 title: '复制新增',
  134.                 url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm?copyId=' + keyValue,
  135.                 width: '1020px',
  136.                 height: '500px',
  137.                 callBack: function (iframeId) {
  138.                     top.EquipmentInfoForm.AcceptClick(function () {
  139.                         $('#gridTable').trigger('reloadGrid');
  140.                     });
  141.                 }
  142.             });
  143.         }
  144.     }
  145.     //编辑
  146.     function btn_edit() {
  147.         var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  148.         if (checkedRow(keyValue)) {
  149.             dialogOpen({
  150.                 id: 'EquipmentInfoForm',
  151.                 title: '编辑',
  152.                 url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm?keyValue=' + keyValue,
  153.                 width: '1020px',
  154.                 height: '500px',
  155.                 callBack: function (iframeId) {
  156.                     top.EquipmentInfoForm.AcceptClick(function () {
  157.                          $('#gridTable').trigger('reloadGrid');
  158.                     });
  159.                 }
  160.             });
  161.         }
  162.     }
  163.     //删除
  164.     function btn_delete() {
  165.         var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  166.         if (keyValue) {
  167.             $.RemoveForm({
  168.                 url: '/EquipmentManage/EquipmentInfo/RemoveForm',
  169.                 param: { keyValue: keyValue },
  170.                 success: function (data) {
  171.                     console.log(data);
  172.                     $('#gridTable').trigger('reloadGrid');
  173.                 }
  174.             })
  175.         } else {
  176.             dialogMsg('请选择需要删除的数据！', 0);
  177.         }
  178.     }
  179.     //新增
  180.     function btn_classify() {
  181.         dialogOpen({
  182.             id: 'EquipmentClassifyIndex',
  183.             title: '设备分类',
  184.             url: '/EquipmentManage/EquipmentClassify/EquipmentClassifyIndex',
  185.             width: '1020px',
  186.             height: '600px',
  187.             callBack: function (iframeId) {
  188.                 top.EquipmentClassifyIndex.AcceptClick(function () {
  189.                     //$('#gridTable').trigger('reloadGrid');
  190.                     reload();//重新加载
  191.                 });
  192.             }
  193.         });
  194.     }
  195.     //新增
  196.     function btn_address() {
  197.         dialogOpen({
  198.             id: 'InstallAddressIndex',
  199.             title: '安装地点',
  200.             url: '/EquipmentManage/InstallAddress/InstallAddressIndex',
  201.             width: '1020px',
  202.             height: '600px',
  203.             callBack: function (iframeId) {
  204.                 top.InstallAddressIndex.AcceptClick(function () {
  205.                     //$('#gridTable').trigger('reloadGrid');
  206.                     reload();//重新加载
  207.                 });
  208.             }
  209.         });
  210.     }
  211.     //对话框回调
  212.     function AcceptClick(callBack) {
  213.        var keyValue = $('#gridTable').jqGridRowValue( 'Id');
  214.        if (checkedRow(keyValue)){
  215.           var row = $('#gridTable').jqGridRow();
  216.           callBack(row);
  217.           dialogClose();
  218.        }
  219.     }
  220. </script>
  221. <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
  222.     <div class="ui-layout-west">
  223.         <div class="west-Panel">
  224.             <div class="panel-Title">设备分类</div>
  225.             <div id="itemTree"></div>
  226.         </div>
  227.     </div>
  228.     <div class="ui-layout-center">
  229.         <div class="center-Panel">
  230.             <div class="panel-Title">设备信息</div>
  231.             <div class="titlePanel">
  232.                 <div class="title-search">
  233.                     <table>
  234.                         <tr>
  235.                             <td>
  236.                                 <div id="queryCondition" class="btn-group">
  237.                                     <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
  238.                                     <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  239.                                     <ul class="dropdown-menu">
  240.                                         <li><a data-value="Code">编号</a></li>
  241.                                         <li><a data-value="Name">设备名称</a></li>
  242.                                     </ul>
  243.                                 </div>
  244.                             </td>
  245.                             <td style="padding-left:2px;">
  246.                                 <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  247.                             </td>
  248.                             <td style="padding-left: 5px;">
  249.                                 <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查询</a>
  250.                             </td>
  251.                         </tr>
  252.                     </table>
  253.                 </div>
  254.                 <div class="toolbar">
  255.                     <div class="btn-group">
  256.                         <a id="btnReload" class="btn btn-default" onclick="reload()"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  257.                         <a id="btnAdd" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
  258.                         <a id="btnCopy" class="btn btn-default" onclick="btn_copy()"><i class="fa fa-plus"></i>&nbsp;复制</a>
  259.                     </div>
  260.                     <div class="btn-group">
  261.                         <a id="btnEdit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
  262.                         <a id="btnDelete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  263.                     </div>
  264.                     <div class="btn-group">
  265.                         <a id="btnMore" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  266.                             <i class="fa fa-reorder"></i>&nbsp;更多<span class="caret"></span>
  267.                         </a>
  268.                         <ul class="dropdown-menu pull-right">
  269.                             <li id="btnClassify"><a onclick="btn_classify()"><i></i>&nbsp;设备分类</a></li>
  270.                             <li id="btnAddress"><a onclick="btn_address()"><i></i>&nbsp;存放地点</a></li>
  271.                         </ul>
  272.                     </div>
  273.                     <script>
  274.                      if($.isNullOrEmpty(inDialog)){
  275.                          //$('.toolbar').authorizeButton();
  276.                      }
  277.                     </script>
  278.                 </div>
  279.             </div>
  280.             <div class="gridPanel">
  281.                 <table id="gridTable"></table>
  282.                 <div id="gridPager"></div>
  283.             </div>
  284.         </div>
  285.     </div>
  286. </div>

3、普通编辑页面

即弹窗式，显示待录入信息后，然后进行保存的编辑页面。应用于编辑页面信息少，操作简单的功能页面。

页面布局源码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>@ViewBag.Title</title>
  8.     <!--框架必需start-->
  9.     @*<script src="~/Content/scripts/jquery/jquery-1.10.2.min.js"></script>*@
  10.     <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script>
  11.     <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
  12.     <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
  13.     <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
  14.     <!--框架必需end-->
  15.     <!--bootstrap组件start-->
  16.     <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
  17.     <link href="~/Content/scripts/bootstrap/bootstrap.extension.css" rel="stylesheet" />
  18.     <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script>
  19.     <!--select2组件-->
  20.     <link href="~/Content/scripts/plugins/select2/css/select2.css" rel="stylesheet"/>
  21.     @*<script src="~/Content/scripts/plugins/select2/js/i18n/zh-CN.js"></script>*@
  22.     <script src="~/Content/scripts/plugins/select2/js/select2.min.js"></script>
  23.     <!--文件上传组件-->
  24.  
  25.     <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/css/fileinput.css" />
  26.     <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/themes/explorer/theme.css" type="text/css" media="all" />
  27.     <script src="~/Content/scripts/plugins/fileinput/js/plugins/sortable.min.js"></script>
  28.     <script src="~/Content/scripts/plugins/fileinput/js/fileinput.min.js"></script>
  29.     <script src="~/Content/scripts/plugins/fileinput/js/locales/zh.js"></script>
  30.     <script src="~/Content/scripts/plugins/fileinput/themes/explorer/theme.js"></script>
  31.     <link href="~/Content/styles/xlib-ckbox-radio.css" rel="stylesheet" />
  32.     <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script>
  33.     <script src="~/Content/scripts/plugins/dialog/dialog.js"></script>
  34.     <script src="~/Content/scripts/fooddetection/jquery.PrintArea.js"></script>
  35.  
  36.     @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/tree/css",
  37.     "~/Content/scripts/plugins/jqgrid/css",
  38.     "~/Content/scripts/plugins/datetime/css",
  39.     "~/Content/scripts/plugins/wizard/css",
  40.     "~/Content/styles/xlib-ui.css")
  41.     @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/tree/js",
  42.     "~/Content/scripts/plugins/validator/js",
  43.     "~/Content/scripts/plugins/wizard/js",
  44.     "~/Content/scripts/plugins/datepicker/js",
  45.     "~/Content/scripts/plugins/jqgrid/js",
  46.     "~/Content/scripts/utils/js")
  47.  
  48. </head>
  49. <body>
  50.     <form id="form1">
  51.         @RenderBody()
  52.         @Html.AntiForgeryToken()
  53.     </form>
  54. </body>
  55. </html>

示例页面源码

  1. @{
  2.     ViewBag.Title = "表单页面";
  3.     Layout = "~/Views/Shared/_Form.cshtml";
  4. }
  5. <div style="margin:15px;">
  6.     <table class="form border1">
  7.         <tr>
  8.             <td class="formTitle">编号<font face="宋体">*</font></td>
  9.             <td class="formValue">
  10.                 <input id="Code" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  11.             </td>
  12.             <td class="formTitle">企业名称<font face="宋体">*</font></td>
  13.             <td class="formValue">
  14.                 <input id="Name" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  15.             </td>
  16.             <td class="formTitle">简称</td>
  17.             <td class="formValue">
  18.                 <input id="ShortName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  19.             </td>
  20.         </tr>
  21.         <tr>
  22.             <td class="formTitle">联系人<font face="宋体">*</font></td>
  23.             <td class="formValue">
  24.                 <input id="Linkman" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  25.             </td>
  26.             <td class="formTitle">联系电话<font face="宋体">*</font></td>
  27.             <td class="formValue">
  28.                 <input id="Phone" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  29.             </td>
  30.             <td class="formTitle">手机号码<font face="宋体">*</font></td>
  31.             <td class="formValue">
  32.                 <input id="Mobile" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  33.             </td>
  34.         </tr>
  35.         <tr>
  36.             <td class="formTitle">联系地址<font face="宋体">*</font></td>
  37.             <td class="formValue" colspan="4">
  38.                 <input type="hidden" id="RefAreaId" />
  39.                 <input id="ProvinceName" type="text" class="form-control" length="100" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' />
  40.                 <input id="CityName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' />
  41.                 <input id="AreaName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' />
  42.                 <input id="StreetName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" />
  43.                 <span class="input-button" style="margin-top:-15px" title="查找" onclick="selectAdminArea();"><i class="fa fa-search"></i></span>
  44.             </td>
  45.             <td class="formValue">
  46.                 <input id="Address" type="text" class="form-control" value="" isvalid="yes" checkexpession='["NotNull"]' />
  47.             </td>
  48.         </tr>
  49.         <tr>
  50.             <td class="formTitle">邮政编码</td>
  51.             <td class="formValue">
  52.                 <input id="PostCode" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  53.             </td>
  54.             <td class="formTitle">传真号码</td>
  55.             <td class="formValue">
  56.                 <input id="Fax" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  57.             </td>
  58.             <td class="formTitle">电子邮箱</td>
  59.             <td class="formValue">
  60.                 <input id="Email" type="text" class="form-control" length="255" value="" isvalid="no" checkexpession='["NotNull","Email"]' />
  61.             </td>
  62.         </tr>
  63.         <tr>
  64.             <td class="formTitle" valign="top">经营范围</td>
  65.             <td class="formValue" colspan="5">
  66.                 <textarea id="BusinessScope" type="text" class="form-control"  length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  67.             </td>
  68.         </tr>
  69.         <tr>
  70.             <td class="formTitle">评级</td>
  71.             <td class="formValue">
  72.                 <input id="Grader" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  73.             </td>
  74.             <td class="formTitle">登录日期</td>
  75.             <td class="formValue">
  76.                 <input id="StartDate" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  77.             </td>
  78.             <td class="formTitle">登录人</td>
  79.             <td class="formValue">
  80.                 <input id="CreatedUserName" type="text" disabled="disabled" class="form-control" length="255" value="" isvalid="no" checkexpession='["NotNull","Email"]' />
  81.             </td>
  82.         </tr>
  83.         <tr>
  84.             <td class="formTitle" valign="top">企业简介</td>
  85.             <td class="formValue" colspan="5">
  86.                 <textarea id="Description" type="text" class="form-control" style="height:200px;" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  87.             </td>
  88.         </tr>
  89.         <tr>
  90.             <td class="formTitle" valign="top">备注说明</td>
  91.             <td class="formValue" colspan="5">
  92.                 <textarea id="Remark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  93.             </td>
  94.         </tr>
  95.     </table>
  96. </div>
  97. <script>
  98.     var keyValue = request('keyValue');
  99.     var copyId = request('copyId');
  100.     $(function () {
  101.         initControl();
  102.     });
  103.     //初始化控件
  104.     function initControl() {
  105.         //获取表单
  106.         if (!!keyValue) {
  107.             $.SetForm({
  108.                 url: "/EquipmentManage/EquipmentSupplier/GetFormJson",
  109.                 param: { keyValue: keyValue },
  110.                 success: function (data) {
  111.                     $("#form1").SetWebControls(data);
  112.                 }
  113.             })
  114.         } else if (!!copyId) {
  115.             $.SetForm({
  116.                 url: "/EquipmentManage/EquipmentSupplier/GetFormJson",
  117.                 param: { keyValue: copyId },
  118.                 success: function (data) {
  119.                     $("#form1").SetWebControls(data);
  120.                 }
  121.             })
  122.         }
  123.     };
  124.     //保存表单;
  125.     function AcceptClick(callBack) {
  126.         if (!$("#form1").Validform()) {
  127.             return false;
  128.         }
  129.         var postData = $("#form1").GetWebControls(keyValue);
  130.         $.SaveForm({
  131.             url: "/EquipmentManage/EquipmentSupplier/SaveForm?keyValue=" + keyValue,
  132.             param: postData,
  133.             loading: "正在保存数据...",
  134.             success: function () {
  135.                 if(callBack != undefined){
  136.                      callBack();
  137.                 }else{
  138.                      $.currentIframe().$("#gridTable").trigger("reloadGrid");
  139.                 }
  140.             }
  141.         });
  142.     }
  143. </script>

4、数据导入页面

数据导入页面主要应用的基础信息数据，批量初始导入功能。

此页面特点是-可以展示数据导入失败的行，并显示相关失败信息。

页面布局源码

    与普通编辑页面布局页相同。

示例页面源码

  1. @{
  2.     ViewBag.Title = "初始库存导入";
  3.     Layout = "~/Views/Shared/_Form.cshtml";
  4. }
  5. <div class="ui-layout">
  6.     <div class="ui-layout-center">
  7.         <div class="center-Panel" style="margin-left:10px;margin-top:10px;margin-right:10px;">
  8.             <form id="form1" name="form1" class="form-horizontal form-table-bordered" enctype="multipart/form-data">
  9.                 <table class="form border1">
  10.                     <tr>
  11.                         <td class="formTitle">模板文件</td>
  12.                         <td class="formValue">
  13.                             <a href="@ViewBag.TemplateFile" style="color:blue">导入模板.xls</a>
  14.                         </td>
  15.                         <td class="formTitle">Excel文件<font face="宋体">*</font></td>
  16.                         <td class="formValue" colspan="3">
  17.                             <input type="file" id="FileName" accept=".xls,.xlsx" class="file" isvalid="yes" checkexpession='["NotNull"]' />
  18.                         </td>
  19.                     </tr>
  20.                 </table>
  21.                 <div class="gridPanel">
  22.                     <table id="gridTable"></table>
  23.                     <div id="gridPager"></div>
  24.                 </div>
  25.             </form>
  26.         </div>
  27.     </div>
  28. </div>
  29. <div class="form-button" id="wizard-actions">
  30.     <a id="btn_upload" class="btn btn-primary">上&nbsp;传</a>
  31.     <a id="btn_cancel" class="btn btn-default">退&nbsp;出</a>
  32. </div>
  33. <script>
  34.     $(function () {
  35.         GetGrid();
  36.         //完成提交保存
  37.         $("#btn_cancel").click(function () {
  38.             /*调用上级列表进行刷新*/
  39.             $.currentIframe().$("#gridTable").trigger("reloadGrid");
  40.             dialogClose();
  41.         })
  42.         //完成提交保存
  43.         $("#btn_upload").click(function () {
  44.             if (!$("#form1").Validform()) {
  45.                 return false;
  46.             }
  47.             $.SaveFormData({
  48.                 file: $('input[type=file]')[0].files[0],
  49.                 url: "/EquipmentManage/EquipmentSupplier/Upload",
  50.                 loading: "正在导入数据...",
  51.                 close: false,
  52.                 success: function (result) {
  53.                     jQuery("#gridTable").jqGrid("clearGridData");
  54.                     //console.log(result);
  55.                     for (var i = 0; i < result.resultdata.length; i++) {
  56.                         $("#gridTable").jqGrid('addRowData', i + 1, result.resultdata[i]);
  57.                     }
  58.                     $.currentIframe().$('#gridTable').trigger('reloadGrid');
  59.                 }
  60.             });
  61.         });
  62.     });
  63.     $("#FileName").fileinput({
  64.         showUpload: false,
  65.         showRemove: true,
  66.         showPreview: false,
  67.         language: 'zh',
  68.         maxFileSize: 1024 * 10,
  69.     });
  70.     //加载表格
  71.     function GetGrid() {
  72.         var selectedRowIndex = 0;
  73.         var $gridTable = $('#gridTable');
  74.         $gridTable.jqGrid({
  75.             autowidth: true,
  76.             height: $(window).height() - 156,
  77.             //url: "../../CateringManage/StockBillInfo/GetStockImportPage",
  78.             datatype: "local",
  79.             colModel: [
  80.                 {
  81.                     label: '导入结果', name: 'ImportResult', index: 'ImportResult', width: 100, align: 'left', sortable: true,
  82.                     formatter: function (cellvalue, options, rowObject) {
  83.                         if (cellvalue == "导入失败") {
  84.                             return '<span  class=\"label label-danger\">' + cellvalue + '</span>';
  85.                         } else {
  86.                             return cellvalue;
  87.                         }
  88.                     }
  89.                 },
  90.                 { label: '失败说明', name: 'ErrorMessage', index: 'ErrorMessage', width: 300, align: 'left', sortable: true },
  91.                 { label: 'Id', name: 'Id', index: 'Id', width: 100, align: 'left', sortable: true, hidden: true },
  92.                 { label: '编号', name: 'Code', index: 'Code', width: 100, align: 'left', sortable: true },
  93.                 { label: '企业名称', name: 'Name', index: 'Name', width: 100, align: 'left', sortable: true },
  94.                 { label: '简称', name: 'ShortName', index: 'ShortName', width: 100, align: 'left', sortable: true },
  95.                 { label: '联系人', name: 'Linkman', index: 'Linkman', width: 100, align: 'left', sortable: true },
  96.                 { label: '联系电话', name: 'Phone', index: 'Phone', width: 100, align: 'left', sortable: true },
  97.                 { label: '联系地址', name: 'Address', index: 'Address', width: 200, align: 'left', sortable: true },
  98.             ],
  99.             viewrecords: true,
  100.             rowNum: 30,
  101.             rowList: [30, 50, 100],
  102.             pager: "#gridPager",
  103.             sortname: 'Code',
  104.             sortorder: 'asc',
  105.             rownumbers: true,
  106.             shrinkToFit: false,
  107.             gridview: true,
  108.             onSelectRow: function () {
  109.                 selectedRowIndex = $('#' + this.id).getGridParam('selrow');
  110.             },
  111.             gridComplete: function () {
  112.                 $('#' + this.id).setSelection(selectedRowIndex, false);
  113.             },
  114.             jsonReader: {
  115.                 root: "rows",
  116.                 page: "page",
  117.                 total: "total",
  118.                 records: "records",
  119.                 repeatitems: false
  120.  
  121.             },
  122.         });
  123.     }
  124. </script>

5、向导式编辑页面

即使用向导式的方式，一步步处理相关信息，然后进行保存的编辑页面。应用于减少多次弹窗的普通编辑页面。比如示例中设备采购申请，只需要选择设备信息，然后下一步，即可保存数据，三次点击操作即完成数据录入功能。

页面布局源码

    与普通编辑页面布局页相同。

示例页面源码

  1. @{
  2.     ViewBag.Title = "进货信息编辑";
  3.     Layout = "~/Views/Shared/_Form.cshtml";
  4. }
  5. <div class="widget-body">
  6.     <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
  7.         <ul class="steps">
  8.             <li data-target="#stepEquipmentInfo" class="active"><span class="step">1</span>设备信息<span class="chevron"></span></li>
  9.             <li data-target="#stepBaseInfo"><span class="step">2</span>系统机构<span class="chevron"></span></li>
  10.         </ul>
  11.     </div>
  12.     <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
  13.         <div class="step-pane active" id="stepEquipmentInfo" style="margin: 5px;">
  14.             <div class="titlePanel">
  15.                 <div class="title-search">
  16.                     <table>
  17.                         <tr>
  18.                             <td>
  19.                                 <div id="queryCondition" class="btn-group">
  20.                                     <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
  21.                                     <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  22.                                     <ul class="dropdown-menu">
  23.                                         <li><a data-value="Code">编号</a></li>
  24.                                         <li><a data-value="Name">设备名称</a></li>
  25.                                     </ul>
  26.                                 </div>
  27.                             </td>
  28.                             <td style="padding-left:2px;">
  29.                                 <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  30.                             </td>
  31.                             <td style="padding-left: 5px;">
  32.                                 <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查询</a>
  33.                             </td>
  34.                         </tr>
  35.                     </table>
  36.                 </div>
  37.                 <div class="toolbar">
  38.                     <div class="btn-group">
  39.                         <a id="btnAdd" class="btn btn-default"><i class="fa fa-plus"></i>&nbsp;新增</a>
  40.                         <a id="btnCopy" class="btn btn-default"><i class="fa fa-plus"></i>&nbsp;复制</a>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.             <div class="gridPanel">
  45.                 <table id="gridTable"></table>
  46.                 <div id="gridPager"></div>
  47.             </div>
  48.         </div>
  49.         <div class="step-pane" id="stepBaseInfo">
  50.             <div class="form-body" style="margin-left: 0px; margin-top: 30px; margin-right: 30px; ">
  51.                 <table class="form border1">
  52.                     <tr>
  53.                         <td class="formTitle">申请编号<font face="宋体">*</font></td>
  54.                         <td class="formValue">
  55.                             <input type="hidden" id="Id" />
  56.                             <input id="ApplyCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  57.                         </td>
  58.                         <td class="formTitle">申请人<font face="宋体">*</font></td>
  59.                         <td class="formValue">
  60.                             <input id="OperatorBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  61.                         </td>
  62.                         <td class="formTitle">申请日期<font face="宋体">*</font></td>
  63.                         <td class="formValue">
  64.                             <input id="OperatorOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  65.                         </td>
  66.                     </tr>
  67.                     <tr>
  68.                         <td class="formTitle">设备编号<font face="宋体">*</font></td>
  69.                         <td class="formValue">
  70.                             <input type="hidden" id="RefEquipmentId" />
  71.                             <input id="EquipmentCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  72.                         </td>
  73.                         <td class="formTitle">名称<font face="宋体">*</font></td>
  74.                         <td class="formValue">
  75.                             <input id="EquipmentName" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  76.                         </td>
  77.                         <td class="formTitle">类型<font face="宋体">*</font></td>
  78.                         <td class="formValue">
  79.                             <input id="EquipmentType" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  80.                         </td>
  81.                     </tr>
  82.                     <tr>
  83.                         <td class="formTitle">规格型号</td>
  84.                         <td class="formValue">
  85.                             <input id="EquipmentSpec" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  86.                         </td>
  87.                         <td class="formTitle">量程</td>
  88.                         <td class="formValue">
  89.                             <input id="MeasurementRange" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  90.                         </td>
  91.                         <td class="formTitle">精度</td>
  92.                         <td class="formValue">
  93.                             <input id="MeasurementAccuracy" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  94.                         </td>
  95.                     </tr>
  96.                     <tr>
  97.                         <td class="formTitle">数量<font face="宋体">*</font></td>
  98.                         <td class="formValue">
  99.                             <input id="Amount" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  100.                             <input id="AmountUnit" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="no" checkexpession='["NotNull"]' />
  101.                         </td>
  102.                         <td class="formTitle">单价</td>
  103.                         <td class="formValue">
  104.                             <input id="Price" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  105.                         </td>
  106.                         <td class="formTitle">生产厂家</td>
  107.                         <td class="formValue">
  108.                             <input id="RefSupplierId" type="hidden" />
  109.                             <input id="SupplierName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  110.                         </td>
  111.                     </tr>
  112.                     <tr>
  113.                         <td class="formTitle" valign="top">主要用途</td>
  114.                         <td class="formValue" colspan="5">
  115.                             <textarea id="Usage" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  116.                         </td>
  117.                     </tr>
  118.                     <tr>
  119.                         <td class="formTitle" valign="top">性能指标</td>
  120.                         <td class="formValue" colspan="5">
  121.                             <textarea id="Target" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  122.                         </td>
  123.                     </tr>
  124.                     <tr>
  125.                         <td class="formTitle" valign="top">备注说明</td>
  126.                         <td class="formValue" colspan="5">
  127.                             <textarea id="Remark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  128.                         </td>
  129.                     </tr>
  130.                 </table>
  131.             </div>
  132.         </div>
  133.     </div>
  134. </div>
  135. <div class="form-button" id="wizard-actions">
  136.     <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
  137.     <a id="btn_next" class="btn btn-default btn-next">下一步</a>
  138.     <a id="btn_finish" disabled class="btn btn-info">完&nbsp;成</a>
  139.     <a id="btn_submit" disabled class="btn btn-primary">保存提交</a>
  140.     <a id="btn_close" class="btn btn-default">关闭</a>
  141. </div>
  142.  
  143. <script type="text/javascript">
  144.     var keyValue = request("keyValue");
  145.         $(function () {
  146.             initialPage();
  147.             InitEquipmentInfo();
  148.         });
  149.         function initialPage() {
  150.             //加载导向
  151.             $('#wizard').wizard().on('change', function (e, data) {
  152.                 var $finish = $("#btn_finish");
  153.                 var $submit = $("#btn_submit");
  154.                 var $next = $("#btn_next");
  155.                 if (data.direction == "next") {
  156.                     if (data.step == 1) {
  157.                         var mEquipmentId = $("#gridTable").jqGridRowValue("Id");
  158.                         if (mEquipmentId == undefined || mEquipmentId == "") {
  159.                             dialogMsg('请选择企业信息！', 0);
  160.                             return false;
  161.                         }
  162.                         $.SetForm({
  163.                             url: "/EquipmentManage/FacilityPurchaseApply/GetNewEntity",
  164.                             param: { equipmentId: mEquipmentId },
  165.                             success: function (data) {
  166.                                 $("#form1").SetWebControls(data);
  167.                             }
  168.                         });
  169.                         $finish.removeAttr('disabled');
  170.                         $submit.removeAttr('disabled');
  171.                         $next.attr('disabled', 'disabled');
  172.                     }
  173.                 } else {
  174.                     $finish.attr('disabled', 'disabled');
  175.                     $submit.attr('disabled', 'disabled');
  176.                     $next.removeAttr('disabled');
  177.                 }
  178.             });
  179.             buttonOperation();
  180.             //新增企业
  181.             $("#btnAdd").click(function () {
  182.                 dialogOpen({
  183.                     id: 'EquipmentInfoForm',
  184.                     title: '添加',
  185.                     url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm',
  186.                     width: '1020px',
  187.                     height: '500px',
  188.                     callBack: function (iframeId) {
  189.                         top.EquipmentInfoForm.AcceptClick(function () {
  190.                             $('#gridTable').trigger('reloadGrid');
  191.                         });
  192.                     }
  193.                 });
  194.             })
  195.             //复制
  196.             $("#btnCopy").click(function () {
  197.                 var keyValue = $("#gridTable").jqGridRowValue("Id");
  198.                 if (checkedRow(keyValue)) {
  199.                     dialogOpen({
  200.                         id: 'EquipmentInfoForm',
  201.                         title: '复制',
  202.                         url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm?copyId='+keyValue,
  203.                         width: '1020px',
  204.                         height: '500px',
  205.                         callBack: function (iframeId) {
  206.                             top.EquipmentInfoForm.AcceptClick(function () {
  207.                                 $('#gridTable').trigger('reloadGrid');
  208.                             });
  209.                         }
  210.                     });
  211.                 }
  212.             });
  213.  
  214.         };
  215.         /*系统按钮being==================================*/
  216.         function InitEquipmentInfo() {
  217.             var selectedRowIndex = 0;
  218.             var $gridTable = $("#gridTable");
  219.             $gridTable.jqGrid({
  220.                 height: $(window).height() - 220,
  221.                 width: $(window).width() - 12,
  222.                 url: "/EquipmentManage/EquipmentInfo/GetPageList",
  223.                 datatype: "json",
  224.                 colModel: [
  225.                      { label: 'Id', name: 'Id', index: 'Id', width: 100, align: 'left', sortable: true, hidden: true },
  226.                     { label: '编号', name: 'Code', index: 'Code', width: 100, align: 'left', sortable: true },
  227.                     { label: '名称', name: 'Name', index: 'Name', width: 100, align: 'left', sortable: true },
  228.                     { label: '类型', name: 'Type', index: 'Type', width: 100, align: 'left', sortable: true },
  229.                     { label: '规格型号', name: 'Spec', index: 'Spec', width: 100, align: 'left', sortable: true },
  230.                     { label: '设备分类', name: 'RefClassifyId', index: 'RefClassifyId', width: 100, align: 'left', sortable: true, hidden: true },
  231.                     { label: '设备分类', name: 'ClassifyName', index: 'ClassifyName', width: 100, align: 'left', sortable: true },
  232.                     { label: '主要用途', name: 'Usage', index: 'Usage', width: 100, align: 'left', sortable: true },
  233.                     { label: '性能指标', name: 'Target', index: 'Target', width: 200, align: 'left', sortable: true },
  234.                 ],
  235.                 viewrecords: true,
  236.                 rowNum: 30,
  237.                 rowList: [30, 50, 100],
  238.                 pager: "#gridPager",
  239.                 sortname: 'Code',
  240.                 sortorder: 'asc',
  241.                 rownumbers: true,
  242.                 shrinkToFit: false,
  243.                 gridview: true,
  244.                 onSelectRow: function () {
  245.                     selectedRowIndex = $('#' + this.id).getGridParam('selrow');
  246.                 },
  247.                 gridComplete: function () {
  248.                     $('#' + this.id).setSelection(selectedRowIndex, false);
  249.                     //if($.isNullOrEmpty(inDialog)){
  250.                     //   $("#gridTable").authorizeColModel();
  251.                     //}
  252.                 },
  253.             });
  254.             //查询条件
  255.             $("#queryCondition .dropdown-menu li").click(function () {
  256.                 var text = $(this).find('a').html();
  257.                 var value = $(this).find('a').attr('data-value');
  258.                 $("#queryCondition .dropdown-text").html(text).attr('data-value', value);
  259.             });
  260.  
  261.             //查询事件
  262.             $("#btn_Search").click(function () {
  263.                 var queryJson = {
  264.                     condition: $("#queryCondition").find('.dropdown-text').attr('data-value'),
  265.                     keyword: $("#txt_Keyword").val()
  266.                 };
  267.                 $gridTable.jqGrid('setGridParam', {
  268.                     postData: { queryJson: JSON.stringify(queryJson) },
  269.                     page: 1
  270.                 }).trigger('reloadGrid')
  271.             });
  272.             //查询回车
  273.             $('#txt_Keyword').bind('keypress', function (event) {
  274.                 if (event.keyCode == "13") {
  275.                     $('#btn_Search').trigger("click");
  276.                 }
  277.             });
  278.         }
  279.  
  280.         //按钮操作（上一步、下一步、完成、关闭）
  281.         function buttonOperation() {
  282.             var $last = $("#btn_last");
  283.             var $next = $("#btn_next");
  284.             var btn_finish = $("#btn_finish");
  285.             var btn_submit = $("#btn_submit");
  286.             var btn_close = $("#btn_close");
  287.             //完成提交保存
  288.             btn_close.click(function () {
  289.                 $.currentIframe().$("#gridTable").trigger("reloadGrid");
  290.                 dialogClose();
  291.             })
  292.             //完成提交保存
  293.             btn_finish.click(function () {
  294.                 if (!$("#form1").Validform()) {
  295.                     return false;
  296.                 }
  297.                 var keyValue = $("#Id").val();
  298.                 var postData = $("#form1").GetWebControls(keyValue);
  299.                 $.SaveForm({
  300.                     url: "/EquipmentManage/FacilityPurchaseApply/SaveForm?keyValue=" + keyValue,
  301.                     param: postData,
  302.                     loading: "正在保存数据...",
  303.                     success: function () {
  304.                         $.currentIframe().$("#gridTable").trigger("reloadGrid");
  305.                         dialogClose();
  306.                     }
  307.                 });
  308.             });
  309.             //完成提交保存
  310.             btn_submit.click(function () {
  311.                 if (!$("#form1").Validform()) {
  312.                     return false;
  313.                 }
  314.                 var keyValue = $("#Id").val();
  315.                 var postData = $("#form1").GetWebControls(keyValue);
  316.                 $.SaveForm({
  317.                     url: "/EquipmentManage/FacilityPurchaseApply/SaveSubmit?keyValue=" + keyValue,
  318.                     param: postData,
  319.                     loading: "正在保存数据...",
  320.                     success: function () {
  321.                         $.currentIframe().$("#gridTable").trigger("reloadGrid");
  322.                         dialogClose();
  323.                     }
  324.                 });
  325.             });
  326.         }
  327.         //保存表单;
  328.         function AcceptClick(callBack) {
  329.             if (!$("#form1").Validform()) {
  330.                 return false;
  331.             }
  332.             var postData = $("#form1").GetWebControls(keyValue);
  333.             $.SaveForm({
  334.                 url: "../../BusinessManage/StockBillInfo/SaveForm?keyValue=" + keyValue,
  335.                 param: postData,
  336.                 loading: "正在保存数据...",
  337.                 success: function () {
  338.                     if (callBack != undefined) {
  339.                         callBack();
  340.                     } else {
  341.                         $.currentIframe().$("#gridTable").trigger("reloadGrid");
  342.                     }
  343.                 }
  344.             });
  345.         }
  346. </script>

6、新页编辑页面

屏幕分辨率有限，当普通编辑页面及向导式编辑页面都无法承载编辑信息内容时，或者说采用弹窗式页面需要滚动的页面，此时，应当采用新页编辑页面编辑内容。

页面布局源码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>@ViewBag.Title</title>
  8.     <!--框架必需start-->
  9.     <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script>
  10.     <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
  11.     <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
  12.     <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script>
  13.     <!--框架必需end-->
  14.     <!--bootstrap组件start-->
  15.     <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
  16.     <link href="~/Content/scripts/bootstrap/bootstrap.extension.css" rel="stylesheet" />
  17.     <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script>
  18.     <!--bootstrap组件end-->
  19.  
  20.     <script src="~/Content/scripts/plugins/layout/jquery.layout.js"></script>
  21.     <!--select2组件-->
  22.     <link href="~/Content/scripts/plugins/select2/css/select2.css" rel="stylesheet" />
  23.     @*<script src="~/Content/scripts/plugins/select2/js/i18n/zh-CN.js"></script>*@
  24.     <script src="~/Content/scripts/plugins/select2/js/select2.min.js"></script>
  25.     <!--文件上传组件-->
  26.     <link href="~/Content/styles/xlib-bill.css" rel="stylesheet" />
  27.     <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/css/fileinput.css" />
  28.     <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/themes/explorer/theme.css" type="text/css" media="all" />
  29.     <script src="~/Content/scripts/plugins/fileinput/js/plugins/sortable.min.js"></script>
  30.     <script src="~/Content/scripts/plugins/fileinput/js/fileinput.min.js"></script>
  31.     <script src="~/Content/scripts/plugins/fileinput/js/locales/zh.js"></script>
  32.     <script src="~/Content/scripts/plugins/fileinput/themes/explorer/theme.js"></script>
  33.     <link href="~/Content/styles/xlib-ckbox-radio.css" rel="stylesheet" />
  34.     <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script>
  35.  
  36.     @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/jqgrid/css",
  37.     "~/Content/scripts/plugins/tree/css",
  38.     "~/Content/scripts/plugins/datetime/css",
  39.     "~/Content/styles/xlib-ui.css")
  40.     @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/jqgrid/js",
  41.     "~/Content/scripts/plugins/tree/js",
  42.     "~/Content/scripts/plugins/validator/js",
  43.             "~/Content/scripts/plugins/datepicker/js",
  44.     "~/Content/scripts/utils/js")
  45.  
  46.     <style>
  47.         html, body {
  48.             height: 100%;
  49.             width: 100%;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     @RenderBody()
  55.     @Html.AntiForgeryToken()
  56. </body>
  57. </html>

示例页面源码

  1. @{
  2.     ViewBag.Title = "表单页面";
  3.     Layout = "~/Views/Shared/_BillIndex.cshtml";
  4. }
  5. <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
  6.     <div class="ui-layout-center">
  7.         <div class="center-Panel" style="margin-left:10px">
  8.             <div class="titlePanel">
  9.                 <div class="title-info">
  10.                     <div class="title">
  11.                         采购申请审批
  12.                     </div>
  13.                 </div>
  14.                 <div class="toolbar">
  15.                     <div class="btn-group">
  16.                         <a id="btnSubmit" class="btn btn-default" onclick="btn_Submit()"><i class="fa fa-upload"></i>保存提交</a>
  17.                     </div>
  18.                     <div class="btn-group">
  19.                         <a id="btnCloseTab" class="btn btn-default" onclick="btn_CloseTab()"><i class="fa fa-refresh"></i>&nbsp;退出</a>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.             <div class="billPanel" style="border-top: 1px solid #ccc; overflow-y:auto; ">
  24.                 <div class="bill-box" style="margin:10px;padding: 0px;">
  25.                     <form id="form1" name="form1" class="form-horizontal form-table-bordered" enctype="multipart/form-data">
  26.                         <table class="form border1">
  27.                             <tr>
  28.                                 <td class="formTitle">审批结果<font face="宋体">*</font></td>
  29.                                 <td class="formValue">
  30.                                     <input id="ApprovalResult" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  31.  
  32.                                 </td>
  33.                                 <td class="formTitle">审批人<font face="宋体">*</font></td>
  34.                                 <td class="formValue">
  35.                                     <input id="ApprovalBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  36.                                 </td>
  37.                                 <td class="formTitle">审批日期<font face="宋体">*</font></td>
  38.                                 <td class="formValue">
  39.                                     <input id="ApprovalOn" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" value="@DateTime.Today.ToString("yyyy-MM-dd")" isvalid="yes" checkexpession='["NotNull"]' />
  40.                                 </td>
  41.                             </tr>
  42.                             <tr>
  43.                                 <td class="formTitle" valign="top">审批意见</td>
  44.                                 <td class="formValue" colspan="5">
  45.                                     <textarea id="ApprovalRemark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  46.                                 </td>
  47.                             </tr>
  48.                         </table>
  49.                         <div class="title-info">
  50.                             <div class="title" style="width:100%;background-color:#3598dc;height:32px;line-height:32px;font-size:14px;color:#ffffff;margin-top:5px;">
  51.                                 &nbsp;<i class='fa fa-gift'>采购申请审核</i>
  52.                             </div>
  53.                         </div>
  54.                         <table class="form border1" id="auditInfo">
  55.                             <tr>
  56.                                 <td class="formTitle">审核结果<font face="宋体">*</font></td>
  57.                                 <td class="formValue">
  58.                                     <input id="AuditResult" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  59.                                 </td>
  60.                                 <td class="formTitle">审核人<font face="宋体">*</font></td>
  61.                                 <td class="formValue">
  62.                                     <input id="AuditBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  63.                                 </td>
  64.                                 <td class="formTitle">审核日期<font face="宋体">*</font></td>
  65.                                 <td class="formValue">
  66.                                     <input id="AuditOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  67.                                 </td>
  68.                             </tr>
  69.                             <tr>
  70.                                 <td class="formTitle" valign="top">审核意见</td>
  71.                                 <td class="formValue" colspan="5">
  72.                                     <textarea id="AuditRemark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  73.                                 </td>
  74.                             </tr>
  75.                         </table>
  76.                         <div class="title-info">
  77.                             <div class="title" style="width:100%;background-color:#3598dc;height:32px;line-height:32px;font-size:14px;color:#ffffff;margin-top:5px;">
  78.                                 &nbsp;<i class='fa fa-gift'>采购申请信息</i>
  79.                             </div>
  80.                         </div>
  81.                         <table class="form border1" id="applyInfo">
  82.                             <tr>
  83.                                 <td class="formTitle">申请编号<font face="宋体">*</font></td>
  84.                                 <td class="formValue">
  85.                                     <input id="Id" type="hidden" />
  86.                                     <input id="ApplyCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  87.                                 </td>
  88.                                 <td class="formTitle">申请人<font face="宋体">*</font></td>
  89.                                 <td class="formValue">
  90.                                     <input id="OperatorBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  91.                                 </td>
  92.                                 <td class="formTitle">申请日期<font face="宋体">*</font></td>
  93.                                 <td class="formValue">
  94.                                     <input id="OperatorOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  95.                                 </td>
  96.                             </tr>
  97.                             <tr>
  98.                                 <td class="formTitle">设备编号<font face="宋体">*</font></td>
  99.                                 <td class="formValue">
  100.                                     <input type="hidden" id="RefEquipmentId" />
  101.                                     <input id="EquipmentCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  102.                                 </td>
  103.                                 <td class="formTitle">名称<font face="宋体">*</font></td>
  104.                                 <td class="formValue">
  105.                                     <input id="EquipmentName" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  106.                                 </td>
  107.                                 <td class="formTitle">类型<font face="宋体">*</font></td>
  108.                                 <td class="formValue">
  109.                                     <input id="EquipmentType" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' />
  110.                                 </td>
  111.                             </tr>
  112.                             <tr>
  113.                                 <td class="formTitle">规格型号</td>
  114.                                 <td class="formValue">
  115.                                     <input id="EquipmentSpec" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  116.                                 </td>
  117.                                 <td class="formTitle">量程</td>
  118.                                 <td class="formValue">
  119.                                     <input id="MeasurementRange" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  120.                                 </td>
  121.                                 <td class="formTitle">精度</td>
  122.                                 <td class="formValue">
  123.                                     <input id="MeasurementAccuracy" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  124.                                 </td>
  125.                             </tr>
  126.                             <tr>
  127.                                 <td class="formTitle">数量</td>
  128.                                 <td class="formValue">
  129.                                     <input id="Amount" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' />
  130.                                     <input id="AmountUnit" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="no" checkexpession='["NotNull"]' />
  131.                                 </td>
  132.                                 <td class="formTitle">单价</td>
  133.                                 <td class="formValue">
  134.                                     <input id="Price" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  135.                                 </td>
  136.                                 <td class="formTitle">生产厂家</td>
  137.                                 <td class="formValue">
  138.                                     <input id="RefSupplierId" type="hidden" />
  139.                                     <input id="SupplierName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' />
  140.                                 </td>
  141.                             </tr>
  142.                             <tr>
  143.                                 <td class="formTitle" valign="top">主要用途</td>
  144.                                 <td class="formValue" colspan="5">
  145.                                     <textarea id="Usage" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  146.                                 </td>
  147.                             </tr>
  148.                             <tr>
  149.                                 <td class="formTitle" valign="top">性能指标</td>
  150.                                 <td class="formValue" colspan="5">
  151.                                     <textarea id="Target" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  152.                                 </td>
  153.                             </tr>
  154.                             <tr>
  155.                                 <td class="formTitle" valign="top">备注说明</td>
  156.                                 <td class="formValue" colspan="5">
  157.                                     <textarea id="Remark" class="form-control" style="height:100px;" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea>
  158.                                 </td>
  159.                             </tr>
  160.                         </table>
  161.                     </form>
  162.  
  163.                 </div>
  164.             </div>
  165.         </div>
  166.     </div>
  167. </div>
  168. <script type="text/javascript">
  169.     var keyValue = request('keyValue');
  170.     var tabiframeId = request('tabiframeId');
  171.     $(function () {
  172.         $("#applyInfo .form-control").attr("disabled", "disabled");
  173.         initialPage();
  174.         GetGrid();
  175.     });
  176.     function initialPage() {
  177.         var layout = $('#layout').layout({
  178.             applyDemoStyles: true,
  179.             west__size: 1,
  180.             onresize: function () {
  181.                 $(window).resize();
  182.             }
  183.         });
  184.         //resize重设布局;
  185.         $(window).resize(function (e) {
  186.             window.setTimeout(function () {
  187.                 $('.billPanel').css("height", $(window).height() - 75);
  188.             }, 200);
  189.             e.stopPropagation();
  190.         });
  191.         $(window).resize();
  192.  
  193.         $("#auditInfo .form-control").attr("disabled", "disabled");
  194.         $("#applyInfo .form-control").attr("disabled", "disabled");
  195.         //处理结果
  196.         $("#ApprovalResult").ComboBox({//检查结果
  197.             //url: "../../SystemManage/DataItemDetail/GetDataItemListJson",
  198.             //param: { EnCode: "SuperviseInspect" },
  199.             data: [{ Name: "通过", Value: "通过" }, { Name: "退回", Value: "退回" }],
  200.             id: "Value",
  201.             text: "Name",
  202.             description: " == 请选择 == ",
  203.             height: "200px",
  204.         });
  205.         //获取表单
  206.         if (!!keyValue) {
  207.             $.SetForm({
  208.                 url: "/EquipmentManage/FacilityPurchaseApply/GetApprovalEntity",
  209.                 param: { keyValue: keyValue },
  210.                 success: function (data) {
  211.                     $("#form1").SetWebControls(data);
  212.                 }
  213.             });
  214.         } else
  215.         {
  216.  
  217.         }
  218.     }
  219.  
  220.     //打印
  221.     function btn_Finality() {
  222.         var keyValue = $("#Id").val();
  223.         var queryJson = {
  224.             condition: "Id",
  225.             keyword: keyValue
  226.         };
  227.         //console.log(JSON.stringify(queryJson));
  228.         //var win = window.open('/LawEnforceManage/CaseArchivesTemplate/ExportPdf?templateId=CaseRegisterInfo&queryJson=' + JSON.stringify(queryJson));
  229.         //win.print();
  230.         top.tablist.newTab({
  231.             id: "ExportPdf",
  232.             title: '打印预览',
  233.             closed: true,
  234.             icon: "fa fa fa-eye",
  235.             url: top.contentPath + "/LawEnforceManage/CaseArchivesTemplate/ExportPdf?templateId=T009&queryJson=" + escape(JSON.stringify(queryJson))
  236.         });
  237.     }
  238.  
  239.     //保存
  240.     function btn_Save() {
  241.         if (!$("#form1").Validform()) {
  242.             return false;
  243.         }
  244.         var keyValue = $("#Id").val();
  245.         var postData = $("#form1").GetWebControls();
  246.         $.SaveForm({
  247.             url: "/EquipmentManage/FacilityPurchaseApply/AuditSubmit?keyValue=" + keyValue,
  248.             param: postData,
  249.             loading: "正在保存数据...",
  250.             success: function (result) {
  251.                 if (tabiframeId != "")
  252.                     top.frames[tabiframeId].$("#gridTable").trigger("reloadGrid");
  253.             }
  254.         });
  255.     }
  256.     //保存并提交
  257.     function btn_Submit() {
  258.         if (!$("#form1").Validform()) {
  259.             return false;
  260.         }
  261.         var keyValue = $("#Id").val();
  262.         var postData = $("#form1").GetWebControls();
  263.         $.SaveForm({
  264.             url: "/EquipmentManage/FacilityPurchaseApply/ApprovalSubmit?keyValue=" + keyValue,
  265.             param: postData,
  266.             loading: "正在保存数据...",
  267.             success: function (result) {
  268.                 if (tabiframeId != "")
  269.                     top.frames[tabiframeId].$("#gridTable").trigger("reloadGrid");
  270.                 btn_CloseTab();
  271.             }
  272.         });
  273.     }
  274.  
  275.     function btn_CloseTab() {
  276.         top.tablist.closeTab(window.location.pathname + window.location.search);
  277.     }
  278.  
  279. </script>

至此Web前端页面介绍完毕，记录于此，便于后续自己开发及分享给大家！

基于.net EF6 MVC5+WEB Api 的Web系统框架总结（1）-Web前端页面的更多相关文章

  1. 【ASP.NET Web API教程】4.1 ASP.NET Web API中的路由

    原文:[ASP.NET Web API教程]4.1 ASP.NET Web API中的路由 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. ...

  2. .net mvc web api Autofac依赖注入框架-戈多编程

    今天自己搭了一套基于三层的依赖注入mvc web api 的依赖注入框架,在此总结下相关配置 1.设置应用程序的.net Framework版本为 4.5 2.通过Nuget 安装autofac包 I ...

  3. 【ASP.NET Web API教程】5.5 ASP.NET Web API中的HTTP Cookie

    原文:[ASP.NET Web API教程]5.5 ASP.NET Web API中的HTTP Cookie 5.5 HTTP Cookies in ASP.NET Web API 5.5 ASP.N ...

  4. 【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器

    原文:[ASP.NET Web API教程]5.4 ASP.NET Web API批处理器 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. ...

  5. 【ASP.NET Web API教程】4.3 ASP.NET Web API中的异常处理

    原文:[ASP.NET Web API教程]4.3 ASP.NET Web API中的异常处理 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  6. ASP.NET MVC , ASP.NET Web API 的路由系统与 ASP.NET 的路由系统是怎么衔接的?

      ASP.NET MVC 的路由实际上是建立在 ASP.NET 的路由系统之上的. MVC 路由注册通常是这样的: RouteTable 是一个全局路由表, 它的 Routes 静态属性是一个 Ro ...

  7. 【ASP.NET Web API教程】6.2 ASP.NET Web API中的JSON和XML序列化

    谨以此文感谢关注此系列文章的园友!前段时间本以为此系列文章已没多少人关注,而不打算继续下去了.因为文章贴出来之后,看的人似乎不多,也很少有人对这些文章发表评论,而且几乎无人给予“推荐”.但前几天有人询 ...

  8. Asp.Net Web API 2第十三课——ASP.NET Web API中的JSON和XML序列化

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文描述ASP.NET W ...

  9. asp.net web api 2.2 基础框架（带例子）

    链接:https://github.com/solenovex/asp.net-web-api-2.2-starter-template 简介 这个是我自己编写的asp.net web api 2.2 ...

随机推荐

  1. Mybatis之旅第六篇-关联查询

    一.引言 通过动态SQL我们可以进行复杂SQL的编写,但之前的例子都是单表查询,在实际开发中,当然不可能都是单表,很多时候我们需要进行关联多表查询(有些公司为了性能还是尽量的使用单表查询),表与表之间 ...

  2. 『片段』Win32 模式窗体 消息路由

    需求背景 近来,有个需求: 和一个外部程序对接. 具体是,我这边 主程序用 Process 启动外部程序.外部程序启动后,我这边调用的窗体不允许再进行任何操作. 当外部程序关闭时,外部程序会向我这边的 ...

  3. asp.net mvc 三层加EF两表联查

    首先打开vs软件新建项目创建web中的mvc项目再右击解决方案创建类库项目分别创建DAL层和BLL层再把DAL层和BLL层的类重命名在mvc项目中的Models文件夹创建model类在DAL创建ADO ...

  4. 自定义超链接动画---transition

    效果图: <a href="#"> <span>HTML</span> </a> a { position: relative; t ...

  5. ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    [回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...

  6. WPF软件开发系统之三——自助购票取票、自助选座系统

    本系统使用.Net WPF开发,运行于Windows操作系统,电脑或者触摸屏设备(包括竖屏). 本系统开发背景:景点.影院.或商场的自助购票.取票系统. 图书馆.自习室的选座.占座系统. 功能包括:选 ...

  7. markdown 基本操作

    无序列表:输入-之后输入空格有序列表:输入数字+“.”之后输入空格任务列表:-[空格]空格 文字标题:ctrl+数字表格:ctrl+t生成目录:[TOC]按回车选中一整行:ctrl+l选中单词:ctr ...

  8. ArrayBlockQueue源码解析

    清明节和朋友去被抖音带火的一个餐厅,下午两点钟取晚上的号,前面已经有十几桌了,四点半餐厅开始正式营业,等轮到我们已经近八点了.餐厅分为几个区域,只有最火的区域(在小船上)需要排号,其他区域基本上是随到 ...

  9. 测试 ASP.NET Core API Controller

    本文需要您了解ASP.NET Core MVC/Web API, xUnit以及Moq相关知识. 这里有xUnit和Moq的介绍: https://www.cnblogs.com/cgzl/p/917 ...

  10. 如何在ASP.NET Core程序启动时运行异步任务（2）

    原文:Running async tasks on app startup in ASP.NET Core (Part 2) 作者:Andrew Lock 译者:Lamond Lu 在我的上一篇博客中 ...