在网上看资料,jquery excel插件, 我找到了 ParamQuery grid ,这个插件有免费版也有收费版,我的例子用的是免费的,具体做出了如图:
首先现在 jquery ui 和 ParamQuery grid 两个,网站是
https://paramquery.com/grid
https://jqueryui.com
当然这两个的前提是都用到了 jquery ,因为visual studio(2013或者2017或者2019)里面建立asp.net mvc 项目的时候,就已经包含了jquery 文件,我就不复述了。
然后在asp.net mvc 项目里面加入css和js ,如图
然后就可以开始写代码了,首先看view 代码
@*excel1 view*@
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Excel1</title>
<link href="~/Scripts/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/pqgrid.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/pqgrid.min.js"></script>
</head>
<body>
<div>
<p>
<input type="button" id="btnRead" name="btnRead" value="SAVE" />
</p>
<div id="grid_array"></div>
</div>
<script type="text/javascript">
$(function () {
var data = [['', '', '', '']];
var obj = {};
obj.width = 900;
obj.height = 500;
obj.colModel = [
{ title: "UGRP", width: 100, dataType: "string", align: "right" },
{ title: "MONO", width: 200, dataType: "string", align: "right" },
{ title: "PMONO", width: 200, dataType: "string", align: "right" },
{ title: "PTNO", width: 200, dataType: "string", align: "right" },
{ title: "PTNM", width: 200, dataType: "string", align: "right" },
{ title: "ISFIR", width: 200, dataType: "string", align: "right" },
{ title: "OPNO", width: 200, dataType: "string", align: "right" },
{ title: "OPNM", width: 200, dataType: "string", align: "right" },
{ title: "RESNO", width: 200, dataType: "string", align: "right" },
{ title: "ATP DATE", width: 200, dataType: "string", align: "right" },
{ title: "MOQTY", width: 200, dataType: "string", align: "right" },
{ title: "CTNO", width: 200, dataType: "string", align: "right" },
{ title: "CTNM", width: 200, dataType: "string", align: "right" },
{ title: "PLANT", width: 200, dataType: "string", align: "right" },
{ title: "VERID", width: 200, dataType: "string", align: "right" },
{ title: "PRIO", width: 200, dataType: "string", align: "right" },
{ title: "FIXPLN", width: 200, dataType: "string", align: "right" },
{ title: "FIXORNOT", width: 200, dataType: "string", align: "right" },
{ title: "MOTYPE", width: 200, dataType: "string", align: "right" },
{ title: "MESSAGE", width: 200, dataType: "string", align: "right" },
{ title: "20220101", width: 200, dataType: "string", align: "right" },
{ title: "20220102", width: 200, dataType: "string", align: "right" },
{ title: "20220103", width: 200, dataType: "string", align: "right" },
{ title: "20220104", width: 200, dataType: "string", align: "right" }
];
obj.dataModel = { data: data };
$("#grid_array").pqGrid(obj);
$('#btnRead').click(function () {
var data = $("#grid_array").pqGrid("getData", { dataIndx: ['0', '1', '2'] });
console.info(data);
var ay= JSON.stringify(data);
$.ajax({
type: "POST",
url: "/home/ReadExcel",
data: { 'ay': ay },
success: function (data) {
console.info(data);
},
error: function (jqXHR) {
console.info(jqXHR);
}
});
}); //end click
}); //end page ready
</script>
</body>
</html>
然后是controller代码
public ActionResult Excel1()
{
return View();
}
[HttpPost]
public ActionResult ReadExcel(string ay)
{
string a = ay + " " +"==json file";
return Content(a);
}
写到这里就可以运行代码了, 你就可以在网页上面像编辑excel一样快捷了。
我看官网上收费版的 ParamQuery PRO更加牛逼,不过没钱买,用免费版,动动脑筋吧。