页面表单提交保存事件
网站管理后台的页面表单提交保存事件文档
一、网站管理后台的页面表单提交保存的功能主要包括四个步骤：
1、页面代码中引用网站系统基础css和js文件，支持组件呈现效果的/res/c/m.css样式文件，支持组件功能处理的/res/j/m.js。如果页面上需要支持图文并茂发布组件功能，还需要引用/res/c/uploadifive.css样式文件和/res/j/jquery.uploadifive.js脚本文件的支持。
2、通过在页面上组织一个表单，表单中包含多个数据发布型组件、提交按钮。
3、在页面中定义该表单的保存事件信息。
4、在页面中设置保存操作的功能事件参数，对应所定义的保存事件信息，完成表单数据提交保存的功能。
二、在页面上组织表单操作实例：
1、定义文章发布页的表单项实例，六个表单项：使用<select>定义文章分类选项，单行文本发布组件定义文章标题，封面图设置组件定义封面图片，多行文本发布组件定义文章摘要填写项，图文并茂发布组件定义文章内容详情项，<select>定义文章状态选项。放置“添加”和“修改”的提交操作按钮，按钮css样式类名称为actbtn，该按钮的点击事件onclick触发调用保存操作处理sysevent(e)。
2、六个表单项定义的实例为：
(1)、定义文章分类选项，获取文章分类数据表信息加载分类选项：
<div class="orow cf opmst1" id="my_news_typeid"><div class="ocoll optip">所属分类：</div><div class="ocolr">
<select id="news_typeid" class="opselect" size="1"><option value="">选择分类</option>
[data=news_class_list][0][get][col=nc_id][col=nc_name][/get][where][col=nc_isdel][way]=[/way][val]0[/val][/col][/where][orderby][col=nc_sort=asc][/orderby][/0]
[row]<option value="$nc_id$" [if={$nc_id$}={$newsinfo.news_typeid$}=int]selected[/if]>$nc_name$</option>[/row]
[/data]</select></div></div>
(2)、定义文章标题：
[sys.text #news_title @文章标题 maxlen=100 must=1]$bind.newsinfo.news_title$[/sys.text]
(3)、定义封面图片：
[sys.faceimg #news_faceurl @封面图片 {请上传一张图片进行设置封面图} must=1 width=686 height=320 ]$bind.newsinfo.news_faceurl$[/sys.faceimg]
(4)、定义文章摘要填写项：
[sys.textbox #news_des @文章摘要 {填写文章总体概述摘要信息，最多200字} maxlen=200 must=1]$bind.newsinfo.news_des$[/sys.textbox]
(5)、定义文章内容详情项：
[sys.textpicbox #news_con @内容详情 {请编辑内容详情} must=1 ]$bind.newsinfo.news_con$[/sys.textpicbox]
(6)、定义文章状态选项：
<div class="orow cf"><div class="ocoll">前台显示：</div><div class="ocolr">
<select id="news_flag" class="opselect" size="1">
<option value="1" [if={$newsinfo.news_flag$}={1}=int]selected[/if]>允许显示</option>
<option value="0" [if={$newsinfo.news_flag$}={0}=int]selected[/if]>禁止显示</option>
</select></div></div>
3、提交按钮的编写实例，实例中处理了当前如果是修改文章时，则加载修改按钮，否则加载添加按钮；通过[doshow...]...[/doshow]处理了管理人员的操作功能权限：
<div class="oact">
[if={$req.eid$}={0}=int][doshow=13001=i]<a href="javascript:void(0);" class="actbtn" data-event="setaddnews">添 加</a>[/doshow][/if]
[if={$req.eid$}d{0}=int][doshow=13001=u]<a href="javascript:void(0);" class="actbtn" data-event="seteditnews">修 改</a>[/doshow][/if]
</div>
4、核心项，引擎要求表单提交事件中必须放置的5个隐藏域项：
<input type="hidden" id="k1" value="[k1]" />
<input type="hidden" id="k2" value="[k2]" />
<input type="hidden" id="kt" value="[kt]" />
<input type="hidden" id="eid" value="$req.eid$" />
<input type="hidden" id="pageloadwinsn" value="[pageloadwinsn]" />
5、一个完整的定义组织表单的实例写法：
<div class="obox obox_act_fix">
<div class="orow cf opmst1" id="my_news_typeid"><div class="ocoll optip">所属分类：</div><div class="ocolr">
<select id="news_typeid" class="opselect" size="1"><option value="">选择分类</option>
[data=news_class_list][0][get][col=nc_id][col=nc_name][/get][where][col=nc_isdel][way]=[/way][val]0[/val][/col][/where][orderby][col=nc_sort=asc][/orderby][/0]
[row]<option value="$nc_id$" [if={$nc_id$}={$newsinfo.news_typeid$}=int]selected[/if]>$nc_name$</option>[/row]
[/data]</select></div></div>
[sys.text #news_title @文章标题 maxlen=100 must=1]$bind.newsinfo.news_title$[/sys.text]
[sys.faceimg #news_faceurl @封面图片 {请上传一张图片进行设置封面图} must=1 width=686 height=320 ]$bind.newsinfo.news_faceurl$[/sys.faceimg]
[sys.textbox #news_des @文章摘要 {填写文章总体概述摘要信息，最多200字} maxlen=200 must=1]$bind.newsinfo.news_des$[/sys.textbox]
[sys.textpicbox #news_con @内容详情 {请编辑内容详情} must=1 ]$bind.newsinfo.news_con$[/sys.textpicbox]
<div class="orow cf"><div class="ocoll">前台显示：</div><div class="ocolr">
<select id="news_flag" class="opselect" size="1">
<option value="1" [if={$newsinfo.news_flag$}={1}=int]selected[/if]>允许显示</option>
<option value="0" [if={$newsinfo.news_flag$}={0}=int]selected[/if]>禁止显示</option>
</select></div></div>
<div class="oact">
[if={$req.eid$}={0}=int][doshow=13001=i]<a href="javascript:void(0);" class="actbtn" data-event="setaddnews">添 加</a>[/doshow][/if]
[if={$req.eid$}d{0}=int][doshow=13001=u]<a href="javascript:void(0);" class="actbtn" data-event="seteditnews">修 改</a>[/doshow][/if]
</div>
</div>
<input type="hidden" id="k1" value="[k1]" />
<input type="hidden" id="k2" value="[k2]" />
<input type="hidden" id="kt" value="[kt]" />
<input type="hidden" id="eid" value="$req.eid$" />
<input type="hidden" id="pageloadwinsn" value="[pageloadwinsn]" />
6、一个完整的定义组织表单的实例写法的图解：
7、一个完整的定义组织表单的实例写法的的页面呈现效果图：
三、在页面中定义表单提交保存事件信息：
1、网站系统后台页面操作功能事件讲解：
(1).定义表单提交保存事件区域：[event=自定义事件的名称,本页面中不可重复]....[/event]。事件的名称只支持英文字母、数字、下划线。
(2).定义权限控制信息： [role=页面功能权限代码标记=权限具体功能操作标记]。比如：[role=10003=u]，使用10003表示文章信息权限项、使用u表示文章修改操作权限。
(3).定义表单提交保存事件的执行区域：[action=保存数据的数据表名称=执行方式add或update]..区域内定义需要操作的数据字段信息....h]/action]。数据表名称只支持英文字母、数字、下划线。执行方式可选择一种，add表示添加新数据，update表示修改更新数据。此处表单为add方式。
(3.1).事件的执行区域[action...]...[/action]内，可定义一个[dbn=对接名称]，用于当需要在本站中扩展处理其他MS SQL Server数据库的数据时，可定义非本站的数据库链接的对接名称。不需要时，此部分可去掉。具体操作详情，请参考【单条或多条数据查询组件文档】中的[dbn=...]定义部分。
(3.2).事件的执行区域[action...]...[/action]内，定义需要操作的数据字段信息，使用[cols]....[/cols]界定字段信息区域。其中每个字段的信息定义，请用[col=字段名]....[/col]。
(3.3).字段信息定义中可以使用 [must]定义必填的提示信息[/must]，设定为必填项，如果不需要必填，去掉must项即可。
(3.4).字段信息定义中，字段值来自对应提交的数据内容，赋值请使用字段信息定义中的[val]$e.表单项的id属性值$[/val]，表单项的id属性值，也就是具体某一个发布型组件的id信息，将通过该id获取填写提交的内容。
(3.5).字段信息定义中，如果需要验证判断该字段的值是否已存在，请在字段信息定义中加入[same]已存在的提示语[/same]，比如：[same]该分类名称已存在了！[/same]。
如果需要验证该字段的值是否已存在，并且在验证条件中还需要排除当前正在修改的记录自己时，请在字段信息定义中加入：[same]已存在的提示语[/same][samenoeid=当前记录的唯一编号的字段名]设置当前记录的编号值[/samenoeid]，比如：修改文章分类时，分类名判断是否存在用“[same]该分类名称已存在！[/same][samenoeid=nc_id]$req.eid$[/samenoeid]”，nc_id为分类编号字段名，$req.eid$为当前正在修改的分类编号。
如果是修改二级分类的情况，还需要判断在同一个上级分类下是否已存在二级分类名称，请在字段信息定义中加入：[same=表示一个要追加入判断的字段名 此字段的定义必须一起存在于[cols]中]已存在的提示语[/same][samenoeid=当前记录的唯一编号的字段名]设置当前记录的编号值[/samenoeid]，比如：[same=nc_parent_id]该二级分类名称已存在[/same][samenoeid=nc_id]$req.eid$[/samenoeid]，nc_parent_id为本表中所属父级的编号的字段名，nc_id为当前修改的分类编号字段名，$req.eid$为当前正在修改的分类编号。
添加分类名称，提交保存时，判断名称是否存在：
[cols]
[col=nc_name][must]请填写分类名称[/must][val]$e.nc_name$[/val][same]该名称已存在了[/same][/col]
[/cols]
修改分类名称，提交保存时，判断名称是否存在：
[cols]
[col=nc_name][must]请填写分类名称[/must][val]$e.nc_name$[/val][same]该名称已存在[/same][samenoeid=nc_id]$req.eid$[/samenoeid][/col]
[/cols]
添加二级地区名称时，判断名称是否存在：
[cols]
[col=pid][val]$e.pid$[/val][/col]
[col=areaname][must]请填写地区名称[/must][val]$e.areaname$[/val][same=pid]该名称已存在了[/same][/col]
[/cols]
修改二级地区名称时，判断名称是否存在：
[cols]
[col=pid][val]$e.pid$[/val][/col]
[col=areaname][must]请填写地区名称[/must][val]$e.areaname$[/val][same=pid]该地区名称已存在[/same][samenoeid=id]$req.eid$[/samenoeid][/col]
[col=pinyin][must]请填写拼音[/must][val]$e.pinyin$[/val][same]该拼音已存在[/same][samenoeid=id]$req.eid$[/samenoeid][/col]
[/cols]
(4).一个完整的表单提交事件定义实例：
实例是在网站系统后台的文章发布页添加文章的提交功能。实例的事件名称定义为setaddnews，事件执行操作的数据表为news_list，操作的方式为add添加数据，操作的字段信息有文章标题news_title，文章分类编号news_typeid，文章封面图news_faceurl，文章摘要news_des，文章内容详情news_con，文章状态news_flag，文章发布者编号news_admin_id，文章发布者名称news_admin_name，文章发布时间news_addtime；这些数据表字段对应保存的数据，来自用户表单提交的各对应填写项内容，用$e.表单元素项id$方式获取其内容。其中，$e.news_des.noln$表示文章摘要内容会清除内容中的换行符处理，应用方式为：$e.表单参数项id.noln$，在“表单参数项id”之后追加一个.noln即可。
[event=setaddnews]
[role=13001=i]
[action=news_list=add]
[cols]
[col=news_title][must]请填写标题[/must][val]$e.news_title$[/val][/col]
[col=news_typeid][val]$e.news_typeid$[/val][/col]
[col=news_faceurl][val]$e.news_faceurl$[/val][/col]
[col=news_des][must]请填写摘要[/must][val]$e.news_des.noln$[/val][/col]
[col=news_con][must]请请编辑内容详情[/must][val]$e.news_con$[/val][/col]
[col=news_flag][val]$e.news_flag$[/val][/col]
[col=news_admin_id][val]@sys.adminid@[/val][/col]
[col=news_admin_name][val]@sys.adminname@[/val][/col]
[col=news_addtime][val]@sys.nowtime@[/val][/col]
[/cols]
[/action]
[/event]
(5).一个完整的表单提交事件定义实例的图解：
四、在页面中设置保存操作的功能事件参数，完成表单数据提交保存的功能：
1、在表单区域中放置提交按钮区域，在按钮自定义事件属性值中设定各自的功能事件data-event的名称，比如：“添加”按钮的设定功能事件名为setaddnews，此名称对应已定义的功能事件信息：
<div class="oact">
[if={$req.eid$}={0}=int][doshow=13001=i]<a href="javascript:void(0);" class="actbtn" data-event="setaddnews">添 加</a>[/doshow][/if]
[if={$req.eid$}d{0}=int][doshow=13001=u]<a href="javascript:void(0);" class="actbtn" data-event="seteditnews">修 改</a>[/doshow][/if]
</div>
[event=setaddnews]....[/event]
[event=seteditnews]....[/event]
2、在页面代码的javascript脚本中定义按钮的bind点击事件处理，其中调用的方法sysevent为系统提供的对接处理，可直接复制使用；其中，nullmsg 用于接收表单项中各个发布型组件的内容验证处理，vals 用于处理用户填写的内容组织。最后提交到网站处理保存数据完成。这些操作和写法都是系统已内置的，用户只需复制使用即可的。如果直接使用按钮区域相关的按钮class样式名称actbtn，和按钮事件属性名称及值的情况下，无需修改javascript脚本的代码部分，可直接使用有效。
<script type="text/javascript">
$(function () {
$(".actbtn").bind("click", function () {sysevent($(this).attr("data-event"));});
});
function sysevent(evt) {
var nullmsg = alertnullsyselecons();
if (nullmsg != "") {pageAlert(nullmsg, 0, 1500);return false;}
var vals = getsyselecons();
addorupdate("",evt,vals);
}
</script>
3、发布页的页面代码中，功能实现主要集中在定义处理功能事件[event...]信息上，功能事件操作牵涉网站系统数据表的定义问题，建议数据业务内容项尽量分解简化为佳，处理起来会更加便捷。填写完表单内容项后，点击提交按钮，提交操作成功或失败会有相应提示处理。
4、网站系统管理后台的完整表单提交保存事件的实例写法，请登录网站系统后台的“后台页面代码”处体验。
5、网站系统管理者如何快速创建一个信息发布页及表单项布局、提交功能处理呢？
建议参考演示或测试的网站系统管理后台的测试信息发布页的页面代码及功能代码，直接复制其页面代码来创建新的发布页，然后根据实际数据表情况进行调改使用。信息管理列表页同样可以这样快速创建完成。
五、更多页面表单提交保存事件的用法实战操作，请下载名扬银河数字官网系统后获得更好的实践代码与文档的查阅体验，下载网站系统请【名扬银行数字官网系统的最新版本】