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

本文介绍如何利用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更加牛逼,不过没钱买,用免费版,动动脑筋吧。  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值