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

   

（）

目录

需求

（）

效果视频演示

范例运行环境

准备数据源

数据表设计

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（教育培训经历表），其结构如下表：

序号	字段名	类型	说明
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]GOALTER TABLE [dbo].[att_jypx] ADD  CONSTRAINT [DF_att_jypx_cid]  DEFAULT (newid()) FOR [cid]GO

数据表的其它说明如下：

1、CID字段为GUID类型，可用于标识 HtmlTable 的 Row 行对象的 ID 并用于存储。

2、xmbh 字段和 sfzh 字段是引用的外键，我们为了演示方便假设为 项目编号 为‘001’、身份证号为‘120102’

3、xh 为排序记录顺序所用。

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 控件进行数据输入验证》

 完全的样例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	一组固定于顶端的工具栏对象层，包括新增、删除、上移、下移、保存按钮

示例代码如下：

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		用于增加新行时自动滚动到页面底部

完整示例代码如下：

    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 =0的正数，请核对！'; break; case curSchema == 'snumber': check_result = isSNumber(_chkvalue); curErrmsg = _cName + ' 输入的数值应为= 0 && c