当前位置：网站首页>【博主推荐】C＃MVC列表实现增删改查导入导出曲线功能(附源码)
【博主推荐】C＃MVC列表实现增删改查导入导出曲线功能(附源码)
2022-07-06 09:13:00 【xcLeigh】
【博主推荐】C#MVC列表实现增删改查导入导出曲线功能(附源码)
功能晚上且非常好看的列表，实现列表所有功能，整个架构布局非常完善，可以在此基础上开发自己的系统。
实现列表的查询
实现列表数据新增
实现列表数据修改
实现列表数据删除
实现列表数据导入
实现列表数据导出
实现列表数据曲线展示
效果展示
登录展示
- 登录界面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="keywords" content="数据统计">
<meta http-equiv="description" content="数据统计">
<!--让手机端和web端同大小-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="~/layui/css/layui.css" type="text/css" media="all">
<link rel="stylesheet" href="~/Content/login.css" type="text/css">
<script type="text/javascript" src="~/layui/layui.js"></script>
<link rel="shortcut icon" href="~/Imgaes/icon/favicon.ico">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<title> 登录 - 数据统计 </title>
<script type="text/javascript">
if (top.location != window.location) {
top.location = window.location;
}
function login() {
if ($('#UserName').val() == "") {
$('#UserName').focus();
return;
}
if ($('#UserPwd').val() == "") {
$('#UserPwd').focus();
return;
}
$('#form1').submit();
}
document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
login();
}
}
</script>
<style type="text/css">
@@media (min-width: 200px){
.beg-login-bg {
background:white;
height: auto;
}
.beg-login-box {
width: 380px;
margin: 10% auto;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: white;
}
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@@media (min-width: 992px){
.beg-login-bg {
background: rgba(0, 0, 0, 0) url("../../Images/login_home_background.jpg") no-repeat fixed center center / cover ;
background-color: #393D49;
height: auto;
}
.beg-login-box {
width: 450px;
margin: 10% auto;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: white;
}
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@@media (min-width: 1200){
.beg-login-bg {
background: rgba(0, 0, 0, 0) url("../../Images/login_home_background.jpg") no-repeat fixed center center / cover ;
background-color: #393D49;
height: auto;
}
.beg-login-box {
width: 450px;
margin: 10% auto;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: white;
}
}
</style>
</head>
<body class="beg-login-bg" style="overflow:hidden;" oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;">
<div class="beg-login-box">
<header>
<h1 style="color:white;">数据统计
<span id="LoginInfo" style="float:right;font-size:15px;color:white;">@Html.Raw(ViewBag.LoginInfo)</span>
</h1>
</header>
<div class="beg-login-main">
<form id="form1" action="login" class="layui-form" method="post">
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input id="UserName" type="text" lay-verify="required" name="UserName" autocomplete="off" placeholder="这里输入账号" class="layui-input" lay-verType="tips">
</div>
<div class="layui-form-item">
<label class="beg-login-icon">
<i class="layui-icon"></i>
</label>
<input id="UserPwd" type="password" lay-verify="required" name="UserPwd" autocomplete="off" placeholder="这里输入密码" class="layui-input" lay-verType="tips">
</div>
<div class="layui-form-item">
<div class="beg-pull">
<span type="button" onclick="login()" id="login" class="layui-btn layui-btn-normal" style="width:100%; background-color:#090912;" lay-submit lay-filter="formDemo">
登 录
</span>
</div>
</div>
</form>
</div>
<footer></footer>
</div>
</body>
</html>
1.列表查询
- 列表代码
<form class="layui-form">
<div style="background-color:white;width:100%;height:100%;position:absolute; min-width:500px;">
<fieldset class="layui-elem-field" style="margin:0px;">
<legend></legend>@*标题赋值，可为空*@
<div class="layui-field-box">
<div>
<table style="width:100%;">
<tr>
<td>
货物名称:
<div class="layui-input-inline">
<input id="title" name="title" class="layui-input" style="width:166px;" type="text" placeholder="请输入货物名称" autocomplete="off" lay-verify="title">
</div>
类型:
<div class="layui-input-inline" style="width:166px;">
<select id="type" name="type" lay-search="">
<option value="">全部</option>
</select>
</div>
</td>
<td style="width:50px;">
<nobr>
<button class="layui-btn layui-bg-cyan" data-type="parseTable" onclick="showTable(); return false;">搜索</button>
</nobr>
</td>
<td style="width:50px;">
<nobr>
<a class="layui-btn layui-bg-cyan" data-type="parseTable" href="javascript:void(0);" onclick="add('/dsadmin/ygtjOper?czlx=add','新增');">新增</a>
</nobr>
</td>
<td style="width:50px;">
<nobr>
<button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg"><i class="layui-icon"></i>导出Excel</button>
</nobr>
</td>
<td style="width:50px;">
<nobr>
<button type="button" class="layui-btn layui-bg-cyan" id="test3"><i class="layui-icon"></i>导入Excel</button>
</nobr>
</td>
</tr>
</table>
</div>
</div>
</fieldset>
@*列表内容*@
<div style="width:100%;">
<table class="layui-hide" id="test" lay-filter="test" style="width:100%;"></table>
</div>
<script id="barDemo" type="text/html">
<a class="layui-btn layui-btn-xs layui-bg-black" lay-event="chart">曲线</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</div>
</form>
2.列表数据新增
- 新增界面效果图
- 新增功能代码
<form id="form1" class="layui-form" action="/dsadmin/ygtjOper">
<input type="text" value="@ViewBag.czlx" id="czlx" name="czlx" hidden="hidden" />
<div class="layui-form-item">
<table class="tableContent">
<tr>
<th><nobr>货物名称：</nobr></th>
<td>
<input name="TJ_NAME" value="@ViewBag.TJ_NAME" class="layui-input" type="text" placeholder="请输入货物名称" autocomplete="off" lay-verify="required" lay-reqtext="货物名称是必填项，岂能为空？">
</td>
</tr>
<tr>
<th>货物类型：</th>
<td>
<select id="TJ_TYPE" name="TJ_TYPE" lay-search="" lay-verify="required">
<option value="">直接选择或搜索选择</option>
<option value="蔬菜">蔬菜</option>
<option value="水果">水果</option>
<option value="干果">干果</option>
</select>
</td>
</tr>
<tr>
<th>货物数量：</th>
<td>
<input name="TJ_NUM" value="@ViewBag.TJ_NUM" class="layui-input" type="text" placeholder="请输入货物数量" autocomplete="off" lay-verify="required|number" lay-reqtext="货物数量是必填项，岂能为空？">
</td>
</tr>
<tr>
<th>货物已用数量：</th>
<td>
<input name="TJ_USE_NUM" value="@ViewBag.TJ_USE_NUM" class="layui-input" type="text" placeholder="请输入已用数量" autocomplete="off" lay-verify="required|number" lay-reqtext="货物数量是必填项，岂能为空？">
</td>
</tr>
<tr>
<th></th>
<td>
<nobr>
<button class="layui-btn" type="submit" lay-filter="demo1" lay-submit="">立即提交</button>
<button class="layui-btn layui-btn-primary" type="reset">重置</button>
</nobr>
</td>
</tr>
</table>
</div>
</form>
3.列表数据修改
- 修改界面效果图
-修改功能代码
<form id="form1" class="layui-form" action="/dsadmin/ygtjOper">
<input type="text" value="@ViewBag.czlx" id="czlx" name="czlx" hidden="hidden" />
<div class="layui-form-item">
<table class="tableContent">
<tr>
<th><nobr>货物名称：</nobr></th>
<td>
<input name="TJ_NAME" value="@ViewBag.TJ_NAME" class="layui-input" type="text" placeholder="请输入货物名称" autocomplete="off" lay-verify="required" lay-reqtext="货物名称是必填项，岂能为空？">
</td>
</tr>
<tr>
<th>货物类型：</th>
<td>
<select id="TJ_TYPE" name="TJ_TYPE" lay-search="" lay-verify="required">
<option value="">直接选择或搜索选择</option>
<option value="蔬菜">蔬菜</option>
<option value="水果">水果</option>
<option value="干果">干果</option>
</select>
</td>
</tr>
<tr>
<th>货物数量：</th>
<td>
<input name="TJ_NUM" value="@ViewBag.TJ_NUM" class="layui-input" type="text" placeholder="请输入货物数量" autocomplete="off" lay-verify="required|number" lay-reqtext="货物数量是必填项，岂能为空？">
</td>
</tr>
<tr>
<th>货物已用数量：</th>
<td>
<input name="TJ_USE_NUM" value="@ViewBag.TJ_USE_NUM" class="layui-input" type="text" placeholder="请输入已用数量" autocomplete="off" lay-verify="required|number" lay-reqtext="货物数量是必填项，岂能为空？">
</td>
</tr>
<tr>
<th></th>
<td>
<nobr>
<button class="layui-btn" type="submit" lay-filter="demo1" lay-submit="">立即提交</button>
<button class="layui-btn layui-btn-primary" type="reset">重置</button>
</nobr>
</td>
</tr>
</table>
</div>
</form>
4.列表数据删除
- 删除数据效果图
- 删除功能后台代码
string sql = "DELETE SYS_TJ WHERE ID=" + ID;
int num = new OperDataBLL().deleteData(sql);
if (num > 0)
{
return "删除成功!";
}
else
{
return "删除失败!";
}
5.列表数据导入
- 导入格式图
- 导入后台代码
DataTable dt = ds.Tables[0];
for (inti = 0; i < dt.Rows.Count; i++)
{
string TJ_NAME = dt.Rows[i][0].ToString();//名称
string TJ_TYPE = dt.Rows[i][1].ToString();//类型
string TJ_NUM = dt.Rows[i][2].ToString();//数量
string TJ_USE_NUM = dt.Rows[i][3].ToString();//已用数量
try
{
string addsql = "insert into SYS_TJ(ID, TJ_NAME, TJ_TYPE,TJ_NUM, TJ_USE_NUM)";
addsql += "values(SEQ_SYS_TJ_ID.nextval,'" + TJ_NAME + "','" + TJ_TYPE + "'," + TJ_NUM + "," + TJ_USE_NUM + ")";
new OperDataBLL().addData(addsql);
}
catch (Exception e)
{
return Json(new
{
src = "",
name = "", // 获取文件名不含后缀名
msg = "上传出错" + e
});
}
}
return Json(new
{
src = "导入完成",
name = "导入完成", // 获取文件名不含后缀名
msg = "导入完成"
});
6.列表数据导出
- 导出Excel效果图
- 后台代码
string str = GetJsonUtil.getNullJson();
if (!title.Equals(""))
{
title = " and TJ_NAME like '%" + title + "%'";
}
if (!type.Equals(""))
{
type = " and TJ_TYPE = '" + type + "'";
}
try
{
StringBuilder sb = new StringBuilder();
String sql = "select * from SYS_TJ t where 1=1" + title + type;
DataTable dt = new OperDataBLL().getData(sql);
if (dt.Rows.Count > 0)
{
List<FhmxModel> list = DataTableToList.ToList<FhmxModel>(dt);
str = GetJsonUtil.getJson<FhmxModel>(0, "导出成功", list.Count, list);
}
}
catch (Exception)
{
throw;
}
return str;
7.列表数据曲线展示
- 效果图
- View代码
<script type="text/javascript" src="~/scripts/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="~/scripts/highcharts.js"></script>
<script type="text/javascript" src="~/scripts/exporting.js"></script>
<div id="container" style="width:100%;height:100%;position:absolute;"></div>
<script>
var ChartX = [@Html.Raw(ViewBag.ChartX)];
var ChartY1 = [@ViewBag.ChartY1];
var ChartY2 = [@ViewBag.ChartY2];
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
});
window.onload = function () {
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '货物统计分析'
},
subtitle: {
text: 'xcLeigh'
},
xAxis: {
categories: ChartX,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '数量 (斤)'
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '总量',
data: ChartY1
}, {
name: '已用量',
data: ChartY2
}]
});
}
</script>
8.源码下载
附带有详细的使用说明
边栏推荐
- Discriminant model: a discriminant model creation framework log linear model
- Pytorch LSTM实现流程（可视化版本）
- MySQL22-逻辑架构
- Case identification based on pytoch pulmonary infection (using RESNET network structure)
- [leectode 2022.2.13] maximum number of "balloons"
- CSDN问答模块标题推荐任务(一) —— 基本框架的搭建
- MySQL 20 MySQL data directory
- 评估方法的优缺点
- Just remember Balabala
- CSDN Q & a tag skill tree (V) -- cloud native skill tree
猜你喜欢
数据库中间件_Mycat总结
Nanny hand-in-hand teaches you to write Gobang in C language
MySQL29-数据库其它调优策略
Bytetrack: multi object tracking by associating every detection box paper reading notes ()
CSDN问答标签技能树(五) —— 云原生技能树
Record the first JDBC
MySQL22-逻辑架构
UEditor国际化配置，支持中英文切换
Win10: how to modify the priority of dual network cards?
Mysql21 user and permission management
随机推荐
MySQL33-多版本并发控制
Mysql28 database design specification
使用OVF Tool工具从Esxi 6.7中导出虚拟机
February 13, 2022-2-climbing stairs
C language string function summary
[paper reading notes] - cryptographic analysis of short RSA secret exponents
Csdn-nlp: difficulty level classification of blog posts based on skill tree and weak supervised learning (I)
[BMZCTF-pwn] 12-csaw-ctf-2016-quals hungman
第一篇博客
[Li Kou 387] the first unique character in the string
Complete web login process through filter
[unity] simulate jelly effect (with collision) -- tutorial on using jellysprites plug-in
导入 SQL 时出现 Invalid default value for ‘create_time‘ 报错解决方法
虚拟机Ping通主机，主机Ping不通虚拟机
Baidu Encyclopedia data crawling and content classification and recognition
该不会还有人不懂用C语言写扫雷游戏吧
Mysql33 multi version concurrency control
frp内网穿透那些事
评估方法的优缺点
MySQL31-MySQL事务日志