Handsontable与SQL数据库（一）
Handsontable与SQL数据库
- 记录一下我的Handsontable开发过程
-
- 实例说明
- SQL数据库的建立
- Handsontable页面的建立
自定义目录标题)
记录一下我的Handsontable开发过程
一直以来，我都非常希望在网页中能实现像EXCEL一样输入数据，尽管目前大多数的网站都是采用的导入EXCEL模板，将EXCEL中的数据插入到SQL数据库中，但有时对操作者来说，并不是一件很方便，很直观的方式，有时遇到对数据校验比较复杂的情况时，还需要对EXCEL模板设置宏，无疑增加了开发者对EXCEL宏的运用能力的掌握，而Handsontable的出现，很好地解决了这一问题，下面，就我在工作中遇到的问题，与大家一起来探讨如何实现Handsontable与SQL数据库的操作。
实例说明
研究Handsontable起困缘于我在每学年收录学生的体测素质数据时遇到的问题，由于我所在的学校的学生的体测数据每年都要上报给国家体质素质网，而上报学生的数据量非常大，以往由学生在EXCEL中填报时，由于本人对宏的设置不是十分熟悉，学生录入的数据出现的错误千奇百怪，结果我在上报时，需要反复修改其中的错误数据，弄得我焦头烂额，于是才开始了我的Handsontable学习研究，好了，废话少说，下面开始介绍这个功能的实现过程：
SQL数据库的建立
- SQL数据库的设计 ，4张表；
J_class是班级表，tcsj是从学生的基本信息表，tcsj_0是填报完成的表，tcsj_1是用来更新操作的表,在SQL中运行下面代码可进行表建立和一个存储过程的建立
USE [ceshi]
GO
/****** Object: Table [dbo].[tcsj_1] Script Date: 07/19/2020 17:29:22 /
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tcsj_1](
[id] [int] IDENTITY(1,1) NOT NULL,
[bc] nchar NOT NULL,
[xb] [int] NOT NULL,
[xjh] nvarchar NOT NULL,
[sg] [decimal](3, 0) NULL,
[tz] [decimal](3, 0) NULL,
[fhl] [int] NULL,
[wsm] nvarchar NULL,
[ldty] [int] NULL,
[zwtqq] [int] NULL,
[ybm] [decimal](6, 2) NULL,
[yy] nchar NULL,
[zysl] [decimal](5, 1) NULL,
[yysl] [decimal](5, 1) NULL,
[zyqg] [int] NULL,
[yyqg] [int] NULL,
[zyquan] [int] NULL,
[yyquan] [int] NULL,
CONSTRAINT [PK_tcsj_1] PRIMARY KEY CLUSTERED
(
[id] 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
/ Object: Table [dbo].[tcsj_0] Script Date: 07/19/2020 17:29:22 /
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tcsj_0](
[bc] nchar NOT NULL,
[xb] nchar NOT NULL,
[xjh] nvarchar NOT NULL,
[sg] nvarchar NULL,
[tz] nvarchar NULL,
[fhl] nvarchar NULL,
[wsm] nvarchar NULL,
[ldty] nvarchar NULL,
[zwtqq] nvarchar NULL,
[ybm] nvarchar NULL,
[yy] nvarchar NULL,
[zysl] nvarchar NULL,
[yysl] nvarchar NULL,
[zyqg] nvarchar NULL,
[yyqg] nvarchar NULL,
[zyquan] nvarchar NULL,
[yyquan] nvarchar NULL
) ON [PRIMARY]
GO
/ Object: Table [dbo].[tcsj] Script Date: 07/19/2020 17:29:22 /
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tcsj](
[id] [int] IDENTITY(1,1) NOT NULL,
[年级编号] [int] NOT NULL,
[班级编号] nchar NOT NULL,
[班级名称] nchar NOT NULL,
[bj] nchar NULL,
[学籍号] nvarchar NOT NULL,
[民族代码] [int] NOT NULL,
[姓名] nchar NOT NULL,
[性别] [int] NOT NULL,
[出生日期] [datetime] NOT NULL,
[家庭住址] nvarchar NULL,
CONSTRAINT [PK_tcsj] PRIMARY KEY CLUSTERED
(
[id] 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
/ Object: Table [dbo].[J_class] Script Date: 07/19/2020 17:29:22 /
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[J_class](
[id] [int] IDENTITY(1,1) NOT NULL,
[T_class] nchar NOT NULL,
[class_lb] [int] NULL,
[grad] nchar NOT NULL,
[students] [int] NOT NULL,
[students_cp] [int] NOT NULL,
[teacher] nchar NULL,
[class_mc] [int] NOT NULL,
CONSTRAINT [PK_J_class] PRIMARY KEY CLUSTERED
(
[id] 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
/ Object: StoredProcedure [dbo].[UPtcsj_1] Script Date: 07/19/2020 17:29:21 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
– =============================================
– Author:
– Create date:
– Description:
– =============================================
CREATE PROCEDURE [dbo].[UPtcsj_1]
@bc NCHAR(10),
@xb int
AS
BEGIN
Declare @rs int;/定义全局变量班次/
select @rs=COUNT(xb) from tcsj_1 where bc=@bc and xb=@xb
if @rs>0
begin
UPDATE tcsj_1
SET sg=b.sg,tz=b.tz,fhl=b.fhl,wsm=b.wsm,ldty=b.ldty,zwtqq=b.zwtqq,ybm=b.ybm,yy=b.yy,zysl=b.zysl,yysl=b.yysl,zyqg=b.zyqg,yyqg=b.yyqg,zyquan=b.zyquan,yyquan=b.yyquan
FROM tcsj_0 as b
WHERE tcsj_1.xjh=b.xjh
end
else
begin
insert into tcsj_1 select * from tcsj_0 where bc=@bc and xb=@xb
end
delete from tcsj_0 where bc=@bc and xb=@xb
END
GO`
上面完成了数据库的建立，下面进入到C#开发中。
Handsontable页面的建立
tcsj.aspx页面的完整代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tcsj.aspx.cs" Inherits="handsontable_tcsj" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type""/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"/>
<link rel="stylesheet" media="screen" href="css/samples.css"/>
<link rel="stylesheet" type="text/css" href="../dist/handsontable.full.min.css"/>
<link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css"/>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
<script src="../dist/handsontable.my.js"></script>
<style>
#exampleConsole{margin:0 auto;width:300px;height:25px;
text-align:center;text-shadow;color:red;font-size:larger
}
</style>
<title>体测数据上报</title>
</head>
<body>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">选择班次与性别进行录入</a>
<label id="ljs" style="display:none"></label><label id="hangs" style="display:none"></label>
</div>
<div style="text-align:center"> <h2>学生体测素质填报表</h2> <span class="auto-style2"><strong><em>程序设计：周高飞</em></strong> 358276009@qq.com</span></div>
<div id="hot11"></div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder"></div></div>
<div class="weui-flex__item"><div class="placeholder"> <button id="export-string" class="weui-btn weui-btn_mini weui-btn_primary" style="display:none"><i id="jiazai"></i>保存数据</button></div></div>
<div class="weui-flex__item"><div class="placeholder"><button id="export-csv" class="weui-btn weui-btn_mini weui-btn_primary" style="display:none"><i id="jiazai0"></i>完成上传</button></div></div>
<div class="weui-flex__item"><div class="placeholder"></div></div>
</div>
<div id="exampleConsole"></div>
<script type="text/javascript">
var hotElement = document.querySelector('#hot11');
var _sg = function (value, callback) {
setTimeout(function () {
if (value > 80 && value < 200) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _tz = function (value, callback) {
setTimeout(function () {
if (value > 30 && value < 100) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _fhl = function (value, callback) {
setTimeout(function () {
if (value > 499 && value < 10000) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _wsm = function (value, callback) {
setTimeout(function () {
if (value > 5.0 && value < 20.0) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _zysl = function (value, callback) {
setTimeout(function () {
if (value >= 3.0 && value <= 5.3) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _zyqg = function (value, callback) {
setTimeout(function () {
if (value == 0 || value == 1 || value == 2 || value == 3 || value == 9) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _zyquan = function (value, callback) {
setTimeout(function () {
if (value == 0 || value == 1 || value == 2 || value == -1 || value == 9) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _ldty = function (value, callback) {
setTimeout(function () {
if (value > 50 && value < 400) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _zwtqq = function (value, callback) {
setTimeout(function () {
if (value > -30 && value < 40) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _ytxs = function (value, callback) {
setTimeout(function () {
if (value >= 0 && value < 100) {
callback(true);
}
else {
callback(false);
}
}, 10);
};
var _bbmyqm = function (value, callback) {
setTimeout(function () {
if (/^\d+(\.\d{1,2})?$/.test(value)) {//判断是否为2位小数点或整数;
try {
var newval = value.toString().split('.');
if ((newval[1]).substr(0, 1) < 6 && (newval[0]).length == 1 && (newval[0]).substr(0, 1) > 2) {
callback(true);
}
else {
callback(false);
}
}
catch (err) {
callback(false);
}
}
else {
callback(false);
}
}, 10);
};
var hotSettings={
startRows: 13,
colHeaders: ['姓名', '学籍号', '性别', '身高', '体重', '肺活量', '50米', '立定跳远', '坐位体前屈', '1000米/800米', '引体向上/仰卧起坐', '左眼裸视', '右眼裸视', '左眼屈光', '右眼屈光', '左眼串镜', '右眼串镜'], //
rowHeaders: true,
//colHeaders: true,
minSpareRows: 0,
columns: [
{ data: 'xm', readOnly: true },
{ data: 'xjh', readOnly: true },
{ data: 'xb', readOnly: true },
{data: 'sg',type: 'numeric',validator: _sg,allowInvalid: false},
{data: 'tz',type: 'numeric',validator: _tz,allowInvalid: false},
{data: 'fhl',type: 'numeric',validator: _fhl,allowInvalid: false},
{data: 'wsm',type: 'numeric',numericFormat:{pattern: '0.0'},validator: _wsm,allowInvalid: false},
{data: 'ldty', type: 'numeric',validator: _ldty,allowInvalid: false},
{ data: 'zwtqq', validator: _zwtqq, allowInvalid: false },
{ data: 'ybm', type: 'numeric', numericFormat: { pattern: '0.00' }, validator: _bbmyqm, allowInvalid: false },
{ data: 'yy', type: 'numeric', validator: _ytxs, allowInvalid: false },
{ data: 'zysl', type: 'numeric', numericFormat: { pattern: '0.0' }, validator: _zysl, allowInvalid: false },
{ data: 'yysl', type: 'numeric', numericFormat: { pattern: '0.0' }, validator: _zysl, allowInvalid: false },
{data: 'zyqg',type: 'numeric',validator: _zyqg,allowInvalid: false},
{data: 'yyqg',type: 'numeric',validator: _zyqg,allowInvalid: false},
{data: 'zyquan',type: 'numeric',validator: _zyquan,allowInvalid: false},
{data: 'yyquan',type: 'numeric',validator: _zyquan,allowInvalid: false}
],
stretchH: 'all',
manualRowResize: true,
manualColumnResize: true,
height: 500,
exportFile: true
}
var hot = new Handsontable(hotElement, hotSettings);
document.getElementById("export-csv").addEventListener("click", function (event)
{
var obj0 = document.getElementById("jiazai0");
var tolj = document.getElementById('ljs').innerHTML;
obj0.setAttribute("class", "weui-loading");
ajax('NewUptcsj.ashx?qk=1&bj=' + tolj, 'POST', JSON.stringify({ data: hot.getData() }), function (res) {
var response = res.response;
if (response == 'ok') {
obj0.setAttribute("class", "");
exampleConsole.innerText = "上传成功";
}
else {
obj0.setAttribute("class", "");
exampleConsole.innerText = '上传失败，不允许有空值';
}
setTimeout(function () { exampleConsole.innerText = ""; }, 4000);
});
})
document.getElementById("export-string").addEventListener("click", function (event)
{
var obj1 = document.getElementById("jiazai");
var tolj = document.getElementById('ljs').innerHTML;
obj1.setAttribute("class", "weui-loading");
ajax('NewUptcsj.ashx?qk=0&bj=' + tolj, 'POST', JSON.stringify({ data: hot.getData() }), function (res) {
var response = res.response;
if (response == 'ok') {
obj1.setAttribute("class", "");
exampleConsole.innerText = "成功保存";
}
else {
obj1.setAttribute("class", "");
exampleConsole.innerText = '保存失败';
}
setTimeout(function () { exampleConsole.innerText = ""; }, 4000);
});
})
$('#showPicker').on('click', function () {
weui.picker([
{label: '七年级', value: 7,
children: [
{
label: '男生', value: 1,
children: [<%=bc7%>
]
},
{
label: '女生', value: 2,
children: [<%=bc7%>]
}
]
},
{ label: '八年级', value: 8,
children:[
{
label: '男生', value: 1,
children: [<%=bc8%>
]
},
{
label: '女生', value: 2,
children: [<%=bc8%>]
}
]},
{label: '九年级',value: 9,
children: [{
label: '男生', value: 1,
children: [<%=bc9%>
]
},
{
label: '女生', value: 2,
children: [<%=bc9%>]
}]
}
],
{ className: 'custom-classname',
container: 'body',
defaultValue: [8, 1,1808],
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
var bt1 = document.getElementById("export-csv");
var bt2 = document.getElementById("export-string");
var start =result[2].label;
var lj = result[0].value;
var xb = result[1].value;
var idd = start + "_" + xb;
ajax('gettcsj.ashx?id='+idd, 'GET', '', function (res) {
var data = JSON.parse(res.response);
hot.loadData(data.data);
document.getElementById('ljs').innerHTML = start;
exampleConsole.innerText = "成功加载";// (data.data).length;计算JOSN数据的项数
setTimeout(function () { exampleConsole.innerText = ""; }, 4000);
bt1.style.display = '';
bt2.style.display = '';
});
console.log(result);
}
});
});
</script>
</body>
</html>
tcsj.aspx.cs后台页面代码：
using System;
using System.Data;
using System.Data.SqlClient;
public partial class handsontable_tcsj : System.Web.UI.Page
{
public string bc7, bc8, bc9, drnr;
public int maxrow;
protected void Page_Load(object sender, EventArgs e)
{
bc7 = "";
bc8 = "";
bc9 = "";
DataTable bjs = Sqldo.ExecuteDataTable(Sqldo.CONN_STR, CommandType.Text, "select T_class,grad from J_class");
int bjzs = bjs.Rows.Count;
for (int i = 0; i < bjzs; i++)
{
if (bjs.Rows[i][1].ToString().Trim() == "七年级")
{
bc7 += "{label: '" + bjs.Rows[i][0].ToString().Trim() + "',value:" + bjs.Rows[i][0].ToString().Trim() + "},";
}
if (bjs.Rows[i][1].ToString().Trim() == "八年级")
{
bc8 += "{label: '" + bjs.Rows[i][0].ToString().Trim() + "',value:" + bjs.Rows[i][0].ToString().Trim() + "},";
}
if (bjs.Rows[i][1].ToString().Trim() == "九年级")
{
bc9 += "{label: '" + bjs.Rows[i][0].ToString().Trim() + "',value:" + bjs.Rows[i][0].ToString().Trim() + "},";
}
}
bc7 = bc7.Substring(0, bc7.Length - 1);
bc8 = bc8.Substring(0, bc8.Length - 1);
bc9 = bc9.Substring(0, bc9.Length - 1);
}
}
主要是用来获取班级信息，页面运行后效果如下图：
