MVC表单
ASPX页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MvcDemo.aspx.cs" Inherits="OThinker.H3.Portal.Sheets.H3_XSX_1.MvcDemo" EnableEventValidation="false" MasterPageFile="~/MvcSheet.master" %> <%@ OutputCache Duration="999999" VaryByParam="T" VaryByCustom="browser" %> <asp:Content ID="head" ContentPlaceHolderID="headContent" runat="Server"> <script type="text/javascript"> /* 全局可访问的对象:$.MvcSheetUI.SheetInfo,该属性是后台传递到前端的所有信息,但是需要在 $.MvcSheet.Loaded 方法中使用 例如: $.MvcSheetUI.SheetInfo.ActivityCode 当前活动编码 $.MvcSheetUI.SheetInfo. 获取MvcSheetDemo' target='_blank'>MVC表单控件的实例:$("#控件ID").SheetUIManager() */ // 增加自定义工具栏按钮方法,触发后台事件 $.MvcSheet.AddAction({ Action: "TestAction", // 执行后台方法名称 Icon: "fa-print", // 按钮图标 Text: "后台事件", // 按钮名称 Datas: ["{selectUser}"], // 参数,多个参数 "{Param1}","Param2"... //OnAction: function () { /* 自定义按钮执行事件,如果为 null 则调用$.MvcSheet.Action 执行后台方法 如果不为 null,那么会执行这里的方法,需要自己Post到后台或写前端逻辑 */ //}, OnActionDone: function (e) { // 后台方法调用完成后触发 // 以下是将后台的值输出到前端控件中 if (e) { $.MvcSheetUI.SetControlValue("code", e.Code); $.MvcSheetUI.SetControlValue("mvcName", e.Name); } }, PostSheetInfo: true // 是否提交表单数据,如果 false,那么不返回表单的数据 }); // 增加自定义工具栏按钮方法,触发前台事件 $.MvcSheet.AddAction({ Action: "TestScript", // 按钮名称 Icon: "fa-print", // 按钮图标 Text: "前端事件", // 按钮名称 Datas: ["{selectUser}"], // 参数,多个参数 "{Param1}","Param2"... OnAction: function () { alert("这里执行前端事件"); }, OnActionDone: function (e) { // 事件执行完成 }, PostSheetInfo: true // 是否提交表单数据,如果 false,那么不返回表单的数据 }); // 所有工具栏按钮完成事件 $.MvcSheet.ActionDone = function (data) { // this.Action; // 获取当前按钮名称 } // 保存前事件 $.MvcSheet.SaveAction.OnActionPreDo = function () { // this.Action // 获取当前按钮名称 alert(this.Action); } // 保存后事件,保存是异步的,可能比回调函数快 $.MvcSheet.SaveAction.OnActionDone = function () { //this 当前SaveAction var mvcNum = $.MvcSheetUI.GetSheetDataItem("mvcNum"); //读取后台数据项对象,L:数据项类型,V:数据项的值,O:数据项的权限,N:数据项名称,RowNum:主表中为0,子表中表示行号 if (mvcNum && (mvcNum.L == $.MvcSheetUI.LogicType.Int || mvcNum.L == $.MvcSheetUI.LogicType.Double || mvcNum.L == $.MvcSheetUI.LogicType.Long)) { if (mvcNum.V > 100) { } } } // 表单验证接口 $.MvcSheet.Validate = function () { // this.Action 表示当前操作的按钮名称 var nameText = $.MvcSheetUI.GetControlValue("mvcName"); // 根据数据项编码获取页面控件的值 // 填写申请单环节,设置 mvcName 必填 if ($.MvcSheetUI.SheetInfo.ActivityCode == "Apply") { if (this.Action == "Submit") { if (!nameText) { $.MvcSheetUI.GetElement("mvcName").focus(); alert("请填写名称."); return false; } } } return true; } // 页面初始化事件,该事件在获取MvcSheetDemo' target='_blank'>MVC表单数据,并且在控件初始化之前执行 $.MvcSheet.PreInit = function () { // 将提交按钮文字改为通过 if ($.MvcSheetUI.SheetInfo.ActivityCode == "Approve" || $.MvcSheetUI.SheetInfo.IsOriginateMode) { $.MvcSheet.SubmitAction.Text = "通过"; } }; // 页面加载完成事件 $.MvcSheet.Loaded = function (sheetInfo) { // 获取选人控件 // arguments[0] 该参数包含MvcSheetDemo' target='_blank'>MVC表单后台传递到前端的所有信息 /* MVC控件实例,通过 SheetUIManager() 方法获取,例如获取 txtCode 所对应的MvcSheetUI实例 */ var txtCode = $("#txtCode").SheetUIManager(); // 可以调用所有 SheetTextBox 提供的接口方法,例如 txtCode.GetValue(); // 自定义按钮调用后台方法示例 $("#btnClick").click(function () { // 执行后台事件 $.MvcSheet.Action( { Action: "TestAction", // 后台方法名称 Datas: ["输入参数"], // 输入参数,格式 ["{数据项名称}","String值","控件ID"],当包含数据项名称时 LoadControlValue必须为true LoadControlValue: true, // 是否获取表单数据 PostSheetInfo: false, // 是否获取已经改变的表单数据 OnActionDone: function (e) { // 执行完成后回调事件 $.MvcSheetUI.SetControlValue("code", e.Code); $.MvcSheetUI.SetControlValue("mvcName", e.Name); } } ) }); } // 子表行保存事件,row当前保存所在的行, val保存的结果数据 var gridSaving = function (row, val) { if (val && val.code) { val.code += row.attr("data-row"); } return val; }; // 子表行添加事件,row当前添加的行, val加载的数据对象 function gridAddRow(row, val) { if (val) { var code = val.DataItems["mvcDetail.code"].V; row.find("input[data-datafield='mvcDetail.Spec']").val(code + "规格"); } } </script> </asp:Content> <asp:Content ID="menu" ContentPlaceHolderID="cphMenu" runat="Server"> </asp:Content> <asp:Content ID="master" ContentPlaceHolderID="masterContent" runat="Server"> <div style="text-align: center;" class="DragContainer"> <label id="lblTitle" class="panel-title">MvcDemo</label> </div> <div class="panel-body"> <div class="nav-icon fa fa-chevron-right bannerTitle"> <label id="divBasicInfo">基本信息</label> </div> <div class="divContent"> <div class="row"> <div id="divFullNameTitle" class="col-md-2"> <label id="lblFullNameTitle" data-type="SheetLabel" data-datafield="Originator.UserName" data-bindtype="OnlyVisiable">发起人</label> </div> <div id="divFullName" class="col-md-4"> <label id="lblFullName" data-type="SheetLabel" data-datafield="Originator.UserName" data-bindtype="OnlyData"></label> </div> <div id="divOriginateDateTitle" class="col-md-2"> <label id="lblOriginateDateTitle" data-type="SheetLabel" data-datafield="OriginateDate" data-bindtype="OnlyVisiable">发起时间</label> </div> <div id="divOriginateDate" class="col-md-4"> <label id="lblOriginateDate" data-type="SheetLabel" data-datafield="OriginateDate" data-bindtype="OnlyData"></label> </div> </div> <div class="row"> <div id="divOriginateOUNameTitle" class="col-md-2"> <label id="lblOriginateOUNameTitle" data-type="SheetLabel" data-datafield="Originator.OUName" data-bindtype="OnlyVisiable">所属组织</label> </div> <div id="divOriginateOUName" class="col-md-4"> <label id="lblOriginateOUName" data-type="SheetLabel" data-datafield="Originator.OUName" data-bindtype="OnlyData"></label> </div> <div id="divSequenceNoTitle" class="col-md-2"> <label id="lblSequenceNoTitle" data-type="SheetLabel" data-datafield="SequenceNo" data-bindtype="OnlyVisiable">流水号</label> </div> <div id="divSequenceNo" class="col-md-4"> <label id="lblSequenceNo" data-type="SheetLabel" data-datafield="SequenceNo" data-bindtype="OnlyData"></label> </div> </div> </div> <div class="nav-icon fa fa-chevron-right bannerTitle"> <label id="divSheetInfo">表单信息</label> </div> <div id="ctl00_BodyContent_divSheet" class="divContent"> <div class="row"> <div id="title1" class="col-md-2"> <span id="Label11" data-type="SheetLabel" data-datafield="code">编码</span> </div> <div id="control1" class="col-md-4"> <input id="txtCode" type="text" data-datafield="code" data-type="SheetTextBox"> <asp:Button ID="txtButton" runat="server" Text="测试按钮" OnClick="txtButton_Click" /> <input type="button" id="btnClick" value="前端调用后台方法" /> </div> <div id="title2" class="col-md-2"> <span id="Label12" data-type="SheetLabel" data-datafield="mvcName">名称</span> </div> <div id="control2" class="col-md-4"> <input id="txtName" type="text" data-datafield="mvcName" data-type="SheetTextBox"> </div> </div> <div class="row"> <div id="title3" class="col-md-2"> <span id="Label13" data-type="SheetLabel" data-datafield="radio">单选</span> </div> <div id="control3" class="col-md-4"> <div data-datafield="radio" data-type="SheetRadioButtonList" id="ctl414631" class="" data-defaultitems="A;B;C;其他"></div> </div> <div id="title4" class="col-md-2"> <span id="Label14" data-type="SheetLabel" data-datafield="mvcOther" data-displayrule="{radio}=='其他'">其他</span> </div> <div id="control4" class="col-md-4"> <input id="Control14" type="text" data-datafield="mvcOther" data-type="SheetTextBox" class="" data-displayrule="{radio}=='其他'" data-vaildationrule="{radio}=='其他'"> </div> </div> <div class="row"> <div id="title5" class="col-md-2"> <span id="Label15" data-type="SheetLabel" data-datafield="multiCheck">多选</span> </div> <div id="control5" class="col-md-4"> <div data-datafield="multiCheck" data-type="SheetCheckboxList" id="ctl732795" class="" data-defaultitems="A;B;C"></div> </div> <div id="title6" class="col-md-2"> <span id="Label16" data-type="SheetLabel" data-datafield="mvcTime">日期</span> </div> <div id="control6" class="col-md-4"> <input id="Control16" type="text" data-datafield="mvcTime" data-type="SheetTime"> </div> </div> <div class="row"> <div id="title7" class="col-md-2"> <span id="Label17" data-type="SheetLabel" data-datafield="mvcMobile">电话</span> </div> <div id="control7" class="col-md-4"> <input id="Control17" type="text" data-datafield="mvcMobile" data-type="SheetTextBox" class="" data-regularexpression="/^1[3|4|5|8][0-9]{9}$/" data-regularinvalidtext="请输入一个有效的手机号码."> </div> <div id="title8" class="col-md-2"> <span id="Label18" data-type="SheetLabel" data-datafield="dropList">下拉框</span> </div> <div id="control8" class="col-md-4"> <select data-datafield="dropList" data-type="SheetDropDownList" id="ctl352297" class="" data-defaultitems="A;B;C;D"> </select> </div> </div> <div class="row"> <div id="title11" class="col-md-2"> <span id="Label20" data-type="SheetLabel" data-datafield="selectUser">选人</span> </div> <div id="Div1" class="col-md-4"> <div id="Control20" data-datafield="selectUser" data-type="SheetUser" data-defaultvalue="{Originator}" data-mappingcontrols="Email:Email,Dept:FullName"> </div> </div> <div id="title12" class="col-md-2"> <span id="Label21" data-type="SheetLabel" data-datafield="mulitUser">多人</span> </div> <div id="Div2" class="col-md-4"> <div id="Control21" data-datafield="mulitUser" data-type="SheetUser"></div> </div> </div> <div class="row"> <div id="Div5" class="col-md-2"> <span id="Span1" data-type="SheetLabel" data-datafield="Email">邮箱</span> </div> <div id="Div6" class="col-md-4"> <input id="Text3" type="text" data-datafield="Email" data-type="SheetTextBox"> </div> <div id="Div7" class="col-md-2"> <span id="Span2" data-type="SheetLabel" data-datafield="Dept">所属组织</span> </div> <div id="Div8" class="col-md-4"> <input id="Text4" type="text" data-datafield="Dept" data-type="SheetTextBox"> </div> </div> <div class="row"> <div id="title13" class="col-md-2"> <span id="Label22" data-type="SheetLabel" data-datafield="mvcNum">子表小计</span> </div> <div id="control13" class="col-md-4"> <input id="Control22" type="text" data-datafield="mvcNum" data-type="SheetTextBox" class="" data-computationrule="SUM({mvcDetail.mvcCount})" /> </div> <div id="space14" class="col-md-2"> <span id="Span3" data-type="SheetLabel" data-datafield="InvoiceCount">有发票金额</span> </div> <div id="spaceControl14" class="col-md-4"> <input id="Text5" type="text" data-datafield="InvoiceCount" data-type="SheetTextBox" class="" data-computationrule="SUM({mvcDetail.mvcCount},if('{mvcDetail.Invoice}'=='有')return {mvcDetail.mvcCount};else return 0;)" /> </div> </div> <div class="row"> <div id="title17" class="col-md-2"> <span id="Label24" data-type="SheetLabel" data-datafield="mvcDetail">子表</span> </div> <div id="Div3" class="col-md-10"> <table id="gridDemo" data-datafield="mvcDetail" data-onadded="gridAddRow(arguments[0],arguments[1]);" data-oneditorsaving="gridSaving(arguments[0],arguments[1]);" data-type="SheetGridView" class="SheetGridView"> <tbody> <tr class="header"> <td id="Control24_SerialNo" class="rowSerialNo" rowspan="2">序号</td> <td id="Control24_Header3" data-datafield="mvcDetail.code"> <label id="Control24_Label3" data-datafield="mvcDetail.code" data-type="SheetLabel">编码</label> </td> <td id="Td2" data-datafield="mvcDetail.Invoice"> <label id="Label3" data-datafield="mvcDetail.Invoice" data-type="SheetLabel">发票</label> </td> <td id="Control24_Header4" data-datafield="mvcDetail.mvcNum" rowspan="2"> <label id="Control24_Label4" data-datafield="mvcDetail.mvcNum" data-type="SheetLabel">数量</label> </td> <td id="Control24_Header5" data-datafield="mvcDetail.mvcPrice" rowspan="2"> <label id="Control24_Label5" data-datafield="mvcDetail.mvcPrice" data-type="SheetLabel">单价</label> </td> <td id="Control24_Header6" data-datafield="mvcDetail.mvcCount" rowspan="2"> <label id="Control24_Label6" data-datafield="mvcDetail.mvcCount" data-type="SheetLabel">小计</label> </td> <td class="rowOption" rowspan="2">删除</td> </tr> <tr class="header"> <td id="Td3" data-datafield="mvcDetail.Spec"> <label id="Label2" data-datafield="mvcDetail.Spec" data-type="SheetLabel">规格</label> </td> <td id="Td1" data-datafield="mvcDetail.DetailName"> <label id="Label1" data-datafield="mvcDetail.DetailName" data-type="SheetLabel">名称</label> </td> </tr> <tr class="template"> <td id="Control24_Option" class="rowOption" rowspan="2"></td> <td data-datafield="mvcDetail.code"> <input id="Control24_ctl3" type="text" data-datafield="mvcDetail.code" data-type="SheetTextBox"> </td> <td id="Td4" data-datafield="mvcDetail.Invoice"> <select data-datafield="mvcDetail.Invoice" data-type="SheetDropDownList" id="ctl317318" class="" data-defaultitems="有;无"></select> </td> <td data-datafield="mvcDetail.mvcNum" rowspan="2"> <input id="Control24_ctl4" type="text" data-datafield="mvcDetail.mvcNum" data-type="SheetTextBox"> </td> <td data-datafield="mvcDetail.mvcPrice" rowspan="2"> <input id="Control24_ctl5" type="text" data-datafield="mvcDetail.mvcPrice" data-type="SheetTextBox"> </td> <td data-datafield="mvcDetail.mvcCount" rowspan="2"> <input id="Control24_ctl6" type="text" data-datafield="mvcDetail.mvcCount" data-type="SheetTextBox" class="" data-computationrule="{mvcDetail.mvcNum}*{mvcDetail.mvcPrice}"> </td> <td class="rowOption" rowspan="2"> <a class="delete"> <div class="fa fa-minus"> </div> </a> <a class="insert"> <div class="fa fa-arrow-down"> </div> </a> </td> </tr> <tr class="template"> <td data-datafield="mvcDetail.Spec"> <input id="Text2" type="text" data-datafield="mvcDetail.Spec" data-type="SheetTextBox"> </td> <td data-datafield="mvcDetail.DetailName"> <input id="Text1" type="text" data-datafield="mvcDetail.DetailName" data-type="SheetTextBox"> </td> </tr> <tr class="footer"> <td class="rowOption"></td> <td data-datafield="mvcDetail.code"></td> <td data-datafield="mvcDetail.DetailName"></td> <td data-datafield="mvcDetail.mvcNum"> <label id="Control24_stat4" data-datafield="mvcDetail.mvcNum" data-type="SheetCountLabel"></label> </td> <td data-datafield="mvcDetail.mvcPrice"> <label id="Control24_stat5" data-datafield="mvcDetail.mvcPrice" data-type="SheetCountLabel" class="" data-stattype="NONE"></label> </td> <td data-datafield="mvcDetail.mvcCount"> <label id="Control24_stat6" data-datafield="mvcDetail.mvcCount" data-type="SheetCountLabel"></label> </td> <td class="rowOption"></td> </tr> </tbody> </table> </div> </div> <div class="row"> <div id="title9" class="col-md-2"> <span id="Label19" data-type="SheetLabel" data-datafield="mvcAttachment">附件</span> </div> <div id="control9" class="col-md-10"> <div id="Control19" data-datafield="mvcAttachment" data-type="SheetAttachment"></div> </div> </div> <div class="row"> <div id="title15" class="col-md-2"> <span id="Label23" data-type="SheetLabel" data-datafield="mvcHtml">Html</span> </div> <div id="control15" class="col-md-10"> <textarea id="Control23" data-datafield="mvcHtml" data-richtextbox="true" data-type="SheetRichTextBox"></textarea> </div> </div> <div class="row"> <div id="title19" class="col-md-2"> <span id="Label25" data-type="SheetLabel" data-datafield="mvcComment">审批意见</span> </div> <div id="Div4" class="col-md-10"> <div id="Control25" data-datafield="mvcComment" data-type="SheetComment"></div> </div> </div> </div> </div> </asp:Content> |