本 Web 系統框架基於C# EF6+MVC+WebApi的快速應用開發平台。本節主要介紹Web前端頁面設計與實現。Web前端頁面主要分為普通列表頁面、樹狀導航列表頁面、普通編輯頁面、數據導入頁面、向導編輯頁面以及新頁編輯頁面。
1、普通列表頁面
普通列表頁面是系統框架最基礎的列表頁面，采用JqGrid組件。
頁面布局源碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@ViewBag.Title</title> <!--框架必需start--> <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script> <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" /> <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script> <script src="~/Content/scripts/plugins/cookie/jquery.cookie.js"></script> <!--框架必需end--> <!--bootstrap組件start--> <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script> <!--bootstrap組件end--> <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script> @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") <style> body { margin: 10px; margin-bottom: 0px; } </style> <script> //列表頁默認選擇條件 gxlqssjf 20180117 $(function () { if ($("#queryCondition .dropdown-text").length > 0) { var selDropItem = $("#queryCondition .dropdown-text").attr("data-value"); if ($.isNullOrEmpty(selDropItem)) { if ($("#queryCondition ul li").length > 0) { var firstItem = $("#queryCondition ul li:first a"); $("#queryCondition .dropdown-text").html(firstItem.text()).attr('data-value', firstItem.attr("data-value")); } } } }); </script> </head> <body> @RenderBody() @Html.AntiForgeryToken() </body> </html>
示例頁面源碼
@{ ViewBag.Title = "列表頁面"; Layout = "~/Views/Shared/_Index.cshtml"; } <script> var inDialog = request('inDialog'); $(function () { InitialPage(); GetGrid(); }); //初始化頁面 function InitialPage() { //resize重設布局; $(window).resize(function (e) { window.setTimeout(function () { $('#gridTable').setGridWidth(($('.gridPanel').width())); $('#gridTable').setGridHeight($(window).height() - 136.5); }, 200); e.stopPropagation(); }); } //加載表格 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $('#gridTable'); $gridTable.jqGrid({ autowidth: true, height: $(window).height() - 136.5, url: "/EquipmentManage/EquipmentSupplier/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: 'ShortName', index: 'ShortName', width: 100, align: 'left', sortable: true }, { label: '聯系人', name: 'Linkman', index: 'Linkman', width: 100, align: 'left', sortable: true }, { label: '聯系電話', name: 'Phone', index: 'Phone', width: 100, align: 'left', sortable: true }, { label: '聯系地址', name: 'Address', index: 'Address', 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() { var text = $(this).find('a').html(); var value = $(this).find('a').attr('data-value'); $("#queryCondition .dropdown-text").html(text).attr('data-value', value); }); //查詢事件 $("#btn_Search").click(function() { var queryJson = { condition: $("#queryCondition").find('.dropdown-text').attr('data-value'), keyword: $("#txt_Keyword").val() }; $gridTable.jqGrid('setGridParam', { postData: { queryJson: JSON.stringify(queryJson) }, page: 1 }).trigger('reloadGrid'); }); //查詢回車 $('#txt_Keyword').bind('keypress', function (event) { if (event.keyCode == "13") { $('#btn_Search').trigger("click"); } }); } //新增 function btn_add() { dialogOpen({ id: 'SupplierInfoForm', title: '添加', url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm', width: '1020px', height: '600px', callBack: function (iframeId) { top.SupplierInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } function btn_copy() { var keyValue = $('#gridTable').jqGridRowValue('Id'); if (checkedRow(keyValue)) { dialogOpen({ id: 'SupplierInfoForm', title: '編輯', url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm?copyId=' + keyValue, width: '1020px', height: '600px', callBack: function (iframeId) { top.SupplierInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } } function btn_import() { dialogOpen({ id: 'SupplierInfoForm', title: '批量導入', url: '/EquipmentManage/EquipmentSupplier/SupplierInfoImport', width: '1020px', height: '600px', btn:null, callBack: function (iframeId) { top.SupplierInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } //編輯 function btn_edit() { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (checkedRow(keyValue)) { dialogOpen({ id: 'SupplierInfoForm', title: '編輯', url: '/EquipmentManage/EquipmentSupplier/SupplierInfoForm?keyValue=' + keyValue, width: '1020px', height: '600px', callBack: function (iframeId) { top.SupplierInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } } //刪除 function btn_delete() { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (keyValue) { $.RemoveForm({ url: '/EquipmentManage/EquipmentSupplier/RemoveForm', param: { keyValue: keyValue }, success: function (data) { console.log(data); $('#gridTable').trigger('reloadGrid'); } }) } else { dialogMsg('請選擇需要刪除的數據！', 0); } } //對話框回調 function AcceptClick(callBack) { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (checkedRow(keyValue)){ var row = $('#gridTable').jqGridRow(); callBack(row); dialogClose(); } } </script> <div class="titlePanel"> <div class="title-search"> <table> <tr> <td> <div id="queryCondition" class="btn-group"> <a class="btn btn-default dropdown-text" data-toggle="dropdown">選擇條件</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a data-value="Code">編號</a></li> <li><a data-value="Name">企業名稱</a></li> <li><a data-value="ShortName">許可證號</a></li> <li><a data-value="Linkman">聯系人</a></li> </ul> </div> </td> <td style="padding-left:2px;"> <input id="txt_Keyword" type="text" class="form-control" placeholder="請輸入要查詢關鍵字" style="width: 200px;" /> </td> <td style="padding-left: 5px;"> <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查詢</a> </td> </tr> </table> </div> <div class="toolbar"> <div class="btn-group"> <a id="btnReload" class="btn btn-default" onclick="reload()"><i class="fa fa-refresh"></i> 刷新</a> <a id="btnAdd" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i> 新增</a> <a id="btnCopy" class="btn btn-default" onclick="btn_copy()"><i class="fa fa-plus"></i> 復制</a> <a id="btnImport" class="btn btn-default" onclick="btn_import()"><i class="fa fa-upload"></i> 導入</a> </div> <div class="btn-group"> <a id="btnEdit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i> 編輯</a> <a id="btnDelete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i> 刪除</a> </div> <script> if($.isNullOrEmpty(inDialog)){ $('.toolbar').authorizeButton(); } </script> </div> </div> <div class="gridPanel"> <table id="gridTable"></table> <div id="gridPager"></div> </div>
2、樹狀導航列表頁面
樹狀導航列表頁面是在普通列表頁面的基礎上，增加左邊或右邊樹狀導航功能的列表頁面。應用於列表數據有上級、分類功能的頁面。便於數據查找、過濾或者新增時，作為主信息先選擇，減少彈窗，降低操作復雜性。
頁面布局源碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@ViewBag.Title</title> <!--框架必需start--> <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script> <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" /> <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script> <!--框架必需end--> <!--bootstrap組件start--> <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" /> <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script> <!--bootstrap組件end--> <script src="~/Content/scripts/plugins/layout/jquery.layout.js"></script> <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script> @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") <style> html, body { height: 100%; width: 100%; } </style> </head> <body> @RenderBody() @Html.AntiForgeryToken() </body> </html>
頁面示例源碼
@{ ViewBag.Title = "列表頁面"; Layout = "~/Views/Shared/_LayoutIndex.cshtml"; } <script> var inDialog = request('inDialog'); $(function () { InitialPage(); GetTree(); GetGrid(); }); //初始化頁面 function InitialPage() { //layout布局 $('#layout').layout({ applyDemoStyles: true, onresize: function () { $(window).resize() } }).sizePane("west", 250); //resize重設(表格、樹形)寬高 $(window).resize(function (e) { window.setTimeout(function () { $('#gridTable').setGridWidth(($('.gridPanel').width())); $("#gridTable").setGridHeight($(window).height() - 172); $("#itemTree").setTreeHeight($(window).height() - 52); }, 240); e.stopPropagation(); }); $(window).resize(); } //加載樹 var selectItemId = "0"; function GetTree() { var item = { height: $(window).height() - 52, url: "/EquipmentManage/EquipmentClassify/GetTreeList", onnodeclick: function (item) { selectItemId = item.id; //展開下級 //$(".bbit-tree-selected").children('.bbit-tree-ec-icon').trigger("click"); $('#btn_Search').trigger("click"); }, }; //初始化 $("#itemTree").treeview(item); } //加載表格 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $('#gridTable'); $gridTable.jqGrid({ autowidth: true, height: $(window).height() - 136.5, 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: '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() { var text = $(this).find('a').html(); var value = $(this).find('a').attr('data-value'); $("#queryCondition .dropdown-text").html(text).attr('data-value', value); }); //查詢事件 $("#btn_Search").click(function() { var queryJson = { RefClassifyId:selectItemId, condition: $("#queryCondition").find('.dropdown-text').attr('data-value'), keyword: $("#txt_Keyword").val() }; $gridTable.jqGrid('setGridParam', { postData: { queryJson: JSON.stringify(queryJson) }, page: 1 }).trigger('reloadGrid'); }); //查詢回車 $('#txt_Keyword').bind('keypress', function (event) { if (event.keyCode == "13") { $('#btn_Search').trigger("click"); } }); } //新增 function btn_add() { dialogOpen({ id: 'EquipmentInfoForm', title: '添加', url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm', width: '1020px', height: '500px', callBack: function (iframeId) { top.EquipmentInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } function btn_copy() { var keyValue = $('#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'); }); } }); } } //編輯 function btn_edit() { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (checkedRow(keyValue)) { dialogOpen({ id: 'EquipmentInfoForm', title: '編輯', url: '/EquipmentManage/EquipmentInfo/EquipmentInfoForm?keyValue=' + keyValue, width: '1020px', height: '500px', callBack: function (iframeId) { top.EquipmentInfoForm.AcceptClick(function () { $('#gridTable').trigger('reloadGrid'); }); } }); } } //刪除 function btn_delete() { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (keyValue) { $.RemoveForm({ url: '/EquipmentManage/EquipmentInfo/RemoveForm', param: { keyValue: keyValue }, success: function (data) { console.log(data); $('#gridTable').trigger('reloadGrid'); } }) } else { dialogMsg('請選擇需要刪除的數據！', 0); } } //新增 function btn_classify() { dialogOpen({ id: 'EquipmentClassifyIndex', title: '設備分類', url: '/EquipmentManage/EquipmentClassify/EquipmentClassifyIndex', width: '1020px', height: '600px', callBack: function (iframeId) { top.EquipmentClassifyIndex.AcceptClick(function () { //$('#gridTable').trigger('reloadGrid'); reload();//重新加載 }); } }); } //新增 function btn_address() { dialogOpen({ id: 'InstallAddressIndex', title: '安裝地點', url: '/EquipmentManage/InstallAddress/InstallAddressIndex', width: '1020px', height: '600px', callBack: function (iframeId) { top.InstallAddressIndex.AcceptClick(function () { //$('#gridTable').trigger('reloadGrid'); reload();//重新加載 }); } }); } //對話框回調 function AcceptClick(callBack) { var keyValue = $('#gridTable').jqGridRowValue( 'Id'); if (checkedRow(keyValue)){ var row = $('#gridTable').jqGridRow(); callBack(row); dialogClose(); } } </script> <div class="ui-layout" id="layout" style="height: 100%; width: 100%;"> <div class="ui-layout-west"> <div class="west-Panel"> <div class="panel-Title">設備分類</div> <div id="itemTree"></div> </div> </div> <div class="ui-layout-center"> <div class="center-Panel"> <div class="panel-Title">設備信息</div> <div class="titlePanel"> <div class="title-search"> <table> <tr> <td> <div id="queryCondition" class="btn-group"> <a class="btn btn-default dropdown-text" data-toggle="dropdown">選擇條件</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a data-value="Code">編號</a></li> <li><a data-value="Name">設備名稱</a></li> </ul> </div> </td> <td style="padding-left:2px;"> <input id="txt_Keyword" type="text" class="form-control" placeholder="請輸入要查詢關鍵字" style="width: 200px;" /> </td> <td style="padding-left: 5px;"> <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查詢</a> </td> </tr> </table> </div> <div class="toolbar"> <div class="btn-group"> <a id="btnReload" class="btn btn-default" onclick="reload()"><i class="fa fa-refresh"></i> 刷新</a> <a id="btnAdd" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i> 新增</a> <a id="btnCopy" class="btn btn-default" onclick="btn_copy()"><i class="fa fa-plus"></i> 復制</a> </div> <div class="btn-group"> <a id="btnEdit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i> 編輯</a> <a id="btnDelete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i> 刪除</a> </div> <div class="btn-group"> <a id="btnMore" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-reorder"></i> 更多<span class="caret"></span> </a> <ul class="dropdown-menu pull-right"> <li id="btnClassify"><a onclick="btn_classify()"><i></i> 設備分類</a></li> <li id="btnAddress"><a onclick="btn_address()"><i></i> 存放地點</a></li> </ul> </div> <script> if($.isNullOrEmpty(inDialog)){ //$('.toolbar').authorizeButton(); } </script> </div> </div> <div class="gridPanel"> <table id="gridTable"></table> <div id="gridPager"></div> </div> </div> </div> </div>
3、普通編輯頁面
即彈窗式，顯示待錄入信息后，然后進行保存的編輯頁面。應用於編輯頁面信息少，操作簡單的功能頁面。
頁面布局源碼
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@ViewBag.Title</title> <!--框架必需start--> @*<script src="~/Content/scripts/jquery/jquery-1.10.2.min.js"></script>*@ <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script> <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" /> <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script> <!--框架必需end--> <!--bootstrap組件start--> <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/scripts/bootstrap/bootstrap.extension.css" rel="stylesheet" /> <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script> <!--select2組件--> <link href="~/Content/scripts/plugins/select2/css/select2.css" rel="stylesheet"/> @*<script src="~/Content/scripts/plugins/select2/js/i18n/zh-CN.js"></script>*@ <script src="~/Content/scripts/plugins/select2/js/select2.min.js"></script> <!--文件上傳組件--> <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/css/fileinput.css" /> <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/themes/explorer/theme.css" type="text/css" media="all" /> <script src="~/Content/scripts/plugins/fileinput/js/plugins/sortable.min.js"></script> <script src="~/Content/scripts/plugins/fileinput/js/fileinput.min.js"></script> <script src="~/Content/scripts/plugins/fileinput/js/locales/zh.js"></script> <script src="~/Content/scripts/plugins/fileinput/themes/explorer/theme.js"></script> <link href="~/Content/styles/xlib-ckbox-radio.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script> <script src="~/Content/scripts/plugins/dialog/dialog.js"></script> <script src="~/Content/scripts/fooddetection/jquery.PrintArea.js"></script> @System.Web.Optimization.Styles.Render("~/Content/scripts/plugins/tree/css", "~/Content/scripts/plugins/jqgrid/css", "~/Content/scripts/plugins/datetime/css", "~/Content/scripts/plugins/wizard/css", "~/Content/styles/xlib-ui.css") @System.Web.Optimization.Scripts.Render("~/Content/scripts/plugins/tree/js", "~/Content/scripts/plugins/validator/js", "~/Content/scripts/plugins/wizard/js", "~/Content/scripts/plugins/datepicker/js", "~/Content/scripts/plugins/jqgrid/js", "~/Content/scripts/utils/js") </head> <body> <form id="form1"> @RenderBody() @Html.AntiForgeryToken() </form> </body> </html>
示例頁面源碼
@{ ViewBag.Title = "表單頁面"; Layout = "~/Views/Shared/_Form.cshtml"; } <div style="margin:15px;"> <table class="form border1"> <tr> <td class="formTitle">編號<font face="宋體">*</font></td> <td class="formValue"> <input id="Code" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">企業名稱<font face="宋體">*</font></td> <td class="formValue"> <input id="Name" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">簡稱</td> <td class="formValue"> <input id="ShortName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">聯系人<font face="宋體">*</font></td> <td class="formValue"> <input id="Linkman" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">聯系電話<font face="宋體">*</font></td> <td class="formValue"> <input id="Phone" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">手機號碼<font face="宋體">*</font></td> <td class="formValue"> <input id="Mobile" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">聯系地址<font face="宋體">*</font></td> <td class="formValue" colspan="4"> <input type="hidden" id="RefAreaId" /> <input id="ProvinceName" type="text" class="form-control" length="100" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' /> <input id="CityName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' /> <input id="AreaName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" isvalid="no" checkexpession='["NotNull"]' /> <input id="StreetName" type="text" class="form-control" length="-1" value="" style="float: left; width: 24%; margin-right: 2px;" /> <span class="input-button" style="margin-top:-15px" title="查找" onclick="selectAdminArea();"><i class="fa fa-search"></i></span> </td> <td class="formValue"> <input id="Address" type="text" class="form-control" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">郵政編碼</td> <td class="formValue"> <input id="PostCode" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">傳真號碼</td> <td class="formValue"> <input id="Fax" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">電子郵箱</td> <td class="formValue"> <input id="Email" type="text" class="form-control" length="255" value="" isvalid="no" checkexpession='["NotNull","Email"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">經營范圍</td> <td class="formValue" colspan="5"> <textarea id="BusinessScope" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle">評級</td> <td class="formValue"> <input id="Grader" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">登錄日期</td> <td class="formValue"> <input id="StartDate" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">登錄人</td> <td class="formValue"> <input id="CreatedUserName" type="text" disabled="disabled" class="form-control" length="255" value="" isvalid="no" checkexpession='["NotNull","Email"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">企業簡介</td> <td class="formValue" colspan="5"> <textarea id="Description" type="text" class="form-control" style="height:200px;" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle" valign="top">備注說明</td> <td class="formValue" colspan="5"> <textarea id="Remark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> </table> </div> <script> var keyValue = request('keyValue'); var copyId = request('copyId'); $(function () { initControl(); }); //初始化控件 function initControl() { //獲取表單 if (!!keyValue) { $.SetForm({ url: "/EquipmentManage/EquipmentSupplier/GetFormJson", param: { keyValue: keyValue }, success: function (data) { $("#form1").SetWebControls(data); } }) } else if (!!copyId) { $.SetForm({ url: "/EquipmentManage/EquipmentSupplier/GetFormJson", param: { keyValue: copyId }, success: function (data) { $("#form1").SetWebControls(data); } }) } }; //保存表單; function AcceptClick(callBack) { if (!$("#form1").Validform()) { return false; } var postData = $("#form1").GetWebControls(keyValue); $.SaveForm({ url: "/EquipmentManage/EquipmentSupplier/SaveForm?keyValue=" + keyValue, param: postData, loading: "正在保存數據...", success: function () { if(callBack != undefined){ callBack(); }else{ $.currentIframe().$("#gridTable").trigger("reloadGrid"); } } }); } </script>
4、數據導入頁面
數據導入頁面主要應用的基礎信息數據，批量初始導入功能。
此頁面特點是-可以展示數據導入失敗的行，並顯示相關失敗信息。
頁面布局源碼
與普通編輯頁面布局頁相同。
示例頁面源碼
@{ ViewBag.Title = "初始庫存導入"; Layout = "~/Views/Shared/_Form.cshtml"; } <div class="ui-layout"> <div class="ui-layout-center"> <div class="center-Panel" style="margin-left:10px;margin-top:10px;margin-right:10px;"> <form id="form1" name="form1" class="form-horizontal form-table-bordered" enctype="multipart/form-data"> <table class="form border1"> <tr> <td class="formTitle">模板文件</td> <td class="formValue"> <a href="@ViewBag.TemplateFile" style="color:blue">導入模板.xls</a> </td> <td class="formTitle">Excel文件<font face="宋體">*</font></td> <td class="formValue" colspan="3"> <input type="file" id="FileName" accept=".xls,.xlsx" class="file" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> </table> <div class="gridPanel"> <table id="gridTable"></table> <div id="gridPager"></div> </div> </form> </div> </div> </div> <div class="form-button" id="wizard-actions"> <a id="btn_upload" class="btn btn-primary">上 傳</a> <a id="btn_cancel" class="btn btn-default">退 出</a> </div> <script> $(function () { GetGrid(); //完成提交保存 $("#btn_cancel").click(function () { /*調用上級列表進行刷新*/ $.currentIframe().$("#gridTable").trigger("reloadGrid"); dialogClose(); }) //完成提交保存 $("#btn_upload").click(function () { if (!$("#form1").Validform()) { return false; } $.SaveFormData({ file: $('input[type=file]')[0].files[0], url: "/EquipmentManage/EquipmentSupplier/Upload", loading: "正在導入數據...", close: false, success: function (result) { jQuery("#gridTable").jqGrid("clearGridData"); //console.log(result); for (var i = 0; i < result.resultdata.length; i++) { $("#gridTable").jqGrid('addRowData', i + 1, result.resultdata[i]); } $.currentIframe().$('#gridTable').trigger('reloadGrid'); } }); }); }); $("#FileName").fileinput({ showUpload: false, showRemove: true, showPreview: false, language: 'zh', maxFileSize: 1024 * 10, }); //加載表格 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $('#gridTable'); $gridTable.jqGrid({ autowidth: true, height: $(window).height() - 156, //url: "../../CateringManage/StockBillInfo/GetStockImportPage", datatype: "local", colModel: [ { label: '導入結果', name: 'ImportResult', index: 'ImportResult', width: 100, align: 'left', sortable: true, formatter: function (cellvalue, options, rowObject) { if (cellvalue == "導入失敗") { return '<span class=\"label label-danger\">' + cellvalue + '</span>'; } else { return cellvalue; } } }, { label: '失敗說明', name: 'ErrorMessage', index: 'ErrorMessage', width: 300, align: 'left', sortable: true }, { 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: 'ShortName', index: 'ShortName', width: 100, align: 'left', sortable: true }, { label: '聯系人', name: 'Linkman', index: 'Linkman', width: 100, align: 'left', sortable: true }, { label: '聯系電話', name: 'Phone', index: 'Phone', width: 100, align: 'left', sortable: true }, { label: '聯系地址', name: 'Address', index: 'Address', 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); }, jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false }, }); } </script>
5、向導式編輯頁面
即使用向導式的方式，一步步處理相關信息，然后進行保存的編輯頁面。應用於減少多次彈窗的普通編輯頁面。比如示例中設備采購申請，只需要選擇設備信息，然后下一步，即可保存數據，三次點擊操作即完成數據錄入功能。
頁面布局源碼
與普通編輯頁面布局頁相同。
示例頁面源碼
@{ ViewBag.Title = "進貨信息編輯"; Layout = "~/Views/Shared/_Form.cshtml"; } <div class="widget-body"> <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;"> <ul class="steps"> <li data-target="#stepEquipmentInfo" class="active"><span class="step">1</span>設備信息<span class="chevron"></span></li> <li data-target="#stepBaseInfo"><span class="step">2</span>系統機構<span class="chevron"></span></li> </ul> </div> <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;"> <div class="step-pane active" id="stepEquipmentInfo" style="margin: 5px;"> <div class="titlePanel"> <div class="title-search"> <table> <tr> <td> <div id="queryCondition" class="btn-group"> <a class="btn btn-default dropdown-text" data-toggle="dropdown">選擇條件</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a data-value="Code">編號</a></li> <li><a data-value="Name">設備名稱</a></li> </ul> </div> </td> <td style="padding-left:2px;"> <input id="txt_Keyword" type="text" class="form-control" placeholder="請輸入要查詢關鍵字" style="width: 200px;" /> </td> <td style="padding-left: 5px;"> <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>查詢</a> </td> </tr> </table> </div> <div class="toolbar"> <div class="btn-group"> <a id="btnAdd" class="btn btn-default"><i class="fa fa-plus"></i> 新增</a> <a id="btnCopy" class="btn btn-default"><i class="fa fa-plus"></i> 復制</a> </div> </div> </div> <div class="gridPanel"> <table id="gridTable"></table> <div id="gridPager"></div> </div> </div> <div class="step-pane" id="stepBaseInfo"> <div class="form-body" style="margin-left: 0px; margin-top: 30px; margin-right: 30px; "> <table class="form border1"> <tr> <td class="formTitle">申請編號<font face="宋體">*</font></td> <td class="formValue"> <input type="hidden" id="Id" /> <input id="ApplyCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">申請人<font face="宋體">*</font></td> <td class="formValue"> <input id="OperatorBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">申請日期<font face="宋體">*</font></td> <td class="formValue"> <input id="OperatorOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">設備編號<font face="宋體">*</font></td> <td class="formValue"> <input type="hidden" id="RefEquipmentId" /> <input id="EquipmentCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">名稱<font face="宋體">*</font></td> <td class="formValue"> <input id="EquipmentName" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">類型<font face="宋體">*</font></td> <td class="formValue"> <input id="EquipmentType" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">規格型號</td> <td class="formValue"> <input id="EquipmentSpec" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">量程</td> <td class="formValue"> <input id="MeasurementRange" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">精度</td> <td class="formValue"> <input id="MeasurementAccuracy" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">數量<font face="宋體">*</font></td> <td class="formValue"> <input id="Amount" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> <input id="AmountUnit" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">單價</td> <td class="formValue"> <input id="Price" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">生產廠家</td> <td class="formValue"> <input id="RefSupplierId" type="hidden" /> <input id="SupplierName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">主要用途</td> <td class="formValue" colspan="5"> <textarea id="Usage" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle" valign="top">性能指標</td> <td class="formValue" colspan="5"> <textarea id="Target" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle" valign="top">備注說明</td> <td class="formValue" colspan="5"> <textarea id="Remark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> </table> </div> </div> </div> </div> <div class="form-button" id="wizard-actions"> <a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a> <a id="btn_next" class="btn btn-default btn-next">下一步</a> <a id="btn_finish" disabled class="btn btn-info">完 成</a> <a id="btn_submit" disabled class="btn btn-primary">保存提交</a> <a id="btn_close" class="btn btn-default">關閉</a> </div> <script type="text/javascript"> var keyValue = request("keyValue"); $(function () { initialPage(); InitEquipmentInfo(); }); function initialPage() { //加載導向 $('#wizard').wizard().on('change', function (e, data) { var $finish = $("#btn_finish"); var $submit = $("#btn_submit"); var $next = $("#btn_next"); if (data.direction == "next") { if (data.step == 1) { var mEquipmentId = $("#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 () { var keyValue = $("#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==================================*/ function InitEquipmentInfo() { var selectedRowIndex = 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 () { var text = $(this).find('a').html(); var value = $(this).find('a').attr('data-value'); $("#queryCondition .dropdown-text").html(text).attr('data-value', value); }); //查詢事件 $("#btn_Search").click(function () { var queryJson = { condition: $("#queryCondition").find('.dropdown-text').attr('data-value'), keyword: $("#txt_Keyword").val() }; $gridTable.jqGrid('setGridParam', { postData: { queryJson: JSON.stringify(queryJson) }, page: 1 }).trigger('reloadGrid') }); //查詢回車 $('#txt_Keyword').bind('keypress', function (event) { if (event.keyCode == "13") { $('#btn_Search').trigger("click"); } }); } //按鈕操作（上一步、下一步、完成、關閉） function buttonOperation() { var $last = $("#btn_last"); var $next = $("#btn_next"); var btn_finish = $("#btn_finish"); var btn_submit = $("#btn_submit"); var btn_close = $("#btn_close"); //完成提交保存 btn_close.click(function () { $.currentIframe().$("#gridTable").trigger("reloadGrid"); dialogClose(); }) //完成提交保存 btn_finish.click(function () { if (!$("#form1").Validform()) { return false; } var keyValue = $("#Id").val(); var postData = $("#form1").GetWebControls(keyValue); $.SaveForm({ url: "/EquipmentManage/FacilityPurchaseApply/SaveForm?keyValue=" + keyValue, param: postData, loading: "正在保存數據...", success: function () { $.currentIframe().$("#gridTable").trigger("reloadGrid"); dialogClose(); } }); }); //完成提交保存 btn_submit.click(function () { if (!$("#form1").Validform()) { return false; } var keyValue = $("#Id").val(); var postData = $("#form1").GetWebControls(keyValue); $.SaveForm({ url: "/EquipmentManage/FacilityPurchaseApply/SaveSubmit?keyValue=" + keyValue, param: postData, loading: "正在保存數據...", success: function () { $.currentIframe().$("#gridTable").trigger("reloadGrid"); dialogClose(); } }); }); } //保存表單; function AcceptClick(callBack) { if (!$("#form1").Validform()) { return false; } var postData = $("#form1").GetWebControls(keyValue); $.SaveForm({ url: "../../BusinessManage/StockBillInfo/SaveForm?keyValue=" + keyValue, param: postData, loading: "正在保存數據...", success: function () { if (callBack != undefined) { callBack(); } else { $.currentIframe().$("#gridTable").trigger("reloadGrid"); } } }); } </script>
6、新頁編輯頁面
屏幕分辨率有限，當普通編輯頁面及向導式編輯頁面都無法承載編輯信息內容時，或者說采用彈窗式頁面需要滾動的頁面，此時，應當采用新頁編輯頁面編輯內容。
頁面布局源碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>@ViewBag.Title</title> <!--框架必需start--> <script src="~/Content/scripts/jquery/jquery-2.0.3.min.js"></script> <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" /> <link href="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/jquery-ui/jquery-ui.min.js"></script> <!--框架必需end--> <!--bootstrap組件start--> <link href="~/Content/scripts/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/scripts/bootstrap/bootstrap.extension.css" rel="stylesheet" /> <script src="~/Content/scripts/bootstrap/bootstrap.min.js"></script> <!--bootstrap組件end--> <script src="~/Content/scripts/plugins/layout/jquery.layout.js"></script> <!--select2組件--> <link href="~/Content/scripts/plugins/select2/css/select2.css" rel="stylesheet" /> @*<script src="~/Content/scripts/plugins/select2/js/i18n/zh-CN.js"></script>*@ <script src="~/Content/scripts/plugins/select2/js/select2.min.js"></script> <!--文件上傳組件--> <link href="~/Content/styles/xlib-bill.css" rel="stylesheet" /> <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/css/fileinput.css" /> <link rel="stylesheet" href="~/Content/scripts/plugins/fileinput/themes/explorer/theme.css" type="text/css" media="all" /> <script src="~/Content/scripts/plugins/fileinput/js/plugins/sortable.min.js"></script> <script src="~/Content/scripts/plugins/fileinput/js/fileinput.min.js"></script> <script src="~/Content/scripts/plugins/fileinput/js/locales/zh.js"></script> <script src="~/Content/scripts/plugins/fileinput/themes/explorer/theme.js"></script> <link href="~/Content/styles/xlib-ckbox-radio.css" rel="stylesheet" /> <script src="~/Content/scripts/plugins/datepicker/WdatePicker.js"></script> @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") <style> html, body { height: 100%; width: 100%; } </style> </head> <body> @RenderBody() @Html.AntiForgeryToken() </body> </html>
示例頁面源碼
@{ ViewBag.Title = "表單頁面"; Layout = "~/Views/Shared/_BillIndex.cshtml"; } <div class="ui-layout" id="layout" style="height: 100%; width: 100%;"> <div class="ui-layout-center"> <div class="center-Panel" style="margin-left:10px"> <div class="titlePanel"> <div class="title-info"> <div class="title"> 采購申請審批 </div> </div> <div class="toolbar"> <div class="btn-group"> <a id="btnSubmit" class="btn btn-default" onclick="btn_Submit()"><i class="fa fa-upload"></i>保存提交</a> </div> <div class="btn-group"> <a id="btnCloseTab" class="btn btn-default" onclick="btn_CloseTab()"><i class="fa fa-refresh"></i> 退出</a> </div> </div> </div> <div class="billPanel" style="border-top: 1px solid #ccc; overflow-y:auto; "> <div class="bill-box" style="margin:10px;padding: 0px;"> <form id="form1" name="form1" class="form-horizontal form-table-bordered" enctype="multipart/form-data"> <table class="form border1"> <tr> <td class="formTitle">審批結果<font face="宋體">*</font></td> <td class="formValue"> <input id="ApprovalResult" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">審批人<font face="宋體">*</font></td> <td class="formValue"> <input id="ApprovalBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">審批日期<font face="宋體">*</font></td> <td class="formValue"> <input id="ApprovalOn" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" value="@DateTime.Today.ToString("yyyy-MM-dd")" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">審批意見</td> <td class="formValue" colspan="5"> <textarea id="ApprovalRemark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> </table> <div class="title-info"> <div class="title" style="width:100%;background-color:#3598dc;height:32px;line-height:32px;font-size:14px;color:#ffffff;margin-top:5px;"> <i class='fa fa-gift'>采購申請審核</i> </div> </div> <table class="form border1" id="auditInfo"> <tr> <td class="formTitle">審核結果<font face="宋體">*</font></td> <td class="formValue"> <input id="AuditResult" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">審核人<font face="宋體">*</font></td> <td class="formValue"> <input id="AuditBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">審核日期<font face="宋體">*</font></td> <td class="formValue"> <input id="AuditOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">審核意見</td> <td class="formValue" colspan="5"> <textarea id="AuditRemark" class="form-control" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> </table> <div class="title-info"> <div class="title" style="width:100%;background-color:#3598dc;height:32px;line-height:32px;font-size:14px;color:#ffffff;margin-top:5px;"> <i class='fa fa-gift'>采購申請信息</i> </div> </div> <table class="form border1" id="applyInfo"> <tr> <td class="formTitle">申請編號<font face="宋體">*</font></td> <td class="formValue"> <input id="Id" type="hidden" /> <input id="ApplyCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">申請人<font face="宋體">*</font></td> <td class="formValue"> <input id="OperatorBy" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">申請日期<font face="宋體">*</font></td> <td class="formValue"> <input id="OperatorOn" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">設備編號<font face="宋體">*</font></td> <td class="formValue"> <input type="hidden" id="RefEquipmentId" /> <input id="EquipmentCode" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">名稱<font face="宋體">*</font></td> <td class="formValue"> <input id="EquipmentName" type="text" class="form-control" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> <td class="formTitle">類型<font face="宋體">*</font></td> <td class="formValue"> <input id="EquipmentType" type="text" class="form-control" length="50" value="" isvalid="yes" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">規格型號</td> <td class="formValue"> <input id="EquipmentSpec" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">量程</td> <td class="formValue"> <input id="MeasurementRange" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">精度</td> <td class="formValue"> <input id="MeasurementAccuracy" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle">數量</td> <td class="formValue"> <input id="Amount" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="yes" checkexpession='["NotNull"]' /> <input id="AmountUnit" type="text" class="form-control" style="float:left; width:50%" length="255" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">單價</td> <td class="formValue"> <input id="Price" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> <td class="formTitle">生產廠家</td> <td class="formValue"> <input id="RefSupplierId" type="hidden" /> <input id="SupplierName" type="text" class="form-control" length="50" value="" isvalid="no" checkexpession='["NotNull"]' /> </td> </tr> <tr> <td class="formTitle" valign="top">主要用途</td> <td class="formValue" colspan="5"> <textarea id="Usage" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle" valign="top">性能指標</td> <td class="formValue" colspan="5"> <textarea id="Target" type="text" class="form-control" length="500" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> <tr> <td class="formTitle" valign="top">備注說明</td> <td class="formValue" colspan="5"> <textarea id="Remark" class="form-control" style="height:100px;" value="" isvalid="yes" checkexpession='["LenStrOrNull"]'></textarea> </td> </tr> </table> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> var keyValue = request('keyValue'); var tabiframeId = request('tabiframeId'); $(function () { $("#applyInfo .form-control").attr("disabled", "disabled"); initialPage(); GetGrid(); }); function initialPage() { var layout = $('#layout').layout({ applyDemoStyles: true, west__size: 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 { } } //打印 function btn_Finality() { var keyValue = $("#Id").val(); var queryJson = { 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)) }); } //保存 function btn_Save() { if (!$("#form1").Validform()) { return false; } var keyValue = $("#Id").val(); var postData = $("#form1").GetWebControls(); $.SaveForm({ url: "/EquipmentManage/FacilityPurchaseApply/AuditSubmit?keyValue=" + keyValue, param: postData, loading: "正在保存數據...", success: function (result) { if (tabiframeId != "") top.frames[tabiframeId].$("#gridTable").trigger("reloadGrid"); } }); } //保存並提交 function btn_Submit() { if (!$("#form1").Validform()) { return false; } var keyValue = $("#Id").val(); var postData = $("#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(); } }); } function btn_CloseTab() { top.tablist.closeTab(window.location.pathname + window.location.search); } </script>
至此Web前端頁面介紹完畢，記錄於此，便於后續自己開發及分享給大家！