asp.net mvc 使用 ParamQuery grid jquery插件制作excel

最新推荐文章于 2024-05-22 11:28:57 发布

原创最新推荐文章于 2024-05-22 11:28:57 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mvc #asp.net #jquery

本文介绍如何利用ParamQuerygrid插件在ASP.NET MVC项目中实现类似Excel的在线表格编辑功能。通过免费版ParamQuerygrid搭建了一个简单的示例应用，并提供了View和Controller的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上看资料，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更加牛逼，不过没钱买，用免费版，动动脑筋吧。