C#結(jié)合JS實(shí)現(xiàn)HtmlTable動(dòng)態(tài)添加行并保存到數(shù)據(jù)庫(kù)的流程步驟
更新時(shí)間：2024年12月31日 10:32:17 作者：初九之潛龍勿用
在 Web 應(yīng)用項(xiàng)目中,實(shí)現(xiàn)一對(duì)多錄入的數(shù)據(jù)管理功能是一項(xiàng)常見的應(yīng)用,因此可以實(shí)現(xiàn)一個(gè)相對(duì)輕量化的設(shè)計(jì)實(shí)現(xiàn)表格的錄入,為保證功能的可用性、界面友好性,本文給大家介紹了C#結(jié)合JS實(shí)現(xiàn)HtmlTable動(dòng)態(tài)添加行并保存到數(shù)據(jù)庫(kù),需要的朋友可以參考下
需求
在 Web 應(yīng)用項(xiàng)目中，實(shí)現(xiàn)一對(duì)多錄入的數(shù)據(jù)管理功能是一項(xiàng)常見的應(yīng)用。因此可以實(shí)現(xiàn)一個(gè)相對(duì)輕量化的設(shè)計(jì)實(shí)現(xiàn)表格的錄入，為保證功能的可用性、界面友好性，總體的需求如下：
1、數(shù)據(jù)網(wǎng)格可以動(dòng)態(tài)的添加行，行可以提供輸入框、選擇框的控件進(jìn)行錄入。
2、數(shù)據(jù)網(wǎng)格可以刪除選中的行。
3、數(shù)據(jù)網(wǎng)格可以上下移動(dòng)選中的行重新進(jìn)行排序。
4、可以實(shí)現(xiàn)數(shù)據(jù)的有效性驗(yàn)證功能（如必填寫、位數(shù)限制、類型限制等）。
5、需要對(duì)輸入的文字過濾和屏蔽HTML標(biāo)記等危險(xiǎn)內(nèi)容。
6、添加新行前判斷已有行的有效性，對(duì)于未校驗(yàn)通過的暫不允許添加新行。
7、對(duì)于修改中的、保存時(shí)的、保存后的狀態(tài)有一定的相關(guān)提示信息。
8、數(shù)據(jù)保存實(shí)現(xiàn)動(dòng)態(tài)無刷新。
范例運(yùn)行環(huán)境
操作系統(tǒng)： Windows Server 2019 DataCenter
數(shù)據(jù)庫(kù)：Microsoft SQL Server 2016
.net版本： .netFramework4.0 或以上
開發(fā)工具及相關(guān)技術(shù)：VS2019 C# 、Jquery 、Json、Javascript
準(zhǔn)備數(shù)據(jù)源
數(shù)據(jù)表設(shè)計(jì)
我們?cè)?MS SQL Server 創(chuàng)建 att_jypx（教育培訓(xùn)經(jīng)歷表），其結(jié)構(gòu)如下表：
| 序號(hào) | 字段名 | 類型 | 說明 |
|---|---|---|---|
| 1 | cid | uniqueidentifier | 行唯一標(biāo)識(shí)，唯一鍵 |
| 2 | xmbh | varchar(20) | 外鍵父項(xiàng)，指項(xiàng)目編號(hào) |
| 3 | sfzh | nvarchar(18) | 外鍵父項(xiàng)，指身份證號(hào) |
| 4 | nf1 | nvarchar(4) | 起始年份 |
| 5 | yf1 | nvarchar(2) | 起始月份 |
| 6 | nf2 | nvarchar(4) | 截止年份 |
| 7 | yf2 | nvarchar(2) | 截止月份 |
| 8 | xxmc | nvarchar(100) | 學(xué)校名稱 |
| 9 | zy | nvarchar(50) | 所學(xué)專業(yè) |
| 10 | xl | nvarchar(10) | 學(xué)歷 |
| 11 | byzlb | nvarchar(50) | 畢業(yè)證類別 |
| 12 | xh | int | 排序號(hào) |
執(zhí)行如下 創(chuàng)建表的 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
數(shù)據(jù)表的其它說明如下：
1、CID字段為GUID類型，可用于標(biāo)識(shí) HtmlTable 的 Row 行對(duì)象的 ID 并用于存儲(chǔ)。
2、xmbh 字段和 sfzh 字段是引用的外鍵，我們?yōu)榱搜菔痉奖慵僭O(shè)為 項(xiàng)目編號(hào) 為‘001’、身份證號(hào)為‘120102’
3、xh 為排序記錄順序所用。
以上的所述字段均不參與 HtmlTable 表格內(nèi)容的呈現(xiàn)，以降低數(shù)據(jù)包的容量，只參與外鍵操作。
UI及表結(jié)構(gòu)Json配置
對(duì)于 HtmlTable 表格內(nèi)容的呈現(xiàn)、數(shù)據(jù)結(jié)構(gòu)及數(shù)據(jù)驗(yàn)證的校驗(yàn)，我們將使用Json文件進(jìn)行配置，配置說明如下：
| 序號(hào) | 項(xiàng) | 類型 | 說明 |
|---|---|---|---|
| 1 | maxRowCount | 字符 | 允許添加的最大行數(shù) |
| 2 | mtable_style | 字符 | 主體編輯HtmlTable的風(fēng)格 |
| 3 | ttable_style | 字符 | 標(biāo)題HtmlTable的風(fēng)格 |
| 4 | cols | 數(shù)組 | 列數(shù)組定義變量，以下5到12均為 cols 所包含每一數(shù)組元素對(duì)象的屬性 |
| 5 | fname | 字符 | 字段名 |
| 6 | cname | 字符 | 字段中文名或說明 |
| 7 | len | 數(shù)字 | 字段長(zhǎng)度 |
| 8 | td_style | 字符 | HtmlTabelCell 單元格的風(fēng)格 |
| 9 | ctl_style | 字符 | 單元格中輸入或選擇控件的風(fēng)格 |
| 10 | input | 字符 | 可輸入 text 和 select，分別對(duì)應(yīng)輸入框和選擇框 |
| 11 | list | 字符 | 用于select選擇框的選項(xiàng)設(shè)置，各選項(xiàng)間以 “|” 進(jìn)行分隔 |
| 12 | check | 字符 | 用于數(shù)據(jù)校驗(yàn)方案設(shè)置，如果設(shè)置請(qǐng)參考文章C#結(jié)合JavaScript對(duì)Web控件進(jìn)行數(shù)據(jù)輸入驗(yàn)證的實(shí)現(xiàn)方法_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": "學(xué)歷",
"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": "所學(xué)專業(yè)",
"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": "畢業(yè)證類別",
"len":50,
"td_style":"width:160px",
"ctl_style":"width:155px;border-radius:2px;border-width:1px;",
"input":"select",
"list":"全日制普通高等教育畢業(yè)證|成人高等教育畢業(yè)證|高等教育自學(xué)考試畢業(yè)證|其他",
"check":"notnull"
} ]
}
]
}Json數(shù)據(jù)包提交 配置
Json數(shù)據(jù)包根據(jù)Json配置信息通過服務(wù)端生成，主要包括字段名的項(xiàng)，用于將來提交數(shù)據(jù)時(shí)使用，因?yàn)樘峤坏臄?shù)據(jù)方式仍然是Json數(shù)據(jù)對(duì)象，即Json數(shù)據(jù)包，生成的初始格式如下示例：
{"nf1":"",
"yf1":"",
"nf2":"",
"yf2":"",
"xxmc":"",
"zy":"",
"xmbh":"001",
"sfzh":"120102",
"xh":"",
"cid":"",
"com_name":"jypx"}設(shè)計(jì)實(shí)現(xiàn)
前端UI
前端UI我們主要放置一些中間變量控件，表格元素等，主要元素說明見下表：
| 序號(hào) | 元素Id | 類型 | 說明 |
|---|---|---|---|
| 1 | curid | TextBox | 用于記錄當(dāng)前點(diǎn)行的ID |
| 2 | pjson | TextBox | 用于存儲(chǔ)Json配置數(shù)據(jù) |
| 3 | djson | TextBox | 用于存儲(chǔ)Json提交數(shù)據(jù)包 |
| 4 | ttable | HtmlTable | 標(biāo)題列表格，用于固定顯示表頭 |
| 5 | mtable | HtmlTable | 主編輯表格對(duì)象 |
| 6 | topnavs | Div | 一組固定于頂端的工具欄對(duì)象層，包括新增、刪除、上移、下移、保存按鈕 |
示例代碼如下：
<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 腳本實(shí)現(xiàn)表格編輯操作及通過Ajax與服務(wù)器方法通信，并保存數(shù)據(jù)的功能，主要方法說明見下表：
| 序號(hào) | 方法名稱 | 參數(shù) | 說明 |
|---|---|---|---|
| 1 | simplecheck | chkobj：?jiǎn)卧駥?duì)象 _chkvalue：?jiǎn)卧窬庉嫷闹?/p> allowAlert：是否允許彈出提示 etip：彈出提示的擴(kuò)展前綴字串 | 本方法用于數(shù)據(jù)有效性的校驗(yàn) |
| 2 | swarp | mId：當(dāng)前行的ID stype:移動(dòng)方向，1上移，2下移 | 用于對(duì)選中行的移動(dòng)排序操作 |
| 3 | chnRowSelColor | rowobj：當(dāng)前行對(duì)象 | 用于高亮顯示選中行的顏色，并同時(shí)將當(dāng)前行設(shè)置為可編輯狀態(tài) |
| 4 | tojsonstr | str:輸入的值 | 對(duì)輸入的值進(jìn)行安全檢測(cè)，并移除HTML標(biāo)記，對(duì)單引號(hào)雙引號(hào)做特殊處理，以保證JSON字符串傳遞的字符合法性 |
| 5 | saveall | 保存所有行記錄并提交數(shù)據(jù)庫(kù)操作 | |
| 6 | delinfo | 刪除當(dāng)前選中的行并提交數(shù)據(jù)庫(kù)操作 | |
| 7 | validall | extip：附加的前綴性提示 | 保存前對(duì)所有行進(jìn)行數(shù)據(jù)有效性校驗(yàn) |
| 8 | validchange | obj:當(dāng)前編輯的控件元素 | 提示用戶當(dāng)前正修改哪個(gè)控件元素的值 |
| 9 | validsave | extip：附加的前綴性提示 | 用于檢驗(yàn)是否正有保存的記錄 |
| 10 | addRow | 添加一個(gè)新行并提交到數(shù)據(jù)庫(kù)操作 | |
| 11 | gGuid | 用于增加新行時(shí)生成一個(gè)GUID字符串 | |
| 12 | ScrollToBottom | 用于增加新行時(shí)自動(dòng)滾動(dòng)到頁(yè)面底部 |
完整示例代碼如下：
<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 + '需要填寫內(nèi)容！'; break; case curSchema == 'number': check_result = isNumber(_chkvalue); curErrmsg = _cName + ' 輸入的數(shù)值不合理，請(qǐng)核對(duì)！'; break; case curSchema == 'bnumber': check_result = isBNumber(_chkvalue); curErrmsg = _cName + ' 輸入的數(shù)值應(yīng)為>=0的正數(shù)，請(qǐng)核對(duì)！'; break; case curSchema == 'snumber': check_result = isSNumber(_chkvalue); curErrmsg = _cName + ' 輸入的數(shù)值應(yīng)為<0的負(fù)數(shù)，請(qǐng)核對(duì)！'; break; case curSchema == 'date': check_result = isDate(_chkvalue, _cName); check_errid = 'date'; check_errmsg = (check_result ? '' : _cName + ' 輸入的日期不合理，請(qǐng)核對(duì)！'); 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 + ' 輸入的最小位數(shù)參數(shù)不合理，請(qǐng)與軟件供應(yīng)商聯(lián)系！'; } else { check_result = (_objlength < _slen ? false : true); curErrmsg = _cName + ' 的內(nèi)容要求最小輸入' + _slen + '位，請(qǐng)核對(duì)！'; } 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 + ' 輸入的最大位數(shù)參數(shù)不合理，請(qǐng)與軟件供應(yīng)商聯(lián)系！'; } else { check_result = (_objlength > _slen ? false : true); curErrmsg = _cName + ' 最大允許輸入' + _slen + '位，請(qǐng)核對(duì)！'; } 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 + ' 輸入的限制位數(shù)參數(shù)不合理，請(qǐng)與軟件供應(yīng)商聯(lián)系！'; } else { check_result = (_objlength != _slen ? false : true); curErrmsg = _cName + ' 的內(nèi)容輸入長(zhǎng)度只能是' + _slen + '位，請(qǐng)核對(duì)！'; } break; case curSchema == 'time': check_result = validRegs(_chkvalue, /^\d{1,2}:\d{1,2}:\d{1,2}$/); curErrmsg = _cName + ' 輸入的時(shí)間不合理，請(qǐng)核對(duì)。'; break; case curSchema == 'alpha': check_result = isAlpha(_chkvalue); curErrmsg = _cName + ' 只能輸入的數(shù)字、字母和下劃線，請(qǐng)核對(duì)。'; break; case curSchema == 'mail': check_result = validRegs(_chkvalue, /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/); curErrmsg = _cName + ' 輸入的郵件地址不合理，請(qǐng)核對(duì)。'; break; case curSchema == 'phone': check_result = validRegs(_chkvalue, /([a-zA-Z0-9\.-\u4e00-\u9fa5]{8,})$/); curErrmsg = _cName + ' 輸入的電話號(hào)碼不合理，請(qǐng)核對(duì)。'; break; case curSchema == 'mobile': check_result = validRegs(_chkvalue, /^1(3[0-9]|5[012356789]|8[056789])\d{8}$/); curErrmsg = _cName + ' 輸入的手機(jī)號(hào)碼不合理，請(qǐng)核對(duì)。'; break; case curSchema == 'money': check_result = validRegs(_chkvalue, /^\d+(\.\d+)?$/); curErrmsg = _cName + ' 輸入的內(nèi)容不符合貨幣類型的要求，請(qǐng)核對(duì)。'; break; case curSchema == 'zip': check_result = validRegs(_chkvalue, /^[1-9]\d{5}$/); curErrmsg = _cName + ' 輸入的郵政編碼不合理，請(qǐng)核對(duì)。'; break; case curSchema == 'int': check_result = validRegs(_chkvalue, /^[-\+]?\d+$/); curErrmsg = _cName + ' 需要輸入一個(gè)整數(shù)，請(qǐng)核對(duì)。'; break; case curSchema == 'en': check_result = validRegs(_chkvalue, /^[A-Za-z]+$/); curErrmsg = _cName + ' 只能輸入英文大小寫字母，請(qǐng)核對(duì)。'; break; case curSchema == 'cn': check_result = validRegs(_chkvalue, /^[\u0391-\uFFE5]+$/); curErrmsg = _cName + ' 只能輸入中文，請(qǐng)核對(duì)。'; break; case curSchema == 'url': check_result = validRegs(_chkvalue, /([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/); curErrmsg = _cName + ' 輸入的網(wǎng)址不合理，請(qǐng)核對(duì)。'; 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('', '身份證號(hào)碼位數(shù)不對(duì)!', '身份證號(hào)碼出生日期超出范圍或含有非法字符!', '身份證號(hào)碼校驗(yàn)錯(cuò)誤!', '身份證地區(qū)非法!', '');
if (_idcard == '') { return Errors[5]; }
var area = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '內(nèi)蒙古', 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: '臺(tái)灣', 81: '香港', 82: '澳門', 91: '國(guó)外' }
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: '內(nèi)蒙古', 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: '臺(tái)灣', 81: '香港', 82: '澳門', 91: '國(guó)外' }
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:非法地區(qū)'; 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:非法證號(hào)';
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+'日期輸入不正確！日期部分應(yīng)為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]+'，年月日部分必須輸入數(shù)字！'); 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+'年月日部分輸入的數(shù)字不合理，請(qǐng)核對(duì)！');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+'，天數(shù)輸入范圍不合理！'); return false;}if(_month==2){ if(((_year%4==0)&&(_year%100!=0))||(_year%400==0)){ if(_day>29){if(!notip) alert(cname+'月份：'+_month+'，天數(shù)輸入范圍不合理！');return false; }}else{ if(_day>28){if(!notip) alert(cname+'月份：'+_month+'，天數(shù)輸入范圍不合理！');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('同步更新簡(jiǎn)歷信息失敗，請(qǐng)點(diǎn)擊修改簡(jiǎn)歷按鈕提交修改。' + 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 = "請(qǐng)?zhí)砑有泻笤賵?zhí)行保存操作...";
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('刪除當(dāng)前行成功！');
}
} catch (ss2_e) {
ErrorMessage = (ss2_e);
alert(ErrorMessage);
}
}
function delinfo() {
var curid = document.getElementById('curid').value;
if (curid == "") {
alert('請(qǐng)選中記錄后再執(zhí)行刪除操作。');
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("本內(nèi)容最多允許添加" + 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的自定義開發(fā)的擴(kuò)展應(yīng)用庫(kù)，進(jìn)行引用，本庫(kù)用于調(diào)用服務(wù)器靜態(tài)方法等功能使用。
C# 服務(wù)端操作
| 序號(hào) | 方法名 | 返回類型 | 說明 |
|---|---|---|---|
| 1 | public void InitPage() | void | 主要用于提取已有數(shù)據(jù)表數(shù)據(jù)并顯示到主編輯表 mtable 的數(shù)據(jù)行，如何提取數(shù)據(jù)請(qǐng)參照文章C#利用IDbDataAdapter/IDataReader實(shí)現(xiàn)通用數(shù)據(jù)集獲取_C#教程_腳本之家 |
| 2 | public static string saveInfo(string jdata) | string | 保存行信息到數(shù)據(jù)表，參數(shù)為提交的Json數(shù)據(jù)包,保存數(shù)據(jù)操作請(qǐng)參照文章C#利用IDbCommand實(shí)現(xiàn)通用數(shù)據(jù)庫(kù)腳本執(zhí)行程序_C#教程_腳本之家 |
| 3 | public static string deleteInfo(string jdata) | string | 刪除行信息到數(shù)據(jù)表，參數(shù)為提交的Json數(shù)據(jù)包，保存數(shù)據(jù)庫(kù)操作請(qǐng)參照文章C#利用IDbCommand實(shí)現(xiàn)通用數(shù)據(jù)庫(kù)腳本執(zhí)行程序_C#教程_腳本之家 |
| 4 | private static string String2Json(String s) | string | 規(guī)范字符串，以符合Json字符串要求 |
實(shí)現(xiàn)示例代碼如下：
<%@ 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號(hào)及第127號(hào)(共33個(gè))是控制字符或通訊專用字符
{
}
else
{
sb.Append(c);
}
break;
}
}
return sb.ToString();
}
</script>小結(jié)
由于一對(duì)多錄入的特點(diǎn)，我們采用了嵌入 iframe 元素的方法，然后傳遞參數(shù)名稱 com_name，以決定使用Json配置文件中的節(jié)點(diǎn)信息 。
正常的情況下，我們還會(huì)有父項(xiàng)的錄入界面，并提供有保存按鈕，因此點(diǎn)擊保存按鈕時(shí)客戶端可能還需要對(duì) iframe 里的表格數(shù)據(jù)再進(jìn)行一次校驗(yàn)或處理，訪問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 + "的內(nèi)容需要添加。");
return false;
}
if (p_att_ifr.contentWindow.validall(l_att.innerText+"內(nèi)容的") == false) {
return false;
}
if (p_att_ifr.contentWindow.validsave('')== false) {
alert(l_att.innerText + "的內(nèi)容有尚未或正在保存的內(nèi)容，請(qǐng)保存后再進(jìn)行提交。");
return false;
}
}
return true;
}另外工具欄按鈕的圖片文件，我們可以按照自己的實(shí)際需要進(jìn)行替換。
以上就是C#結(jié)合JS實(shí)現(xiàn)HtmlTable動(dòng)態(tài)添加行并保存到數(shù)據(jù)庫(kù)的流程步驟的詳細(xì)內(nèi)容，更多關(guān)于C# JS實(shí)現(xiàn)HtmlTable動(dòng)態(tài)添加并保存的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解C#中的泛型以及編程中使用泛型的優(yōu)點(diǎn)
這篇文章主要介紹了詳解C#中的泛型以及編程中使用泛型的優(yōu)點(diǎn),對(duì)泛型的支持時(shí)C#語言中的重要特性,需要的朋友可以參考下2016-02-02
C#中三種Timer計(jì)時(shí)器的詳細(xì)用法
這篇文章介紹了C#中三種Timer計(jì)時(shí)器的詳細(xì)用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
本文主要介紹了C#9.0中init訪問器的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
在C#中,異步操作可以提高程序的性能和響應(yīng)能力,本文主要介紹了C#實(shí)現(xiàn)異步操作的幾種方式,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
WinForm實(shí)現(xiàn)鼠標(biāo)拖動(dòng)控件跟隨效果
這篇文章主要為大家詳細(xì)介紹了WinForm實(shí)現(xiàn)鼠標(biāo)拖動(dòng)控件跟隨效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
c# textbox的滾動(dòng)條總是指向最底端的簡(jiǎn)單解決方法
這篇文章主要介紹了c# textbox的滾動(dòng)條總是指向最底端的簡(jiǎn)單解決方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了C#二維數(shù)組基本用法,以實(shí)例形式分析了C#中二維數(shù)組的定義、初始化、遍歷及打印等用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了C#根據(jù)身份證號(hào)碼判斷出生日期和性別的方法，感興趣的小伙伴們可以參考一下2016-08-08
C#實(shí)現(xiàn)托盤程序并禁止多個(gè)應(yīng)用實(shí)例運(yùn)行的方法
這篇文章主要介紹了C#實(shí)現(xiàn)托盤程序并禁止多個(gè)應(yīng)用實(shí)例運(yùn)行的方法,涉及C#中NotifyIcon控件的使用及設(shè)置標(biāo)志位控制程序只運(yùn)行一個(gè)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
c# 實(shí)現(xiàn)RSA非對(duì)稱加密算法
RSA解決了對(duì)稱加密的一個(gè)不足，比如AES算法加密和解密時(shí)使用的是同一個(gè)秘鑰，因此這個(gè)秘鑰不能公開，因此對(duì)于需要公開秘鑰的場(chǎng)合，我們需要在加密和解密過程中使用不同的秘鑰，加密使用的公鑰可以公開，解密使用的私鑰要保密，這就是非對(duì)稱加密的好處。2021-06-06