通讯员队伍建设与网站新闻管理,如何选择昆明网站建设,深圳做响应式网站设计,wordpress网站数据目录
需求
效果视频演示
范例运行环境
准备数据源
数据表设计
UI及表结构Json配置
Json数据包提交配置
设计实现
前端UI
Javascript 脚本
Jquery引用
C# 服务端操作
小结 需求
在 Web 应用项目中#xff0c;实现一对多录入的数据管理功能是一项常见的应用。因此…
目录
需求
效果视频演示
范例运行环境
准备数据源
数据表设计
UI及表结构Json配置
Json数据包提交配置
设计实现
前端UI
Javascript 脚本
Jquery引用
C# 服务端操作
小结 需求
在 Web 应用项目中实现一对多录入的数据管理功能是一项常见的应用。因此可以实现一个相对轻量化的设计实现表格的录入为保证功能的可用性、界面友好性总体的需求如下
1、数据网格可以动态的添加行行可以提供输入框、选择框的控件进行录入。
2、数据网格可以删除选中的行。
3、数据网格可以上下移动选中的行重新进行排序。
4、可以实现数据的有效性验证功能如必填写、位数限制、类型限制等。
5、需要对输入的文字过滤和屏蔽HTML标记等危险内容。
6、添加新行前判断已有行的有效性对于未校验通过的暂不允许添加新行。
7、对于修改中的、保存时的、保存后的状态有一定的相关提示信息。
8、数据保存实现动态无刷新。
效果视频演示
为实现需求会使用到用C# 编写服务端Web 静态方法Jquery 实现 Ajax 无刷新技术并调用服务器方法Json 存储数据表格需要的配置客户端大部分设计使用 Javascript 实现。实现的效果演示视频如下 动态添加 HtmlTable 行并保存到数据库 范例运行环境
操作系统 Windows Server 2019 DataCenter
数据库Microsoft SQL Server 2016
.net版本 .netFramework4.0 或以上
开发工具及相关技术VS2019 C# 、Jquery 、Json、Javascript 准备数据源
数据表设计
我们在 MS SQL Server 创建 att_jypx教育培训经历表其结构如下表
序号字段名类型说明1ciduniqueidentifier行唯一标识唯一键2xmbhvarchar(20)外键父项指项目编号3sfzhnvarchar(18)外键父项指身份证号4nf1nvarchar(4)起始年份5yf1nvarchar(2)起始月份6nf2nvarchar(4)截止年份7yf2nvarchar(2)截止月份8xxmcnvarchar(100)学校名称9zynvarchar(50)所学专业10xlnvarchar(10)学历11byzlbnvarchar(50)毕业证类别12xhint排序号
执行如下 创建表的 SQL 语句
CREATE TABLE [dbo].[att_jypx]([cid] [uniqueidentifier] ROWGUIDCOL NOT NULL,[xmbh] [varchar](20) NOT NULL,[sfzh] [nvarchar](18) NOT NULL,[nf1] [nvarchar](4) NULL,[yf1] [nvarchar](2) NULL,[nf2] [nvarchar](4) NULL,[yf2] [nvarchar](2) NULL,[xxmc] [nvarchar](100) NULL,[zy] [nvarchar](50) NULL,[xl] [nvarchar](10) NULL,[byzlb] [nvarchar](50) NULL,[xh] [int] NULL,CONSTRAINT [PK_att_jypx] PRIMARY KEY CLUSTERED
([cid] ASC
)WITH (PAD_INDEX OFF, STATISTICS_NORECOMPUTE OFF, IGNORE_DUP_KEY OFF, ALLOW_ROW_LOCKS ON, ALLOW_PAGE_LOCKS ON) ON [PRIMARY]
) ON [PRIMARY]
GOALTER TABLE [dbo].[att_jypx] ADD CONSTRAINT [DF_att_jypx_cid] DEFAULT (newid()) FOR [cid]
GO
数据表的其它说明如下
1、CID字段为GUID类型可用于标识 HtmlTable 的 Row 行对象的 ID 并用于存储。
2、xmbh 字段和 sfzh 字段是引用的外键我们为了演示方便假设为 项目编号 为‘001’、身份证号为‘120102’
3、xh 为排序记录顺序所用。
以上的所述字段均不参与 HtmlTable 表格内容的呈现以降低数据包的容量只参与外键操作。
UI及表结构Json配置
对于 HtmlTable 表格内容的呈现、数据结构及数据验证的校验我们将使用Json文件进行配置配置说明如下
序号项类型说明1maxRowCount字符允许添加的最大行数2mtable_style字符主体编辑HtmlTable的风格3ttable_style字符标题HtmlTable的风格4cols数组列数组定义变量以下5到12均为 cols 所包含每一数组元素对象的属性5fname字符字段名6cname字符字段中文名或说明7 len数字字段长度8td_style字符HtmlTabelCell 单元格的风格9ctl_style字符单元格中输入或选择控件的风格10 input字符可输入 text 和 select分别对应输入框和选择框11 list字符用于select选择框的选项设置各选项间以 “|” 进行分隔12 check字符用于数据校验方案设置如果设置请参考我的文章《C# 结合 JavaScript 对 Web 控件进行数据输入验证》 完全的样例JSON如下 {att_jypx:[{maxRowCount:12,mtable_style:table-layout: fixed;word-break: break-all; word-wrap: break-word;font-size:10pt; width:700px; position:absolute;left:0px; border-color:rgb(235,235,235); border-width:1px 1px 1px 1px;border-collapse:collapse;,ttable_style:z-index:9999;position:fixed;left:0px;top:37px;table-layout: fixed;word-break: break-all; word-wrap: break-word;font-size:10pt; width:700px; background-color:rgb(235,235,235);border-color:rgb(235,235,235); border-width:1px 1px 1px 1px;border-collapse:collapse;,cols: [{fname: nf1,cname: 起始年份,len:4,td_style:width:75px,ctl_style:width:70px;border-radius:2px;border-width:1px;,input:text,list:,display:,check:notnull|mustlen4|int},{fname: yf1,cname: 起始月份,len:2,td_style:width:75px,ctl_style:width:70px;border-radius:2px;,input:select,list:01|02|03|04|05|06|07|08|09|10|11|12,check:notnull},{fname: nf2,cname: 截止年份,len:4,td_style:width:75px,ctl_style:width:70px;border-radius:2px;border-width:1px;,input:text,list:,display:,check:notnull|mustlen4|int},{fname: yf2,cname: 截止月份,len:2,td_style:width:75px,ctl_style:width:70px;border-radius:2px;,input:select,list:01|02|03|04|05|06|07|08|09|10|11|12,check:notnull},{fname: xxmc,cname: 所在院校,len:100,td_style:width:200px;,ctl_style:width:195px;border-radius:2px;border-width:1px;,input:text,list:,check:notnull|maxlen100},{fname: xl,cname: 学历,len:10,td_style:width:60px,ctl_style:width:55px;border-radius:2px;border-width:1px;,input:text,list:,check:notnull|maxlen10},{fname: zy,cname: 所学专业,len:50,td_style:width:80px,ctl_style:width:75px;border-radius:2px;border-width:1px;,input:text,list:,check:notnull|maxlen50},{fname: byzlb,cname: 毕业证类别,len:50,td_style:width:160px,ctl_style:width:155px;border-radius:2px;border-width:1px;,input:select,list:全日制普通高等教育毕业证|成人高等教育毕业证|高等教育自学考试毕业证|其他,check:notnull} ]}]
}
Json数据包提交配置
Json数据包根据Json配置信息通过服务端生成主要包括字段名的项用于将来提交数据时使用因为提交的数据方式仍然是Json数据对象即Json数据包生成的初始格式如下示例
{nf1:,
yf1:,
nf2:,
yf2:,
xxmc:,
zy:,
xmbh:001,
sfzh:120102,
xh:,
cid:,
com_name:jypx}
设计实现
前端UI
前端UI我们主要放置一些中间变量控件表格元素等主要元素说明见下表
序号元素Id类型说明1curidTextBox用于记录当前点行的ID2pjsonTextBox用于存储Json配置数据3djsonTextBox用于存储Json提交数据包4ttableHtmlTable标题列表格用于固定显示表头5mtableHtmlTable主编辑表格对象6topnavsDiv一组固定于顶端的工具栏对象层包括新增、删除、上移、下移、保存按钮
示例代码如下 form runatserver
asp:TextBox IDcid styledisplay:none runatserver/asp:TextBox
asp:TextBox IDcom_name styledisplay:none runatserver/asp:TextBox
asp:TextBox IDxmbh styledisplay:none runatserver/asp:TextBox
asp:TextBox IDsfzh styledisplay:none runatserver/asp:TextBox
asp:TextBox IDp_acode Runatserver Visibletrue styledisplay:none /asp:TextBox
asp:TextBox IDcurid Runatserver Visibletrue styledisplay:none /asp:TextBox
asp:TextBox IDpjson TextModeMultiLine Runatserver Visibletrue styledisplay:none /asp:TextBox
asp:TextBox IDdjson TextModeMultiLine Runatserver Visibletrue styledisplay:none /asp:TextBox
div idtopnavs runatserver style z-index:9999; border-bottom: 1px solid silver; padding:3px;display:flex;justify-content:start; background-color:rgb(235,235,235); position:fixed;top:0px;left:0px;width:100%;height:30px; text-align:center; line-height:30px;
input idclosebutton runatserver typebutton value style border-width:0px; background-position:center; background-image:url(/images/att_add6.jpg);font-size:14pt;cursor:pointer;width:25px;height:25px; onclickaddRow() class /
input idButton1 runatserver typebutton value style border-width:0px;background-position:center; background-image:url(/images/att_del.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px; onclickdelinfo() class /
input idButton2 runatserver typebutton value styleborder-width:0px; background-position:center; background-image:url(/images/att_up2.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px; onclickswarp(document.getElementById(curid).value,1); class /
input idButton3 runatserver typebutton value styleborder-width:0px; background-position:center; background-image:url(/images/att_down3.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px; onclickswarp(document.getElementById(curid).value,2); class /
input idButton4 runatserver typebutton value styleborder-width:0px; background-position:center; background-image:url(/images/att_save.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px; onclickif (validall() false) {document.getElementById(Button4).removeAttribute(disabled);return;}saveall();if(document.getElementById(mtable).rows.length0){ this.setAttribute(disabled,true);} class /
div idsaved stylemargin-left:10px; font-weight:bold; font-size:11pt; color:Red; /div
/div
table alignleft idttable runatserver stylez-index:9999;position:fixed;left:0px;top:37px;table-layout: fixed;word-break: break-all; word-wrap: break-word;font-size:10pt; width:700px; background-color:rgb(235,235,235);border-color:rgb(235,235,235); border-width:1px 1px 1px 1px;border-collapse:collapse; border1 cellspacing0 cellpadding3
/table
table alignleft idmtable runatserver styletable-layout: fixed;word-break: break-all; word-wrap: break-word;font-size:10pt; width:700px; position:absolute;left:0px;top:67px; border-color:rgb(235,235,235); border-width:1px 1px 1px 1px;border-collapse:collapse; border1 cellspacing0 cellpadding3
/table
/formJavascript 脚本
Javascript 脚本实现表格编辑操作及通过Ajax与服务器方法通信并保存数据的功能主要方法说明见下表
序号方法名称参数说明1simplecheck chkobj单元格对象 _chkvalue单元格编辑的值 allowAlert是否允许弹出提示 etip弹出提示的扩展前缀字串 本方法用于数据有效性的校验 2swarp mId当前行的ID stype:移动方向1上移2下移 用于对选中行的移动排序操作3chnRowSelColorrowobj当前行对象用于高亮显示选中行的颜色并同时将当前行设置为可编辑状态4tojsonstrstr:输入的值对输入的值进行安全检测并移除HTML标记对单引号双引号做特殊处理以保证JSON字符串传递的字符合法性5saveall保存所有行记录并提交数据库操作6delinfo删除当前选中的行并提交数据库操作7validallextip附加的前缀性提示保存前对所有行进行数据有效性校验8validchangeobj:当前编辑的控件元素提示用户当前正修改哪个控件元素的值9validsaveextip附加的前缀性提示用于检验是否正有保存的记录10addRow添加一个新行并提交到数据库操作11gGuid用于增加新行时生成一个GUID字符串12ScrollToBottom用于增加新行时自动滚动到页面底部
完整示例代码如下 script languagejavascriptfunction simplecheck(chkobj, _chkvalue, allowAlert,etip) {check_result true; check_errid ; check_errmsg ;var _checkSchema chkobj.getAttribute(checkSchema);var _cName chkobj.getAttribute(cName);if (_checkSchema.indexOf(ctrim) ! -1) { _chkvalue ctrim(_chkvalue); } var _objlength _chkvalue.length; if (_checkSchema.indexOf(abslen) ! -1) { _objlength PositionLen(_chkvalue); }var _schemaList _checkSchema.split(|); var _reqeustnotnull false;for (var k 0; k _schemaList.length; k) { if (_schemaList[k].toLowerCase() notnull) { _reqeustnotnull true; } }if ((!_reqeustnotnull) (_chkvalue )) { return check_result; }for (var j 0; j _schemaList.length; j) {var curSchema _schemaList[j].toLowerCase(); check_errid curSchema; var curErrmsg ; switch (true) { case curSchema notnull: check_result isNotNull(_chkvalue); curErrmsg _cName 需要填写内容; break; case curSchema number: check_result isNumber(_chkvalue); curErrmsg _cName 输入的数值不合理请核对; break; case curSchema bnumber: check_result isBNumber(_chkvalue); curErrmsg _cName 输入的数值应为0的正数请核对; break; case curSchema snumber: check_result isSNumber(_chkvalue); curErrmsg _cName 输入的数值应为0的负数请核对; break; case curSchema date: check_result isDate(_chkvalue, _cName); check_errid date; check_errmsg (check_result ? : _cName 输入的日期不合理请核对); curErrmsg ; break; case curSchema.indexOf(minlen) ! -1: var _slen parseInt(curSchema.substr(minlen.length, curSchema.length - minlen.length), 10); if (isNaN(_slen)) { check_result false; curErrmsg _cName 输入的最小位数参数不合理请与软件供应商联系; } else { check_result (_objlength _slen ? false : true); curErrmsg _cName 的内容要求最小输入 _slen 位请核对; } break; case curSchema.indexOf(maxlen) ! -1: var _slen parseInt(curSchema.substr(maxlen.length, curSchema.length - maxlen.length), 10); if (isNaN(_slen)) { check_result false; curErrmsg _cName 输入的最大位数参数不合理请与软件供应商联系; } else { check_result (_objlength _slen ? false : true); curErrmsg _cName 最大允许输入 _slen 位请核对; } break; case curSchema.indexOf(mustlen) ! -1: var _slen parseInt(curSchema.substr(mustlen.length, curSchema.length - mustlen.length), 10); if (isNaN(_slen)) { check_result false; curErrmsg _cName 输入的限制位数参数不合理请与软件供应商联系; } else { check_result (_objlength ! _slen ? false : true); curErrmsg _cName 的内容输入长度只能是 _slen 位请核对; } break; case curSchema time: check_result validRegs(_chkvalue, /^\d{1,2}:\d{1,2}:\d{1,2}$/); curErrmsg _cName 输入的时间不合理请核对。; break; case curSchema alpha: check_result isAlpha(_chkvalue); curErrmsg _cName 只能输入的数字、字母和下划线请核对。; break; case curSchema mail: check_result validRegs(_chkvalue, /^([a-zA-Z0-9._-])([a-zA-Z0-9_-])(\.[a-zA-Z0-9_-])/); curErrmsg _cName 输入的邮件地址不合理请核对。; break; case curSchema phone: check_result validRegs(_chkvalue, /([a-zA-Z0-9\.-\u4e00-\u9fa5]{8,})$/); curErrmsg _cName 输入的电话号码不合理请核对。; break; case curSchema mobile: check_result validRegs(_chkvalue, /^1(3[0-9]|5[012356789]|8[056789])\d{8}$/); curErrmsg _cName 输入的手机号码不合理请核对。; break; case curSchema money: check_result validRegs(_chkvalue, /^\d(\.\d)?$/); curErrmsg _cName 输入的内容不符合货币类型的要求请核对。; break; case curSchema zip: check_result validRegs(_chkvalue, /^[1-9]\d{5}$/); curErrmsg _cName 输入的邮政编码不合理请核对。; break; case curSchema int: check_result validRegs(_chkvalue, /^[-\]?\d$/); curErrmsg _cName 需要输入一个整数请核对。; break; case curSchema en: check_result validRegs(_chkvalue, /^[A-Za-z]$/); curErrmsg _cName 只能输入英文大小写字母请核对。; break; case curSchema cn: check_result validRegs(_chkvalue, /^[\u0391-\uFFE5]$/); curErrmsg _cName 只能输入中文请核对。; break; case curSchema url: check_result validRegs(_chkvalue, /([\w-]\.)[\w-](\/[\w- .\/?%]*)?/); curErrmsg _cName 输入的网址不合理请核对。; break; case curSchema idcard18: rv_result checkIdcard(_chkvalue); check_result (rv_result ? true : false); curErrmsg _cName rv_result; break; case curSchema idcard15: rv_result checkIdcard(_chkvalue); check_result (rv_result ? true : false); curErrmsg _cName rv_result; break; case curSchema idcard: rv_result checkIdcard(_chkvalue); check_result (rv_result ? true : false); curErrmsg _cName rv_result; break; } if (!check_result) {if (curErrmsg ! ) { check_errmsg etip curErrmsg; } if ((curErrmsg ! ) (allowAlert)) { document.getElementById(saved).innerHTML etip curErrmsg; alert(etip curErrmsg); return check_result; }}}return check_result;}function checkIdcard(idcard) {var _idcard idcard; var Errors new Array(, 身份证号码位数不对!, 身份证号码出生日期超出范围或含有非法字符!, 身份证号码校验错误!, 身份证地区非法!, );if (_idcard ) { return Errors[5]; }var area { 11: 北京, 12: 天津, 13: 河北, 14: 山西, 15: 内蒙古, 21: 辽宁, 22: 吉林, 23: 黑龙江, 31: 上海, 32: 江苏, 33: 浙江, 34: 安徽, 35: 福建, 36: 江西, 37: 山东, 41: 河南, 42: 湖北, 43: 湖南, 44: 广东, 45: 广西, 46: 海南, 50: 重庆, 51: 四川, 52: 贵州, 53: 云南, 54: 西藏, 61: 陕西, 62: 甘肃, 63: 青海, 64: 宁夏, 65: 新疆, 71: 台湾, 81: 香港, 82: 澳门, 91: 国外 }var _idcard, Y, JYM; var S, M; var idcard_array new Array(); idcard_array _idcard.split();if (area[parseInt(_idcard.substr(0, 2))] null) { return Errors[4]; }switch (_idcard.length) {case 15: if ((parseInt(_idcard.substr(6, 2)) 1900) % 4 0 || ((parseInt(_idcard.substr(6, 2)) 1900) % 100 0 (parseInt(_idcard.substr(6, 2)) 1900) % 4 0)) {ereg /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;} else {ereg /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;}if (ereg.test(_idcard)) {var iS 0; var iW new Array; iW[0] 7; iW[1] 9; iW[2] 10; iW[3] 5; iW[4] 8; iW[5] 4; iW[6] 2; iW[7] 1; iW[8] 6; iW[9] 3; iW[10] 7; iW[11] 9; iW[12] 10; iW[13] 5; iW[14] 8; iW[15] 4; iW[16] 2;var LastCode 10X98765432; var perIDNew; perIDNew _idcard.substr(0, 6); perIDNew 19; perIDNew _idcard.substr(6, 9);for (var i 0; i 17; i) { iS parseInt(perIDNew.substr(i, 1)) * iW[i]; }var iY iS % 11; perIDNew LastCode.substr(iY, 1);return Errors[0];} else {return Errors[2];}break;case 18: if (parseInt(_idcard.substr(6, 4)) % 4 0 || (parseInt(_idcard.substr(6, 4)) % 100 0 parseInt(_idcard.substr(6, 4)) % 4 0)) {ereg _idcard.substr(6, 2) 19 ? /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/ : /^[1-9][0-9]{5}20[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;} else {ereg _idcard.substr(6, 2) 19 ? /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/ : /^[1-9][0-9]{5}20[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;}if (ereg.test(_idcard)) {S (parseInt(idcard_array[0]) parseInt(idcard_array[10])) * 7 (parseInt(idcard_array[1]) parseInt(idcard_array[11])) * 9 (parseInt(idcard_array[2]) parseInt(idcard_array[12])) * 10 (parseInt(idcard_array[3]) parseInt(idcard_array[13])) * 5 (parseInt(idcard_array[4]) parseInt(idcard_array[14])) * 8 (parseInt(idcard_array[5]) parseInt(idcard_array[15])) * 4 (parseInt(idcard_array[6]) parseInt(idcard_array[16])) * 2 parseInt(idcard_array[7]) * 1 parseInt(idcard_array[8]) * 6 parseInt(idcard_array[9]) * 3;Y S % 11; M F; JYM 10X98765432; M JYM.substr(Y, 1); if (M idcard_array[17]) return Errors[0]; else { return Errors[3]; } } else { return Errors[2]; } break; default: return Errors[1]; break;} }function getid(id) { alert(checkIdcard(id)) }function per18To15(perIDSrc) { rstr ; for (var i 0; i 17; i) { if ((i 6) || (i 7)) { continue; } rstr perIDSrc.charAt(i); } return rstr; }function per15To18(perIDSrc) {var iS 0; var iW new Array;iW[0] 7; iW[1] 9; iW[2] 10; iW[3] 5; iW[4] 8; iW[5] 4; iW[6] 2; iW[7] 1; iW[8] 6; iW[9] 3; iW[10] 7; iW[11] 9; iW[12] 10; iW[13] 5; iW[14] 8; iW[15] 4; iW[16] 2;var LastCode 10X98765432; var perIDNew; perIDNew perIDSrc.substr(0, 6); perIDNew 19; perIDNew perIDSrc.substr(6, 9);for (var i 0; i 17; i) { iS parseInt(perIDNew.substr(i, 1)) * iW[i]; }var iY iS % 11; perIDNew LastCode.substr(iY, 1); return perIDNew;}var aCity { 11: 北京, 12: 天津, 13: 河北, 14: 山西, 15: 内蒙古, 21: 辽宁, 22: 吉林, 23: 黑龙江, 31: 上海, 32: 江苏, 33: 浙江, 34: 安徽, 35: 福建, 36: 江西, 37: 山东, 41: 河南, 42: 湖北, 43: 湖南, 44: 广东, 45: 广西, 46: 海南, 50: 重庆, 51: 四川, 52: 贵州, 53: 云南, 54: 西藏, 61: 陕西, 62: 甘肃, 63: 青海, 64: 宁夏, 65: 新疆, 71: 台湾, 81: 香港, 82: 澳门, 91: 国外 }function cidInfo(sId) {var iSum 0; var info ;if (!/^\d{17}(\d|x)$/i.test(sId))return false; sId sId.replace(/x$/i, a);if (aCity[parseInt(sId.substr(0, 2))] null) return Error:非法地区; sBirthday sId.substr(6, 4) - Number(sId.substr(10, 2)) - Number(sId.substr(12, 2));var d new Date(sBirthday.replace(/-/g, /))if (sBirthday ! (d.getFullYear() - (d.getMonth() 1) - d.getDate()))return Error:非法生日;for (var i 17; i 0; i--) iSum (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11)if (iSum % 11 ! 1) return Error:非法证号;return aCity[parseInt(sId.substr(0, 2))] , sBirthday , (sId.substr(16, 1) % 2 ? 男 : 女)}
function PositionLen(s){var i,str1,str2,str3,nLen; str1 s;nLen 0;for(i1;istr1.length;i){str2str1.substring(i-1,i);str3escape(str2);if(str3.length3){ nLen nLen 2;}else{nLen nLen 1;} }
return nLen;}
function isNotNull(str){return (str?false:true);}
function isNumber(str){if(str){return true;}return (isNaN(str)?false:true);}
function isNumber(str){if(str){return true;}return (isNaN(str)?false:true);}
function isBNumber(str){if(str){return true;}return (!isNaN(str)?parseInt(str,10)0?true:false:false);}
function isSNumber(str){if(str){return true;}return (!isNaN(str)?parseInt(str,10)0?true:false:false);}
function isAlpha(_str){return (_str.replace(/\w/g,).length 0);}
function isAN(_str){var reg /^(([a-z][0-9])|([0-9][a-z]))[a-z0-9]*$/i;return reg.test(_str);}
function validRegs(_value,_Regs){return _Regs.test(_value); }
function isVisibled(obj){ if( (obj.style.displaynone)||( (obj.offsetHeight0)(obj.offsetWidth0) ) ) return false; if(obj.currentStyle){if(obj.currentStyle[display]none) return false;} return true;}
function isFocused(obj){ if( (obj.disabledfalse)(isVisibled(obj)) ) return true; return false;}
function isDate(str,cname,notip){if(str){return true;}
strstr.replace(/\//g,-);
dtstr.split( );if(dt.length2){if(!notip) alert(cname日期输入不正确可能包括非法的日期组成部分。);return false; } dt1dt[0].split(-);if(dt1.length!3){if(!notip) alert(cname日期输入不正确日期部分应为YYYY-MM-DD。);return false;}dt1n(dt1[0]dt1[1]dt1[2]).split();for(var i0;idt1.length;i){if((isNaN(dt1[i])||(ctrim(dt1[i])))){if(!notip) alert(cname字符dt1[i]年月日部分必须输入数字); return false;} }_yearparseInt(dt1[0],10); _monthparseInt(dt1[1],10); _dayparseInt(dt1[2],10);if((_year1000)||(_year9999)||(_month1)||(_month12)||(_day1)||(_day31)){if(!notip) alert(cname年月日部分输入的数字不合理请核对);return false; }v_date31new Array;v_date31[0]4;v_date31[1]6;v_date31[2]9;v_date31[3]11;if((getArrayIndex(v_date31,_month)!-1)(_day30)){if(!notip) alert(cname月份_month天数输入范围不合理); return false;}if(_month2){ if(((_year%40)(_year%100!0))||(_year%4000)){ if(_day29){if(!notip) alert(cname月份_month天数输入范围不合理);return false; }}else{ if(_day28){if(!notip) alert(cname月份_month天数输入范围不合理);return false; }} } return true; }
function getArrayIndex(xArray,find){_rs-1;for(var j0;jxArray.length;j){if(xArray[j]find){_rsj; break; }} return _rs; }
function ctrim(ename){ if(enameundefined) return ; return (ename.replace(/(^\s*)|(\s*$)/g, )).replace(/^[\s \t]|[\s \t]$/, );}var RowsCount 0;var ErrorMessage ;function swarp(mId, stype) {var mObj document.getElementById(mId);if (mObj undefined) {return false;}var premObj mObj.previousElementSibling;if (stype 2) {premObj mObj.nextElementSibling;}if (premObj null) return false;if (stype 1) {mObj.parentNode.insertBefore(mObj, premObj);} else if (stype 2) {mObj.parentNode.insertBefore(premObj, mObj);}}function setrow(rowobj) {document.getElementById(curid).value rowobj.id;chnRowSelColor(rowobj);}function chnRowSelColor(rowobj) {var _com att_ document.getElementById(com_name).value;var mt document.getElementById(mtable);for (var i 0; i mt.rows.length; i) {var mt_row mt.rows[i];mt_row.style.backgroundColor ;if (mt_row.id rowobj.id) {continue;}for (var j 0; j mt_row.cells.length; j) {var cell1 mt_row.cells[j];if (cell1.getElementsByTagName(input).length 0) {cell1.innerHTML cell1.getElementsByTagName(input)[0].value.replace(/[^]*/g, );}else if (cell1.getElementsByTagName(select).length 0) {cell1.innerHTML cell1.getElementsByTagName(select)[0].value.replace(/[^]*/g, );}}}rowobj.style.backgroundColor rgb(235,235,235);var pj JSON.parse(document.getElementById(pjson).value);var jtcy pj[_com][0].cols;var isadd false;if (rowobj.cells.length 0) {isadd true;}for (var i 0; i jtcy.length; i) {var cell1 isaddtrue?rowobj.insertCell(i):rowobj.cells[i];var ctype jtcy[i].input;var innerhtml ;var oldvalue ;if(isaddtrue){cell1.setAttribute(checkSchema,jtcy[i].check);cell1.setAttribute(cName,jtcy[i].cname);}if (ctype text) {oldvalue cell1.innerText;innerhtml input type ctype onchangevalidchange(this) placeholder jtcy[i].cname style jtcy[i].ctl_style /;} else if (ctype select) {oldvalue cell1.innerText;innerhtml ctype onchangevalidchange(this) style jtcy[i].ctl_style /;innerhtml option value jtcy[i].cname /option;var items jtcy[i].list.split(|);for (var j 0; j items.length; j) {innerhtml option items[j] /option;}innerhtml / ctype ;}cell1.innerHTML innerhtml;cell1.style jtcy[i].td_style;cell1.addEventListener(click, function (event) {event.stopPropagation();if (cell1.parentNode.id ! document.getElementById(curid).value) {setrow(cell1.parentNode);}});if (cell1.getElementsByTagName(input).length 0) {cell1.getElementsByTagName(input)[0].valueoldvalue;cell1.getElementsByTagName(input)[0].addEventListener(click, function (event) {event.stopPropagation();});} else if (cell1.getElementsByTagName(select).length 0) {cell1.getElementsByTagName(select)[0].value oldvalue;cell1.getElementsByTagName(select)[0].addEventListener(click, function (event) {event.stopPropagation();});}}}function ss(type, result) {try {var robj JSON.parse(result);if (robj.errcode ! 0) {ErrorMessage robj.errmsg;alert(ErrorMessage);} else {RowsCount;}} catch (ss_e) {ErrorMessage(ss_e);alert(ErrorMessage);}if (RowsCount document.getElementById(mtable).rows.length) {document.getElementById(Button4).removeAttribute(disabled);document.getElementById(saved).style.color green;document.getElementById(saved).innerHTML 保存所有成功。;window.setTimeout(function () {document.getElementById(saved).style.color red;document.getElementById(saved).innerHTML ;}, 1000);callServerFunction(, save_att_data, {ypz_cid: document.getElementById(cid).value,com_name:document.getElementById(com_name).value }, ss4);}}function ss4(type, result) {if (JSON.stringify(result) \true\) {} else {alert(同步更新简历信息失败请点击修改简历按钮提交修改。 JSON.stringify(result));}}function ss3(type, result) {try {var robj JSON.parse(result);if (robj.errcode ! 0) {ErrorMessage robj.errmsg;alert(ErrorMessage);} else {RowsCount;}} catch (ss3_e) {ErrorMessage (ss3_e);alert(ErrorMessage);}}function tojsonstr(str) {var prv str.replace(/[\\]/g, \\$).replace(/[^]*/g, ).replace(/[^]*/g, ) ;return prv;}function saveall() {var mt document.getElementById(mtable);if (mt.rows.length 0) {document.getElementById(saved).style.color #4169E1;document.getElementById(saved).innerHTML 请添加行后再执行保存操作...;window.setTimeout(function () {document.getElementById(saved).style.color red;document.getElementById(saved).innerHTML ;}, 3000);return;}RowsCount 0;ErrorMessage ;document.getElementById(saved).style.color #4169E1;document.getElementById(saved).innerHTML 正在保存...;var _com att_ document.getElementById(com_name).value;var pj JSON.parse(document.getElementById(pjson).value);var dj JSON.parse(document.getElementById(djson).value);var jtcy pj[_com][0].cols;for (var i 0; i mt.rows.length; i) {var mt_row mt.rows[i];dj.cid mt_row.id;dj.sortid (i 1);for (var j 0; j mt_row.cells.length; j) {var cell1 mt_row.cells[j];var _value cell1.innerText;if (cell1.getElementsByTagName(input).length 0) {_value cell1.getElementsByTagName(input)[0].value;} else if (cell1.getElementsByTagName(select).length 0) {_value cell1.getElementsByTagName(select)[0].value;}dj[jtcy[j].fname] tojsonstr(_value);}callServerFunction(, saveInfo, {jdata: JSON.stringify(dj).replace(/[\\]/g, \\$) }, ss);}}function ss2(type, result) {try {var robj JSON.parse(result);if (robj.errcode ! 0) {ErrorMessage robj.errmsg;alert(ErrorMessage);} else {RowsCount;var curid document.getElementById(curid).value;var mt_row document.getElementById(curid);document.getElementById(mtable).deleteRow(mt_row.rowIndex);document.getElementById(saved).style.color red;document.getElementById(saved).innerHTML ;alert(删除当前行成功);}} catch (ss2_e) {ErrorMessage (ss2_e);alert(ErrorMessage);}}function delinfo() {var curid document.getElementById(curid).value;if (curid ) {alert(请选中记录后再执行删除操作。);return;}RowsCount 0;ErrorMessage ;var _com att_ document.getElementById(com_name).value;var dj JSON.parse(document.getElementById(djson).value);var mt_row document.getElementById(curid);dj.cid mt_row.id;callServerFunction(, deleteInfo, {jdata: JSON.stringify(dj).replace(/[\\]/g, \\$) }, ss2);}function validall(extip) {var _com att_ document.getElementById(com_name).value;var mt document.getElementById(mtable);var pj JSON.parse(document.getElementById(pjson).value);var dj JSON.parse(document.getElementById(djson).value);var jtcy pj[_com][0].cols;for (var i 0; i mt.rows.length; i) {var mt_row mt.rows[i];for (var j 0; j mt_row.cells.length; j) {var cell1 mt_row.cells[j];var _value cell1.innerText;if (cell1.getElementsByTagName(input).length 0) {_value cell1.getElementsByTagName(input)[0].value;} else if (cell1.getElementsByTagName(select).length 0) {_value cell1.getElementsByTagName(select)[0].value;}var isvalid simplecheck(cell1, _value, true, extip第 (i 1) 行);if (isvalid false) {mt_row.style.backgroundColor #B22222;return false;}}}return true;}function validchange(obj) {document.getElementById(saved).innerText 修改了obj.parentNode.getAttribute(cname)待保存;}function validsave(extip) {if (document.getElementById(saved).innerText ! ) {return false;}return true;}function addRow() {if (validall() false) {return;}RowsCount 0;ErrorMessage ;var _com att_ document.getElementById(com_name).value;var pj JSON.parse(document.getElementById(pjson).value);var jtcypj[_com][0].cols;var mt document.getElementById(mtable);var maxCount parseInt(pj[_com][0].maxRowCount, 10);if (mt.rows.length maxCount) {alert(本内容最多允许添加 maxCount 行。);return;}var row mt.insertRow(-1); // -1 表示在表的末尾插入新行row.id gGuid();row.setAttribute(onclick, setrow(this));setrow(row);var dj JSON.parse(document.getElementById(djson).value);dj[cid] row.id;dj[sortid] mt.rows.length;callServerFunction(, saveInfo, {jdata: JSON.stringify(dj) }, ss3);document.getElementById(saved).style.color red;document.getElementById(saved).innerHTML 添加新行未保存;ScrollToBottom();}function gGuid() {return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, function (c) {var r Math.floor(Math.random() * 16);var v c x ? r : (r 0x3 | 0x8);return v.toString(16);});}function ScrollToBottom() {$(html, body).animate({ scrollTop: $(document).height() - $(window).height() });}
/scriptJquery引用
这是一组基于Jquery的自定义开发的扩展应用库请下载我的资源
https://download.csdn.net/download/michaelline/88615565
进行引用本库用于调用服务器静态方法等功能使用。
C# 服务端操作
服务端主要用于对已有数据的提取显示并初始化到主编辑表中的行并提供保存及删除操作的静态方法主要方法说明见下表
序号方法名返回类型说明1public void InitPage()void主要用于提取已有数据表数据并显示到主编辑表 mtable 的数据行如何提取数据请参照我的文章 《C# 利用IDbDataAdapter / IDataReader 实现通用数据集获取》 2public static string saveInfo(string jdata)string 保存行信息到数据表参数为提交的Json数据包, 保存数据操作请参照我的文章《C#利用IDbCommand实现通用数据库脚本执行程序》 3public static string deleteInfo(string jdata)string删除行信息到数据表参数为提交的Json数据包保存数据库操作请参照我的文章《C#利用IDbCommand实现通用数据库脚本执行程序》4private static string String2Json(String s)string规范字符串以符合Json字符串要求
实现示例代码如下 % Page LanguageC# %
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
% Import NamespaceSystem.Data%
% Import NameSpaceSystem.Data.SqlClient%
% Import NamespaceSystem.IO%
% Import NamespaceSystem.Web.Services%
script languageC# runatserver
public CosysJaneCommonAPI.CODAL dal new CosysJaneCommonAPI.CODAL();
void Page_Load(Object sender, EventArgs e)
{if (Page.IsPostBack) { return; }InitPage();
}public void InitPage()
{dal.RunAt Page.Form;string _xmbh 001;string _p_att_json pjson.Text;string _sfzh 120102;xmbh.Text _xmbh;sfzh.Text _sfzh;com_name.Text Request.QueryString[com_name];Newtonsoft.Json.Linq.JObject jobj Newtonsoft.Json.Linq.JObject.Parse(pjson.Text);djson.Text {;_sql select ;HtmlTableRow trow new HtmlTableRow();ttable.Attributes[style] jobj[att_ com_name.Text][0][ttable_style].ToString();mtable.Attributes[style] jobj[att_ com_name.Text][0][mtable_style].ToString();for (int i 0; i jobj[att_ com_name.Text][0][cols].Count(); i){HtmlTableCell tcell new HtmlTableCell();tcell.InnerText jobj[att_ com_name.Text][0][cols][i][cname].ToString();tcell.Attributes[style] jobj[att_ com_name.Text][0][cols][i][td_style].ToString();trow.Cells.Add(tcell);djson.Text string.Format(\{0}\:\{1}\,, jobj[att_ com_name.Text][0][cols][i][fname].ToString(), );_sql jobj[att_ com_name.Text][0][cols][i][fname].ToString() ,;}ttable.Rows.Add(trow);djson.Text string.Format(\{0}\:\{1}\, xmbh, _xmbh);djson.Text string.Format(,\{0}\:\{1}\, sfzh,_sfzh);djson.Text string.Format(,\{0}\:\{1}\, sortid, );djson.Text string.Format(,\{0}\:\{1}\, cid, );djson.Text string.Format(,\{0}\:\{1}\, com_name, com_name.Text);djson.Text };_sql _sql cid from att_ com_name.Text where xmbhxmbh and sfzhsfzh order by sortid; paras.Clear();paras.Add(new SqlParameter(xmbh, _xmbh));paras.Add(new SqlParameter(sfzh, _sfzh));rv dal.GetDataSet(_sql, paras);if (dal.ErrorMessage ! ){return;}topnavs.Visible true;ttable.Style[top] 37px;mtable.Style[top] 67px;if (dal.RowsCount 0){return;}dt ((DataSet)rv).Tables[0];for (int i 0; i dt.Rows.Count; i){HtmlTableRow hrow new HtmlTableRow();if (_zwmc || (_bcbz true _bcsm ! )){hrow.Attributes[onclick] setrow(this);}hrow.ID dt.Rows[i][cid].ToString();for (int j 0; j dt.Columns.Count-1; j){HtmlTableCell hcell new HtmlTableCell();hcell.Attributes[style] jobj[att_ com_name.Text][0][cols][j][td_style].ToString();hcell.Attributes[cName] jobj[att_ com_name.Text][0][cols][j][cname].ToString();hcell.Attributes[checkSchema] jobj[att_ com_name.Text][0][cols][j][check].ToString();hcell.InnerText dt.Rows[i][dt.Columns[j].ToString()].ToString();hrow.Cells.Add(hcell);}mtable.Rows.Add(hrow);}}
[WebMethod(BufferResponse true)]
public static string saveInfo(string jdata)
{Newtonsoft.Json.Linq.JObject jobj Newtonsoft.Json.Linq.JObject.Parse(jdata);string tablename ;string inssql ;string inslist ;string insparas ;string updsql ;string updparas ;ArrayList paras new ArrayList();paras.Clear();foreach (KeyValuePairstring, Newtonsoft.Json.Linq.JToken kvp in jobj){string key kvp.Key.ToString();string value kvp.Value.ToString();if (key com_name (value jtcy || value shgx || value jypx || value gzjl)){tablename att_value;}else{inslist key ,;insparas key ,;updparas string.Format( {0}{1},,key,key);paras.Add(new SqlParameter(key, value));}}if (inslist.Length 1){inslist inslist.Substring(0, inslist.Length - 1);insparas insparas.Substring(0, insparas.Length - 1);inssql string.Format(insert into {0} ({1}) values({2});, tablename, inslist, insparas);}if (updparas.Length 1){updparas updparas.Substring(0, updparas.Length - 1);updsql string.Format(update {0} set {1} where cidcid;, tablename, updparas);}string sql string.Format( if not exists(select cid from {0} where cidcid) begin {1} end else begin {2} end, tablename, inssql, updsql);CosysJaneCommonAPI.CODAL dal new CosysJaneCommonAPI.CODAL();dal.ExecDbScripts(sql, paras);string rv {\errcode\:0,\errmsg\:\\};if (dal.ErrorMessage ! ){rv{\errcode\:2,\errmsg\:\String2Json(dal.ErrorMessage)\};}else if (dal.RowsCount 0){rv {\errcode\:1,\errmsg\:\ String2Json(未成功更新记录。) \};}return rv;
}
[WebMethod(BufferResponse true)]
public static string deleteInfo(string jdata)
{Newtonsoft.Json.Linq.JObject jobj Newtonsoft.Json.Linq.JObject.Parse(jdata);string tablename ;string updsql ;string updparas ;ArrayList paras new ArrayList();paras.Clear();foreach (KeyValuePairstring, Newtonsoft.Json.Linq.JToken kvp in jobj){string key kvp.Key.ToString();string value kvp.Value.ToString();if (key com_name (value jtcy || value shgx|| value jypx || value gzjl)){tablename att_value;}else if(keycid){paras.Add(new SqlParameter(key, value));}}updsql string.Format(delete from {0} where cidcid;, tablename);CosysJaneCommonAPI.CODAL dal new CosysJaneCommonAPI.CODAL();dal.ExecDbScripts(updsql, paras);string rv {\errcode\:0,\errmsg\:\\};if (dal.ErrorMessage ! ){rv {\errcode\:2,\errmsg\:\ String2Json(dal.ErrorMessage) \};}else if (dal.RowsCount 0){rv {\errcode\:1,\errmsg\:\ String2Json(未成功更新记录。) \};}return rv;
}private static string String2Json(String s)
{StringBuilder sb new StringBuilder();for (int i 0; i s.Length; i){char c s.ToCharArray()[i];switch (c){case \:sb.Append(\\\); break;case \\:sb.Append(\\\\); break;case /:sb.Append(\\/); break;case \b:sb.Append(\\b); break;case \f:sb.Append(\\f); break;case \n:sb.Append(\\n); break;case \r:sb.Append(\\r); break;case \t:sb.Append(\\t); break;default:if ((c 0 c 31) || c 127)//在ASCⅡ码中第031号及第127号(共33个)是控制字符或通讯专用字符{}else{sb.Append(c);}break;}}return sb.ToString();}/script小结
由于一对多录入的特点我们采用了嵌入 iframe 元素的方法然后传递参数名称 com_name以决定使用Json配置文件中的节点信息 。
正常的情况下我们还会有父项的录入界面并提供有保存按钮因此点击保存按钮时客户端可能还需要对 iframe 里的表格数据再进行一次校验或处理访问iframe里的元素方法主要通过iframe.contentWindow.document 处理比如如下代码 var atts new Array();atts.push(att_jypx);function before_submit() {for (var i 0; i atts.length; i) {var p_att document.getElementById(p_ atts[i]);if (p_att undefined) { continue; }var p_att_ifr document.getElementById(x_p_ atts[i]);var l_att document.getElementById(l_ atts[i]);if (p_att_ifr.contentWindow.document.getElementById(mtable).rows.length 0) {alert(l_att.innerText 的内容需要添加。);return false;}if (p_att_ifr.contentWindow.validall(l_att.innerText内容的) false) {return false;}if (p_att_ifr.contentWindow.validsave() false) {alert(l_att.innerText 的内容有尚未或正在保存的内容请保存后再进行提交。);return false;}}return true;}另外工具栏按钮的图片文件我们可以按照自己的实际需要进行替换。本代码仅供您参考使用感谢您的阅读希望本文能够对您有所帮助。
