C#结合JS实现HtmlTable动态添加行并生存到数据库

梦见你的名字  金牌会员 | 2024-6-23 18:42:19 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 760|帖子 760|积分 2280

   
目次
需求
结果视频演示
范例运行环境
预备数据源
数据表计划
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 语句：
  1. CREATE TABLE [dbo].[att_jypx](
  2.         [cid] [uniqueidentifier] ROWGUIDCOL  NOT NULL,
  3.         [xmbh] [varchar](20) NOT NULL,
  4.         [sfzh] [nvarchar](18) NOT NULL,
  5.         [nf1] [nvarchar](4) NULL,
  6.         [yf1] [nvarchar](2) NULL,
  7.         [nf2] [nvarchar](4) NULL,
  8.         [yf2] [nvarchar](2) NULL,
  9.         [xxmc] [nvarchar](100) NULL,
  10.         [zy] [nvarchar](50) NULL,
  11.         [xl] [nvarchar](10) NULL,
  12.         [byzlb] [nvarchar](50) NULL,
  13.         [xh] [int] NULL,
  14. CONSTRAINT [PK_att_jypx] PRIMARY KEY CLUSTERED
  15. (
  16.         [cid] ASC
  17. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  18. ) ON [PRIMARY]
  19. GO
  21. ALTER TABLE [dbo].[att_jypx] ADD  CONSTRAINT [DF_att_jypx_cid]  DEFAULT (newid()) FOR [cid]
  22. 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如下：
 
  1. {
  2.   "att_jypx":[
  3.         {"maxRowCount":12,
  4.           "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;",
  5.           "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;",
  6.           "cols": [
  7.             {
  8.               "fname": "nf1",
  9.               "cname": "起始年份",
  10.               "len":4,
  11.               "td_style":"width:75px",
  12.               "ctl_style":"width:70px;border-radius:2px;border-width:1px;",
  13.               "input":"text",
  14.               "list":"",
  15.               "display":"",
  16.               "check":"notnull|mustlen4|int"
  17.             },
  18.             {
  19.              "fname": "yf1",
  20.              "cname": "起始月份",
  21.               "len":2,
  22.               "td_style":"width:75px",
  23.               "ctl_style":"width:70px;border-radius:2px;",
  24.               "input":"select",
  25.              "list":"01|02|03|04|05|06|07|08|09|10|11|12",
  26.              "check":"notnull"
  27.                },
  28.             {
  29.               "fname": "nf2",
  30.               "cname": "截止年份",
  31.               "len":4,
  32.               "td_style":"width:75px",
  33.               "ctl_style":"width:70px;border-radius:2px;border-width:1px;",
  34.               "input":"text",
  35.               "list":"",
  36.               "display":"",
  37.               "check":"notnull|mustlen4|int"
  38.             },
  39.             {
  40.              "fname": "yf2",
  41.              "cname": "截止月份",
  42.               "len":2,
  43.               "td_style":"width:75px",
  44.               "ctl_style":"width:70px;border-radius:2px;",
  45.               "input":"select",
  46.              "list":"01|02|03|04|05|06|07|08|09|10|11|12",
  47.              "check":"notnull"
  48.                },
  49.             {
  50.              "fname": "xxmc",
  51.              "cname": "所在院校",
  52.               "len":100,
  53.               "td_style":"width:200px;",
  54.               "ctl_style":"width:195px;border-radius:2px;border-width:1px;",
  55.               "input":"text",
  56.              "list":"",
  57.              "check":"notnull|maxlen100"
  58.                },
  59.            {
  60.              "fname": "xl",
  61.              "cname": "学历",
  62.               "len":10,
  63.               "td_style":"width:60px",
  64.               "ctl_style":"width:55px;border-radius:2px;border-width:1px;",
  65.               "input":"text",
  66.              "list":"",
  67.              "check":"notnull|maxlen10"
  68.                },
  69.             {
  70.              "fname": "zy",
  71.              "cname": "所学专业",
  72.               "len":50,
  73.               "td_style":"width:80px",
  74.               "ctl_style":"width:75px;border-radius:2px;border-width:1px;",
  75.               "input":"text",
  76.              "list":"",
  77.              "check":"notnull|maxlen50"
  78.                },
  79.             {
  80.              "fname": "byzlb",
  81.              "cname": "毕业证类别",
  82.               "len":50,
  83.               "td_style":"width:160px",
  84.               "ctl_style":"width:155px;border-radius:2px;border-width:1px;",
  85.               "input":"select",
  86.              "list":"全日制普通高等教育毕业证|成人高等教育毕业证|高等教育自学考试毕业证|其他",
  87.              "check":"notnull"
  88.                }          ]
  89.              }
  90.        ]
  91. }
复制代码
Json数据包提交配置

Json数据包根据Json配置信息通过服务端生成，紧张包括字段名的项，用于将来提交数据时利用，因为提交的数据方式仍然是Json数据对象，即Json数据包，生成的初始格式如下示例：
  1. {"nf1":"",
  2. "yf1":"",
  3. "nf2":"",
  4. "yf2":"",
  5. "xxmc":"",
  6. "zy":"",
  7. "xmbh":"001",
  8. "sfzh":"120102",
  9. "xh":"",
  10. "cid":"",
  11. "com_name":"jypx"}
复制代码
计划实现

前端UI

前端UI我们紧张放置一些中心变量控件，表格元素等，紧张元素说明见下表：
序号元素Id类型说明1curidTextBox用于纪录当前点行的ID2pjsonTextBox用于存储Json配置数据3djsonTextBox用于存储Json提交数据包4ttableHtmlTable标题列表格，用于固定显示表头5mtableHtmlTable主编辑表格对象6topnavsDiv一组固定于顶端的工具栏对象层，包括新增、删除、上移、下移、生存按钮 示例代码如下：
  
  1. <form  runat="server">
  2. <asp:TextBox ID="cid" style="display:none" runat="server"></asp:TextBox>
  3. <asp:TextBox ID="com_name" style="display:none" runat="server"></asp:TextBox>
  4. <asp:TextBox ID="xmbh" style="display:none" runat="server"></asp:TextBox>
  5. <asp:TextBox ID="sfzh" style="display:none" runat="server"></asp:TextBox>
  6. <asp:TextBox ID="p_acode"  Runat="server" Visible="true" style="display:none" ></asp:TextBox>
  7. <asp:TextBox ID="curid"  Runat="server" Visible="true" style="display:none" ></asp:TextBox>
  8. <asp:TextBox ID="pjson" TextMode="MultiLine"  Runat="server" Visible="true" style="display:none" ></asp:TextBox>
  9. <asp:TextBox ID="djson" TextMode="MultiLine"  Runat="server" Visible="true" style="display:none" ></asp:TextBox>
  10. <div id="topnavs" runat="server" 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;">
  11. <input id="closebutton" runat="server" type="button" value='' style=" border-width:0px; background-position:center; background-image:url(/images/att_add6.jpg);font-size:14pt;cursor:pointer;width:25px;height:25px;" onclick="addRow()" class="" />
  12. <input id="Button1" runat="server" type="button" 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;" onclick='delinfo()' class="" />
  13. <input id="Button2" runat="server" type="button" value='' style="border-width:0px; background-position:center; background-image:url(/images/att_up2.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px;" onclick="swarp(document.getElementById('curid').value,1);" class="" />
  14. <input id="Button3" runat="server" type="button" value='' style="border-width:0px; background-position:center; background-image:url(/images/att_down3.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px;" onclick="swarp(document.getElementById('curid').value,2);" class="" />
  15. <input id="Button4" runat="server" type="button" value='' style="border-width:0px; background-position:center; background-image:url(/images/att_save.jpg); margin-left:5px; font-size:14pt;cursor:pointer;width:25px;height:25px;" onclick="if (validall('') == false) {document.getElementById('Button4').removeAttribute('disabled');return;}saveall();if(document.getElementById('mtable').rows.length>0){ this.setAttribute('disabled','true');}" class="" />
  16. <div id="saved" style="margin-left:10px; font-weight:bold; font-size:11pt; color:Red; "></div>
  17. </div>
  18. <table align="left" id="ttable" runat="server" 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;"  border="1" cellspacing="0" cellpadding="3">
  19. </table>
  20. <table align="left" id="mtable" runat="server" style="table-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;"  border="1" cellspacing="0" cellpadding="3">
  21. </table>
  22. </form>
复制代码

Javascript 脚本

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用于增加新行时自动滚动到页面底部 完备示例代码如下：
  
  1. <script language="javascript">
  2.     function simplecheck(chkobj, _chkvalue, allowAlert,etip) {
  3.         check_result = true; check_errid = ''; check_errmsg = '';var _checkSchema = chkobj.getAttribute('checkSchema');var _cName = chkobj.getAttribute('cName');
  4.         if (_checkSchema.indexOf('ctrim') != -1) { _chkvalue = ctrim(_chkvalue); } var _objlength = _chkvalue.length; if (_checkSchema.indexOf('abslen') != -1) { _objlength = PositionLen(_chkvalue); }
  5.         var _schemaList = _checkSchema.split('|'); var _reqeustnotnull = false;
  6.         for (var k = 0; k < _schemaList.length; k++) { if (_schemaList[k].toLowerCase() == 'notnull') { _reqeustnotnull = true; } }
  7.         if ((!_reqeustnotnull) && (_chkvalue == '')) { return check_result; }
  8.         for (var j = 0; j < _schemaList.length; j++) {
  9.             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) {
  10.                 if (curErrmsg != '') { check_errmsg = etip + curErrmsg; } if ((curErrmsg != '') && (allowAlert)) { document.getElementById('saved').innerHTML = etip + curErrmsg; alert(etip + curErrmsg); return check_result; }
  11.             }
  12.         }
  13.         return check_result;
  14.     }
  15.     function checkIdcard(idcard) {
  16.         var _idcard = idcard;  var Errors = new Array('', '身份证号码位数不对!', '身份证号码出生日期超出范围或含有非法字符!', '身份证号码校验错误!', '身份证地区非法!', '');
  17.         if (_idcard == '') { return Errors[5]; }
  18.         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: '国外' }
  19.         var _idcard, Y, JYM; var S, M; var idcard_array = new Array(); idcard_array = _idcard.split('');
  20.         if (area[parseInt(_idcard.substr(0, 2))] == null) { return Errors[4]; }
  21.         switch (_idcard.length) {
  22.             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)) {
  23.                     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}$/;
  24.                 } else {
  25.                     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}$/;
  26.                 }
  27.                 if (ereg.test(_idcard)) {
  28.                     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;
  29.                     var LastCode = '10X98765432'; var perIDNew; perIDNew = _idcard.substr(0, 6); perIDNew += '19'; perIDNew += _idcard.substr(6, 9);
  30.                     for (var i = 0; i < 17; i++) { iS += parseInt(perIDNew.substr(i, 1)) * iW[i]; }
  31.                     var iY = iS % 11; perIDNew += LastCode.substr(iY, 1);
  32.                     return Errors[0];
  33.                 } else {
  34.                     return Errors[2];
  35.                 }
  36.                 break;
  37.             case 18: if (parseInt(_idcard.substr(6, 4)) % 4 == 0 || (parseInt(_idcard.substr(6, 4)) % 100 == 0 && parseInt(_idcard.substr(6, 4)) % 4 == 0)) {
  38.                     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]$/;
  39.                 } else {
  40.                     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]$/;
  41.                 }
  42.                 if (ereg.test(_idcard)) {
  43.                     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;
  44.                     Y = S % 11; M = 'F'; JYM = '10X98765432'; M = JYM.substr(Y, 1); if (M == idcard_array[17]) return Errors[0]; else { return Errors[3]; }
  45.                 } else { return Errors[2]; } break; default: return Errors[1]; break;
  46.         }
  47.     }
  48.     function getid(id) { alert(checkIdcard(id)) }
  49.     function per18To15(perIDSrc) { rstr = ''; for (var i = 0; i < 17; i++) { if ((i == 6) || (i == 7)) { continue; } rstr += perIDSrc.charAt(i); } return rstr; }
  50.     function per15To18(perIDSrc) {
  51.         var iS = 0; var iW = new Array;
  52.         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;
  53.         var LastCode = '10X98765432'; var perIDNew; perIDNew = perIDSrc.substr(0, 6); perIDNew += '19'; perIDNew += perIDSrc.substr(6, 9);
  54.         for (var i = 0; i < 17; i++) { iS += parseInt(perIDNew.substr(i, 1)) * iW[i]; }
  55.         var iY = iS % 11; perIDNew += LastCode.substr(iY, 1); return perIDNew;
  56.     }
  57.     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: '国外' }
  58.     function cidInfo(sId) {
  59.         var iSum = 0; var info = '';
  60.         if (!/^\d{17}(\d|x)$/i.test(sId))
  61.             return false; sId = sId.replace(/x$/i, 'a');
  62.         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));
  63.         var d = new Date(sBirthday.replace(/-/g, '/'))
  64.         if (sBirthday != (d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()))
  65.             return 'Error:非法生日';
  66.         for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11)
  67.         if (iSum % 11 != 1) return 'Error:非法证号';
  68.         return aCity[parseInt(sId.substr(0, 2))] + ',' + sBirthday + ',' + (sId.substr(16, 1) % 2 ? '男' : '女')
  69.     }
  70. function PositionLen(s){var i,str1,str2,str3,nLen;        str1 =s;nLen = 0;for(i=1;i<=str1.length;i++){str2=str1.substring(i-1,i);str3=escape(str2);if(str3.length>3){        nLen = nLen + 2;}else{nLen = nLen + 1;}        }
  71. return nLen;}
  72. function isNotNull(str){return (str==''?false:true);}
  73. function isNumber(str){if(str==''){return true;}return (isNaN(str)?false:true);}
  74. function isNumber(str){if(str==''){return true;}return (isNaN(str)?false:true);}
  75. function isBNumber(str){if(str==''){return true;}return (!isNaN(str)?parseInt(str,10)>=0?true:false:false);}
  76. function isSNumber(str){if(str==''){return true;}return (!isNaN(str)?parseInt(str,10)<0?true:false:false);}
  77. function isAlpha(_str){return (_str.replace(/\w/g,'').length == 0);}
  78. function isAN(_str){var reg = /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;return reg.test(_str);}
  79. function validRegs(_value,_Regs){return _Regs.test(_value); }
  80. function isVisibled(obj){   if( (obj.style.display=='none')||( (obj.offsetHeight==0)&&(obj.offsetWidth==0) ) )       return false; if(obj.currentStyle){if(obj.currentStyle['display']=='none') return false;}  return true;}
  81. function isFocused(obj){   if( (obj.disabled==false)&&(isVisibled(obj)) )       return true;   return false;}
  82. function isDate(str,cname,notip){if(str==''){return true;}
  83. str=str.replace(/\//g,'-');
  84. dt=str.split(' ');if(dt.length>2){if(!notip) alert(cname+'日期输入不正确！可能包括非法的日期组成部分。');return false;        } dt1=dt[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 i=0;i<dt1.length;i++){if((isNaN(dt1[i])||(ctrim(dt1[i])==''))){if(!notip)         alert(cname+'字符：'+dt1[i]+'，年月日部分必须输入数字！');        return false;}        }_year=parseInt(dt1[0],10);        _month=parseInt(dt1[1],10);        _day=parseInt(dt1[2],10);if((_year<1000)||(_year>9999)||(_month<1)||(_month>12)||(_day<1)||(_day>31)){if(!notip) alert(cname+'年月日部分输入的数字不合理，请核对！');return false;        }v_date31=new Array;v_date31[0]=4;v_date31[1]=6;v_date31[2]=9;v_date31[3]=11;if((getArrayIndex(v_date31,_month)!=-1)&&(_day>30)){if(!notip) alert(cname+'月份：'+_month+'，天数输入范围不合理！');        return false;}if(_month==2){        if(((_year%4==0)&&(_year%100!=0))||(_year%400==0)){        if(_day>29){if(!notip) alert(cname+'月份：'+_month+'，天数输入范围不合理！');return false;        }}else{        if(_day>28){if(!notip) alert(cname+'月份：'+_month+'，天数输入范围不合理！');return false;        }}        }        return true;   }
  85. function getArrayIndex(xArray,find){_rs=-1;for(var j=0;j<xArray.length;j++){if(xArray[j]==find){_rs=j;        break;         }}        return _rs;        }
  86. function ctrim(ename){ if(ename==undefined) return '';        return (ename.replace(/(^\s*)|(\s*$)/g, '')).replace(/^[\s　\t]+|[\s　\t]+$/, '');}
  89.     var RowsCount = 0;
  90.     var ErrorMessage = "";
  92.     function swarp(mId, stype) {
  93.         var mObj = document.getElementById(mId);
  94.         if (mObj == undefined) {
  95.             return false;
  96.         }
  97.         var premObj = mObj.previousElementSibling;
  98.         if (stype == 2) {
  99.             premObj = mObj.nextElementSibling;
  100.         }
  101.         if (premObj == null) return false;
  102.         if (stype == 1) {
  103.             mObj.parentNode.insertBefore(mObj, premObj);
  104.         } else if (stype == 2) {
  105.             mObj.parentNode.insertBefore(premObj, mObj);
  106.         }
  107.     }
  108.     function setrow(rowobj) {
  109.         document.getElementById('curid').value = rowobj.id;
  110.         chnRowSelColor(rowobj);
  111.     }
  112.     function chnRowSelColor(rowobj) {
  113.         var _com = "att_" + document.getElementById('com_name').value;
  114.         var mt = document.getElementById('mtable');
  115.         for (var i = 0; i < mt.rows.length; i++) {
  116.             var mt_row = mt.rows[i];
  117.             mt_row.style.backgroundColor = '';
  118.             if (mt_row.id == rowobj.id) {continue;}
  119.             for (var j = 0; j < mt_row.cells.length; j++) {
  120.                 var cell1 = mt_row.cells[j];
  121.                 if (cell1.getElementsByTagName('input').length > 0) {
  122.                     cell1.innerHTML = cell1.getElementsByTagName('input')[0].value.replace(/<[^>]*>/g, '');
  123.                 }else
  124.                 if (cell1.getElementsByTagName('select').length > 0) {
  125.                         cell1.innerHTML = cell1.getElementsByTagName('select')[0].value.replace(/<[^>]*>/g, '');
  126.                 }
  127.             }
  128.         }
  129.         rowobj.style.backgroundColor = 'rgb(235,235,235)';
  130.         var pj = JSON.parse(document.getElementById('pjson').value);
  131.         var jtcy = pj[_com][0].cols;
  132.         var isadd = false;
  133.         if (rowobj.cells.length == 0) {
  134.             isadd = true;
  135.         }
  136.         for (var i = 0; i < jtcy.length; i++) {
  137.             var cell1 = isadd==true?rowobj.insertCell(i):rowobj.cells[i];
  138.             var ctype = jtcy[i].input;
  139.             var innerhtml = "";
  140.             var oldvalue = "";
  141.             if(isadd==true){
  142.                 cell1.setAttribute("checkSchema",jtcy[i].check);
  143.                 cell1.setAttribute("cName",jtcy[i].cname);
  144.             }
  145.             if (ctype == "text") {
  146.                 oldvalue = cell1.innerText;
  147.                 innerhtml = "<input type='" + ctype + "' onchange='validchange(this)' placeholder='" + jtcy[i].cname + "'style='" + jtcy[i].ctl_style + "'/>";
  148.             } else if (ctype == "select") {
  149.                 oldvalue = cell1.innerText;
  150.                 innerhtml = "<" + ctype + " onchange='validchange(this)' style='" + jtcy[i].ctl_style + "' />";
  151.                 innerhtml += "<option value=''>" + jtcy[i].cname + "</option>";
  152.                 var items = jtcy[i].list.split("|");
  153.                 for (var j = 0; j < items.length; j++) {
  154.                     innerhtml += "<option>" + items[j] + "</option>";
  155.                 }
  156.                 innerhtml += "</" + ctype + ">";
  157.             }
  158.             cell1.innerHTML = innerhtml;
  159.             cell1.style = jtcy[i].td_style;
  160.             cell1.addEventListener('click', function (event) {
  161.                 event.stopPropagation();
  162.                 if (cell1.parentNode.id != document.getElementById('curid').value) {
  163.                     setrow(cell1.parentNode);
  164.                 }
  165.             });
  166.             if (cell1.getElementsByTagName('input').length > 0) {
  167.                 cell1.getElementsByTagName('input')[0].value=oldvalue;
  168.                 cell1.getElementsByTagName('input')[0].addEventListener('click', function (event) {
  169.                     event.stopPropagation();
  170.                 });
  171.             } else if (cell1.getElementsByTagName('select').length > 0) {
  172.                 cell1.getElementsByTagName('select')[0].value = oldvalue;
  173.                 cell1.getElementsByTagName('select')[0].addEventListener('click', function (event) {
  174.                     event.stopPropagation();
  175.                 });
  176.             }
  177.         }
  179.     }
  180.     function ss(type, result) {
  181.         try {
  182.             var robj = JSON.parse(result);
  183.             if (robj.errcode != 0) {
  184.                 ErrorMessage = robj.errmsg;
  185.                 alert(ErrorMessage);
  186.             } else {
  187.                 RowsCount++;
  188.             }
  189.         } catch (ss_e) {
  190.             ErrorMessage=(ss_e);
  191.             alert(ErrorMessage);
  192.         }
  193.         if (RowsCount == document.getElementById('mtable').rows.length) {
  194.             document.getElementById('Button4').removeAttribute("disabled");
  195.             document.getElementById('saved').style.color = 'green';
  196.             document.getElementById('saved').innerHTML = "保存所有成功。";
  197.             window.setTimeout(function () {
  198.                 document.getElementById('saved').style.color = 'red';
  199.                 document.getElementById('saved').innerHTML = "";
  200.             }, 1000);
  203.             callServerFunction("", "save_att_data", "{ypz_cid:'" +document.getElementById('cid').value+"',com_name:'"+document.getElementById('com_name').value + "'}", ss4);
  204.         }
  205.     }
  206.     function ss4(type, result) {
  207.         if (JSON.stringify(result) == ""true"") {
  208.         } else {
  209.             alert('同步更新简历信息失败，请点击修改简历按钮提交修改。' + JSON.stringify(result));
  210.         }
  211.     }
  212.     function ss3(type, result) {
  213.         try {
  214.             var robj = JSON.parse(result);
  215.             if (robj.errcode != 0) {
  216.                 ErrorMessage = robj.errmsg;
  217.                 alert(ErrorMessage);
  218.             } else {
  219.                 RowsCount++;
  220.             }
  221.         } catch (ss3_e) {
  222.             ErrorMessage = (ss3_e);
  223.             alert(ErrorMessage);
  224.         }
  225.     }
  226.     function tojsonstr(str) {
  227.         var prv = str.replace(/["\\]/g, '\\$&').replace(/<[^>]*>/g, '').replace(/<[^>]*>/g, '') ;
  228.         return prv;
  229.     }
  230.     function saveall() {
  231.         var mt = document.getElementById('mtable');
  232.         if (mt.rows.length == 0) {
  233.             document.getElementById('saved').style.color = '#4169E1';
  234.             document.getElementById('saved').innerHTML = "请添加行后再执行保存操作...";
  235.             window.setTimeout(function () {
  236.                 document.getElementById('saved').style.color = 'red';
  237.                 document.getElementById('saved').innerHTML = "";
  238.             }, 3000);
  239.             return;
  240.         }
  241.         RowsCount = 0;
  242.         ErrorMessage = "";
  243.         document.getElementById('saved').style.color = '#4169E1';
  244.         document.getElementById('saved').innerHTML = "正在保存...";
  246.         var _com = "att_" + document.getElementById('com_name').value;
  247.         var pj = JSON.parse(document.getElementById('pjson').value);
  248.         var dj = JSON.parse(document.getElementById('djson').value);
  249.         var jtcy = pj[_com][0].cols;
  250.         for (var i = 0; i < mt.rows.length; i++) {
  251.             var mt_row = mt.rows[i];
  252.             dj.cid = mt_row.id;
  253.             dj.sortid = (i + 1);
  254.             for (var j = 0; j < mt_row.cells.length; j++) {
  255.                 var cell1 = mt_row.cells[j];
  256.                 var _value = cell1.innerText;
  257.                 if (cell1.getElementsByTagName('input').length > 0) {
  258.                     _value = cell1.getElementsByTagName('input')[0].value;
  259.                 } else if (cell1.getElementsByTagName('select').length > 0) {
  260.                     _value = cell1.getElementsByTagName('select')[0].value;
  261.                 }
  262.                 dj[jtcy[j].fname] =tojsonstr(_value);
  263.             }
  264.             callServerFunction("", "saveInfo", "{jdata:'" + JSON.stringify(dj).replace(/['\\]/g, '\\$&') + "'}", ss);
  265.         }
  266.     }
  267.     function ss2(type, result) {
  268.         try {
  269.             var robj = JSON.parse(result);
  270.             if (robj.errcode != 0) {
  271.                 ErrorMessage = robj.errmsg;
  272.                 alert(ErrorMessage);
  273.             } else {
  274.                 RowsCount++;
  275.                 var curid = document.getElementById('curid').value;
  276.                 var mt_row = document.getElementById(curid);
  277.                 document.getElementById('mtable').deleteRow(mt_row.rowIndex);
  278.                 document.getElementById('saved').style.color = 'red';
  279.                 document.getElementById('saved').innerHTML = "";
  280.                 alert('删除当前行成功！');
  281.             }
  282.         } catch (ss2_e) {
  283.             ErrorMessage = (ss2_e);
  284.             alert(ErrorMessage);
  285.         }
  286.     }
  288.     function delinfo() {
  289.         var curid = document.getElementById('curid').value;
  290.         if (curid == "") {
  291.             alert('请选中记录后再执行删除操作。');
  292.             return;
  293.         }
  294.         RowsCount = 0;
  295.         ErrorMessage = "";
  296.         var _com = "att_" + document.getElementById('com_name').value;
  297.         var dj = JSON.parse(document.getElementById('djson').value);
  298.         var mt_row = document.getElementById(curid);
  299.         dj.cid = mt_row.id;
  300.         callServerFunction("", "deleteInfo", "{jdata:'" + JSON.stringify(dj).replace(/['\\]/g, '\\$&') + "'}", ss2);
  301.     }
  302.     function validall(extip) {
  303.         
  305.         var _com = "att_" + document.getElementById('com_name').value;
  306.         var mt = document.getElementById('mtable');
  308.         var pj = JSON.parse(document.getElementById('pjson').value);
  309.         var dj = JSON.parse(document.getElementById('djson').value);
  310.         var jtcy = pj[_com][0].cols;
  311.         for (var i = 0; i < mt.rows.length; i++) {
  312.             var mt_row = mt.rows[i];
  313.             for (var j = 0; j < mt_row.cells.length; j++) {
  314.                 var cell1 = mt_row.cells[j];
  315.                 var _value = cell1.innerText;
  316.                 if (cell1.getElementsByTagName('input').length > 0) {
  317.                     _value = cell1.getElementsByTagName('input')[0].value;
  318.                 } else if (cell1.getElementsByTagName('select').length > 0) {
  319.                     _value = cell1.getElementsByTagName('select')[0].value;
  320.                 }
  321.                 var isvalid = simplecheck(cell1, _value, true, extip+"第" + (i + 1) + "行：");
  322.                 if (isvalid == false) {
  323.                     mt_row.style.backgroundColor = '#B22222';
  324.                     
  325.                     return false;
  326.                 }
  327.             }
  328.         }
  329.         return true;
  330.     }
  331.     function validchange(obj) {
  332.         document.getElementById('saved').innerText = '修改了'+obj.parentNode.getAttribute('cname')+'待保存';
  333.     }
  334.     function validsave(extip) {
  335.         if (document.getElementById('saved').innerText != '') {
  336.             return false;
  337.         }
  338.         return true;
  339.     }
  340.     function addRow() {
  341.         if (validall('') == false) {
  342.             return;
  343.         }
  344.         RowsCount = 0;
  345.         ErrorMessage = "";
  347.         var _com = "att_" + document.getElementById('com_name').value;
  348.         var pj = JSON.parse(document.getElementById('pjson').value);
  349.         
  350.         var jtcy=pj[_com][0].cols;
  351.         var mt = document.getElementById('mtable');
  352.         var maxCount = parseInt(pj[_com][0].maxRowCount, 10);
  353.         if (mt.rows.length >= maxCount) {
  354.             alert("本内容最多允许添加" + maxCount + "行。");
  355.             return;
  356.         }
  357.         var row = mt.insertRow(-1); // -1 表示在表的末尾插入新行
  358.         row.id = gGuid();
  359.         row.setAttribute("onclick", "setrow(this)");
  360.         setrow(row);
  361.         var dj = JSON.parse(document.getElementById('djson').value);
  362.         dj["cid"] = row.id;
  363.         dj["sortid"] = mt.rows.length;
  365.         callServerFunction("", "saveInfo", "{jdata:'" + JSON.stringify(dj) + "'}", ss3);
  366.         document.getElementById('saved').style.color = 'red';
  367.         document.getElementById('saved').innerHTML = "添加新行未保存";
  368.         ScrollToBottom();
  369.     }
  370.     function gGuid() {
  371.         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  372.             var r = Math.floor(Math.random() * 16);
  373.             var v = c === 'x' ? r : (r & 0x3 | 0x8);
  374.             return v.toString(16);
  375.         });
  376.     }
  377.     function ScrollToBottom() {
  378.         $("html, body").animate({ scrollTop: $(document).height() - $(window).height() });
  379.     }
  380. </script>
复制代码

Jquery引用

这是一组基于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字符串要求 实现示例代码如下：
  
  1. <%@ Page Language="C#" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <%@ Import Namespace="System.Data"%>
  4. <%@ Import NameSpace="System.Data.SqlClient"%>
  5. <%@ Import Namespace="System.IO"%>
  6. <%@ Import Namespace="System.Web.Services"%>
  7. <script language="C#" runat="server">
  8. public CosysJaneCommonAPI.CODAL dal = new CosysJaneCommonAPI.CODAL();
  9. void Page_Load(Object sender, EventArgs e)
  10. {
  11.     if (Page.IsPostBack) { return; }
  12.     InitPage();
  13. }
  15. public void InitPage()
  16. {
  17.     dal.RunAt = Page.Form;
  18.     string _xmbh = "001";
  19.     string _p_att_json = pjson.Text;
  20.     string _sfzh = "120102";
  21.     xmbh.Text = _xmbh;
  22.     sfzh.Text = _sfzh;
  23.    
  24.     com_name.Text = Request.QueryString["com_name"];
  25.     Newtonsoft.Json.Linq.JObject jobj = Newtonsoft.Json.Linq.JObject.Parse(pjson.Text);
  26.     djson.Text = "{";
  27.     _sql = "select ";
  28.     HtmlTableRow trow = new HtmlTableRow();
  29.     ttable.Attributes["style"] = jobj["att_" + com_name.Text][0]["ttable_style"].ToString();
  30.     mtable.Attributes["style"] = jobj["att_" + com_name.Text][0]["mtable_style"].ToString();
  31.     for (int i = 0; i < jobj["att_" + com_name.Text][0]["cols"].Count(); i++)
  32.     {
  33.         HtmlTableCell tcell = new HtmlTableCell();
  34.         tcell.InnerText = jobj["att_" + com_name.Text][0]["cols"][i]["cname"].ToString();
  35.         tcell.Attributes["style"] = jobj["att_" + com_name.Text][0]["cols"][i]["td_style"].ToString();
  36.         trow.Cells.Add(tcell);
  37.         djson.Text += string.Format(""{0}":"{1}",", jobj["att_" + com_name.Text][0]["cols"][i]["fname"].ToString(), "");
  38.         _sql += jobj["att_" + com_name.Text][0]["cols"][i]["fname"].ToString() + ",";
  39.     }
  40.     ttable.Rows.Add(trow);
  41.     djson.Text += string.Format(""{0}":"{1}"", "xmbh", _xmbh);
  42.     djson.Text += string.Format(","{0}":"{1}"", "sfzh",_sfzh);
  43.     djson.Text += string.Format(","{0}":"{1}"", "sortid", "");
  44.     djson.Text += string.Format(","{0}":"{1}"", "cid", "");
  45.     djson.Text += string.Format(","{0}":"{1}"", "com_name", com_name.Text);
  46.     djson.Text += "}";
  47.     _sql = _sql + "cid from att_" + com_name.Text+" where xmbh=@xmbh and sfzh=@sfzh order by sortid";
  48.     paras.Clear();
  49.     paras.Add(new SqlParameter("xmbh", _xmbh));
  50.     paras.Add(new SqlParameter("sfzh", _sfzh));
  51.     rv = dal.GetDataSet(_sql, paras);
  52.     if (dal.ErrorMessage != "")
  53.     {
  54.         return;
  55.     }
  56.     topnavs.Visible = true;
  57.     ttable.Style["top"] = "37px";
  58.     mtable.Style["top"] = "67px";
  59.     if (dal.RowsCount == 0)
  60.     {
  61.         return;
  62.     }
  63.     dt = ((DataSet)rv).Tables[0];
  65.     for (int i = 0; i < dt.Rows.Count; i++)
  66.     {
  67.         HtmlTableRow hrow = new HtmlTableRow();
  68.         if (_zwmc == "" || (_bcbz == "true" && _bcsm != ""))
  69.         {
  70.             hrow.Attributes["onclick"] = "setrow(this)";
  71.         }
  72.         hrow.ID = dt.Rows[i]["cid"].ToString();
  73.         for (int j = 0; j < dt.Columns.Count-1; j++)
  74.         {
  75.             HtmlTableCell hcell = new HtmlTableCell();
  76.             hcell.Attributes["style"] = jobj["att_" + com_name.Text][0]["cols"][j]["td_style"].ToString();
  77.             hcell.Attributes["cName"] = jobj["att_" + com_name.Text][0]["cols"][j]["cname"].ToString();
  78.             hcell.Attributes["checkSchema"] = jobj["att_" + com_name.Text][0]["cols"][j]["check"].ToString();
  79.             hcell.InnerText = dt.Rows[i][dt.Columns[j].ToString()].ToString();
  80.             hrow.Cells.Add(hcell);
  81.         }
  82.         mtable.Rows.Add(hrow);
  83.     }
  85. }
  86. [WebMethod(BufferResponse = true)]
  87. public static string saveInfo(string jdata)
  88. {
  89.     Newtonsoft.Json.Linq.JObject jobj = Newtonsoft.Json.Linq.JObject.Parse(jdata);
  90.     string tablename = "";
  91.     string inssql = "";
  92.     string inslist = "";
  93.     string insparas = "";
  94.     string updsql = "";
  95.     string updparas = "";
  96.     ArrayList paras = new ArrayList();
  97.     paras.Clear();
  99.     foreach (KeyValuePair<string, Newtonsoft.Json.Linq.JToken> kvp in jobj)
  100.     {
  101.         string key = kvp.Key.ToString();
  102.         string value = kvp.Value.ToString();
  103.         if (key == "com_name" && (value == "jtcy" || value == "shgx" || value == "jypx" || value == "gzjl"))
  104.         {
  105.             tablename = "att_"+value;
  106.         }
  107.         else
  108.         {
  109.             inslist += key + ",";
  110.             insparas +="@"+ key + ",";
  111.             updparas += string.Format(" {0}=@{1},",key,key);
  112.             paras.Add(new SqlParameter(key, value));
  113.         }
  114.     }
  115.     if (inslist.Length > 1)
  116.     {
  117.         inslist = inslist.Substring(0, inslist.Length - 1);
  118.         insparas = insparas.Substring(0, insparas.Length - 1);
  119.         inssql = string.Format("insert into {0} ({1}) values({2});", tablename, inslist, insparas);
  120.     }
  121.     if (updparas.Length > 1)
  122.     {
  123.         updparas = updparas.Substring(0, updparas.Length - 1);
  124.         updsql = string.Format("update {0} set {1} where cid=@cid;", tablename, updparas);
  125.     }
  126.     string sql = string.Format(" if not exists(select cid from {0} where cid=@cid) begin {1} end else begin {2} end", tablename, inssql, updsql);
  127.    
  128.     CosysJaneCommonAPI.CODAL dal = new CosysJaneCommonAPI.CODAL();
  129.    dal.ExecDbScripts(sql, paras);
  130.    string rv = "{"errcode":0,"errmsg":""}";
  131.    if (dal.ErrorMessage != "")
  132.    {
  133.        rv="{"errcode":2,"errmsg":""+String2Json(dal.ErrorMessage)+""}";
  134.    }
  135.    else if (dal.RowsCount == 0)
  136.    {
  137.        rv = "{"errcode":1,"errmsg":"" + String2Json("未成功更新记录。") + ""}";
  138.    }
  139.     return rv;
  140. }
  141. [WebMethod(BufferResponse = true)]
  142. public static string deleteInfo(string jdata)
  143. {
  144.     Newtonsoft.Json.Linq.JObject jobj = Newtonsoft.Json.Linq.JObject.Parse(jdata);
  145.     string tablename = "";
  146.     string updsql = "";
  147.     string updparas = "";
  148.     ArrayList paras = new ArrayList();
  149.     paras.Clear();
  151.     foreach (KeyValuePair<string, Newtonsoft.Json.Linq.JToken> kvp in jobj)
  152.     {
  153.         string key = kvp.Key.ToString();
  154.         string value = kvp.Value.ToString();
  155.         if (key == "com_name" && (value == "jtcy" || value == "shgx"|| value == "jypx" || value == "gzjl"))
  156.         {
  157.             tablename = "att_"+value;
  158.         }
  159.         else if(key=="cid")
  160.         {
  161.             paras.Add(new SqlParameter(key, value));
  162.         }
  163.     }
  164.     updsql = string.Format("delete from {0} where cid=@cid;", tablename);
  166.     CosysJaneCommonAPI.CODAL dal = new CosysJaneCommonAPI.CODAL();
  167.     dal.ExecDbScripts(updsql, paras);
  168.     string rv = "{"errcode":0,"errmsg":""}";
  169.     if (dal.ErrorMessage != "")
  170.     {
  171.         rv = "{"errcode":2,"errmsg":"" + String2Json(dal.ErrorMessage) +  ""}";
  172.     }
  173.     else if (dal.RowsCount == 0)
  174.     {
  175.         rv = "{"errcode":1,"errmsg":"" + String2Json("未成功更新记录。") + ""}";
  176.     }
  177.     return rv;
  178. }
  180. private static string String2Json(String s)
  181. {
  183.     StringBuilder sb = new StringBuilder();
  185.     for (int i = 0; i < s.Length; i++)
  186.     {
  188.         char c = s.ToCharArray()[i];
  190.         switch (c)
  191.         {
  193.             case '"':
  195.                 sb.Append("\\""); break;
  197.             case '\\':
  199.                 sb.Append("\\\"); break;
  201.             case '/':
  203.                 sb.Append("\\/"); break;
  205.             case '\b':
  207.                 sb.Append("\\b"); break;
  209.             case '\f':
  211.                 sb.Append("\\f"); break;
  213.             case '\n':
  215.                 sb.Append("\\n"); break;
  217.             case '\r':
  219.                 sb.Append("\\r"); break;
  221.             case '\t':
  223.                 sb.Append("\\t"); break;
  225.             default:
  227.                 if ((c >= 0 && c <= 31) || c == 127)//在ASCⅡ码中，第0～31号及第127号(共33个)是控制字符或通讯专用字符
  228.                 {
  232.                 }
  234.                 else
  235.                 {
  237.                     sb.Append(c);
  239.                 }
  241.                 break;
  243.         }
  245.     }
  247.     return sb.ToString();
  249. }
  251. </script>
复制代码
  小结

由于一对多录入的特点，我们接纳了嵌入 iframe 元素的方法，然后传递参数名称 com_name，以决定利用Json配置文件中的节点信息 。
正常的情况下，我们还会有父项的录入界面，并提供有生存按钮，因此点击生存按钮时客户端大概还需要对 iframe 里的表格数据再举行一次校验或处理，访问iframe里的元素方法紧张通过iframe.contentWindow.document 处理，比如如下代码：
  1.     var atts = new Array();
  2.     atts.push('att_jypx');
  3.     function before_submit() {
  4.         for (var i = 0; i < atts.length; i++) {
  5.             var p_att = document.getElementById('p_' + atts[i]);
  6.             if (p_att == undefined) { continue; }
  7.             var p_att_ifr = document.getElementById('x_p_' + atts[i]);
  8.             var l_att = document.getElementById('l_' + atts[i]);
  9.             if (p_att_ifr.contentWindow.document.getElementById('mtable').rows.length == 0) {
  10.                 alert(l_att.innerText + "的内容需要添加。");
  11.                 return false;
  12.             }
  14.             if (p_att_ifr.contentWindow.validall(l_att.innerText+"内容的") == false) {
  15.                 return false;
  16.             }
  17.             if (p_att_ifr.contentWindow.validsave('')== false) {
  18.                 alert(l_att.innerText + "的内容有尚未或正在保存的内容，请保存后再进行提交。");
  19.                 return false;
  20.             }
  21.         }
  22.         return true;
  23.     }
复制代码
  ​别的工具栏按钮的图片文件，我们可以按照本身的实际需要举行替换。本代码仅供您参考利用，感谢您的阅读，希望本文可以或许对您有所帮助。
  



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

梦见你的名字

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表