我要评论需求
在 web 应用项目中，实现一对多录入的数据管理功能是一项常见的应用。因此可以实现一个相对轻量化的设计实现表格的录入，为保证功能的可用性、界面友好性，总体的需求如下：
1、数据网格可以动态的添加行，行可以提供输入框、选择框的控件进行录入。
2、数据网格可以删除选中的行。
3、数据网格可以上下移动选中的行重新进行排序。
4、可以实现数据的有效性验证功能（如必填写、位数限制、类型限制等）。
5、需要对输入的文字过滤和屏蔽html标记等危险内容。
6、添加新行前判断已有行的有效性，对于未校验通过的暂不允许添加新行。
7、对于修改中的、保存时的、保存后的状态有一定的相关提示信息。
8、数据保存实现动态无刷新。
范例运行环境
操作系统： windows server 2019 datacenter
数据库：microsoft sql server 2016
.net版本： .netframework4.0 或以上
开发工具及相关技术：vs2019 c# 、jquery 、json、javascript
准备数据源
数据表设计
我们在 ms sql server 创建 att_jypx（教育培训经历表），其结构如下表：
| 序号 | 字段名 | 类型 | 说明 |
|---|---|---|---|
| 1 | cid | uniqueidentifier | 行唯一标识，唯一键 |
| 2 | xmbh | varchar(20) | 外键父项，指项目编号 |
| 3 | sfzh | nvarchar(18) | 外键父项，指身份证号 |
| 4 | nf1 | nvarchar(4) | 起始年份 |
| 5 | yf1 | nvarchar(2) | 起始月份 |
| 6 | nf2 | nvarchar(4) | 截止年份 |
| 7 | yf2 | nvarchar(2) | 截止月份 |
| 8 | xxmc | nvarchar(100) | 学校名称 |
| 9 | zy | nvarchar(50) | 所学专业 |
| 10 | xl | nvarchar(10) | 学历 |
| 11 | byzlb | nvarchar(50) | 毕业证类别 |
| 12 | xh | int | 排序号 |
执行如下 创建表的 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] go alter 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文件进行配置，配置说明如下：
| 序号 | 项 | 类型 | 说明 |
|---|---|---|---|
| 1 | maxrowcount | 字符 | 允许添加的最大行数 |
| 2 | mtable_style | 字符 | 主体编辑htmltable的风格 |
| 3 | ttable_style | 字符 | 标题htmltable的风格 |
| 4 | cols | 数组 | 列数组定义变量，以下5到12均为 cols 所包含每一数组元素对象的属性 |
| 5 | fname | 字符 | 字段名 |
| 6 | cname | 字符 | 字段中文名或说明 |
| 7 | len | 数字 | 字段长度 |
| 8 | td_style | 字符 | htmltabelcell 单元格的风格 |
| 9 | ctl_style | 字符 | 单元格中输入或选择控件的风格 |
| 10 | input | 字符 | 可输入 text 和 select，分别对应输入框和选择框 |
| 11 | list | 字符 | 用于select选择框的选项设置，各选项间以 “|” 进行分隔 |
| 12 | check | 字符 | 用于数据校验方案设置，如果设置请参考文章c#结合javascript对web控件进行数据输入验证的实现方法_c#教程_代码网 |
完全的样例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 | 类型 | 说明 |
|---|---|---|---|
| 1 | curid | textbox | 用于记录当前点行的id |
| 2 | pjson | textbox | 用于存储json配置数据 |
| 3 | djson | textbox | 用于存储json提交数据包 |
| 4 | ttable | htmltable | 标题列表格，用于固定显示表头 |
| 5 | mtable | htmltable | 主编辑表格对象 |
| 6 | topnavs | div | 一组固定于顶端的工具栏对象层，包括新增、删除、上移、下移、保存按钮 |
示例代码如下：
<form runat="server">
<asp:textbox id="cid" style="display:none" runat="server"></asp:textbox>
<asp:textbox id="com_name" style="display:none" runat="server"></asp:textbox>
<asp:textbox id="xmbh" style="display:none" runat="server"></asp:textbox>
<asp:textbox id="sfzh" style="display:none" runat="server"></asp:textbox>
<asp:textbox id="p_acode" runat="server" visible="true" style="display:none" ></asp:textbox>
<asp:textbox id="curid" runat="server" visible="true" style="display:none" ></asp:textbox>
<asp:textbox id="pjson" textmode="multiline" runat="server" visible="true" style="display:none" ></asp:textbox>
<asp:textbox id="djson" textmode="multiline" runat="server" visible="true" style="display:none" ></asp:textbox>
<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;">
<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="" />
<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="" />
<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="" />
<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="" />
<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="" />
<div id="saved" style="margin-left:10px; font-weight:bold; font-size:11pt; color:red; "></div>
</div>
<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">
</table>
<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">
</table>
</form>javascript 脚本
javascript 脚本实现表格编辑操作及通过ajax与服务器方法通信，并保存数据的功能，主要方法说明见下表：
| 序号 | 方法名称 | 参数 | 说明 |
|---|---|---|---|
| 1 | simplecheck | chkobj：单元格对象 _chkvalue：单元格编辑的值 allowalert：是否允许弹出提示 etip：弹出提示的扩展前缀字串 | 本方法用于数据有效性的校验 |
| 2 | swarp | mid：当前行的id stype:移动方向，1上移，2下移 | 用于对选中行的移动排序操作 |
| 3 | chnrowselcolor | rowobj：当前行对象 | 用于高亮显示选中行的颜色，并同时将当前行设置为可编辑状态 |
| 4 | tojsonstr | str:输入的值 | 对输入的值进行安全检测，并移除html标记，对单引号双引号做特殊处理，以保证json字符串传递的字符合法性 |
| 5 | saveall | 保存所有行记录并提交数据库操作 | |
| 6 | delinfo | 删除当前选中的行并提交数据库操作 | |
| 7 | validall | extip：附加的前缀性提示 | 保存前对所有行进行数据有效性校验 |
| 8 | validchange | obj:当前编辑的控件元素 | 提示用户当前正修改哪个控件元素的值 |
| 9 | validsave | extip：附加的前缀性提示 | 用于检验是否正有保存的记录 |
| 10 | addrow | 添加一个新行并提交到数据库操作 | |
| 11 | gguid | 用于增加新行时生成一个guid字符串 | |
| 12 | scrolltobottom | 用于增加新行时自动滚动到页面底部 |
完整示例代码如下：
<script language="javascript">
function 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(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;} }
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.display=='none')||( (obj.offsetheight==0)&&(obj.offsetwidth==0) ) ) return false; if(obj.currentstyle){if(obj.currentstyle['display']=='none') return false;} return true;}
function isfocused(obj){ if( (obj.disabled==false)&&(isvisibled(obj)) ) return true; return false;}
function isdate(str,cname,notip){if(str==''){return true;}
str=str.replace(/\//g,'-');
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; }
function getarrayindex(xarray,find){_rs=-1;for(var j=0;j<xarray.length;j++){if(xarray[j]==find){_rs=j; break; }} return _rs; }
function ctrim(ename){ if(ename==undefined) 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 = isadd==true?rowobj.insertcell(i):rowobj.cells[i];
var ctype = jtcy[i].input;
var innerhtml = "";
var oldvalue = "";
if(isadd==true){
cell1.setattribute("checkschema",jtcy[i].check);
cell1.setattribute("cname",jtcy[i].cname);
}
if (ctype == "text") {
oldvalue = cell1.innertext;
innerhtml = "<input type='" + ctype + "' onchange='validchange(this)' placeholder='" + jtcy[i].cname + "'style='" + jtcy[i].ctl_style + "'/>";
} else if (ctype == "select") {
oldvalue = cell1.innertext;
innerhtml = "<" + ctype + " onchange='validchange(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].value=oldvalue;
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 jtcy=pj[_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() });
}
</script>jquery引用
这是一组基于jquery的自定义开发的扩展应用库，进行引用，本库用于调用服务器静态方法等功能使用。
c# 服务端操作
| 序号 | 方法名 | 返回类型 | 说明 |
|---|---|---|---|
| 1 | public void initpage() | void | 主要用于提取已有数据表数据并显示到主编辑表 mtable 的数据行，如何提取数据请参照文章c#利用idbdataadapter/idatareader实现通用数据集获取_c#教程_代码网 |
| 2 | public static string saveinfo(string jdata) | string | 保存行信息到数据表，参数为提交的json数据包,保存数据操作请参照文章c#利用idbcommand实现通用数据库脚本执行程序_c#教程_代码网 |
| 3 | public static string deleteinfo(string jdata) | string | 删除行信息到数据表，参数为提交的json数据包，保存数据库操作请参照文章c#利用idbcommand实现通用数据库脚本执行程序_c#教程_代码网 |
| 4 | private static string string2json(string s) | string | 规范字符串，以符合json字符串要求 |
实现示例代码如下：
<%@ page language="c#" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<%@ import namespace="system.data"%>
<%@ import namespace="system.data.sqlclient"%>
<%@ import namespace="system.io"%>
<%@ import namespace="system.web.services"%>
<script language="c#" runat="server">
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 xmbh=@xmbh and sfzh=@sfzh 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 (keyvaluepair<string, 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 cid=@cid;", tablename, updparas);
}
string sql = string.format(" if not exists(select cid from {0} where cid=@cid) 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 (keyvaluepair<string, 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(key=="cid")
{
paras.add(new sqlparameter(key, value));
}
}
updsql = string.format("delete from {0} where cid=@cid;", 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ⅱ码中，第0～31号及第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;
}另外工具栏按钮的图片文件，我们可以按照自己的实际需要进行替换。
以上就是c#结合js实现htmltable动态添加行并保存到数据库的流程步骤的详细内容，更多关于c# js实现htmltable动态添加并保存的资料请关注代码网其它相关文章！
发表评论